@extends('layouts.main')

@section('container')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ $page_title }}</h3>
                </div>
                <!-- /.card-header -->
                <form onsubmit="return false;" method="POST" action="{{ route('admin.mitra.order.form', $order->id) }}">
                    @csrf
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-form-label">Mitra</label>
                                    <select name="showroom_id" class="form-control select2">
                                        <option value="">-- Pilih Mitra --</option>
                                        @foreach ($mitras as $row)
                                            <option value="{{ $row['value'] }}"
                                                @if ($order->seller_id == $row['value']) selected="selected" @endif>
                                                {{ $row['label'] }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="col-form-label">Showroom</label>
                                    <select name="showroom_id" class="form-control select2">
                                        <option value="">-- Pilih Showroom --</option>
                                        @foreach ($showrooms as $s)
                                            <option value="{{ $s['value'] }}"
                                                @if ($order->customer_id == $s['value']) selected="selected" @endif>
                                                {{ $s['label'] }}</option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="col-form-label">Metode Pembayaran</label>
                                    <select name="payment_method" class="form-control select2">
                                        @foreach ($payment_methods as $w)
                                            <option value="{{ $w['value'] }}"
                                                @if ($order->product_id == $w['value']) selected="selected" @endif>
                                                {{ $w['label'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="col-form-label">Bank</label>
                                    <select name="bank" class="form-control select2">
                                        {{-- @foreach ($banks as $w)
                                            <option value="{{ $w['value'] }}"
                                                @if ($order->product_id == $w['value']) selected="selected" @endif>
                                                {{ $w['label'] }}</option>
                                        @endforeach --}}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <hr>
                        <button type="button"class="btn btn-success float-left" data-toggle="modal"
                            data-target="#ordering">Tambah</button>
                        <table class="table w-100" id="table-cart">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Nama Merchant</th>
                                    <th>Garansi</th>
                                    <th>Quantity</th>
                                    {{-- <th>Diskon</th> --}}
                                    <th>Harga</th>
                                    <th>Sub Total</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Wplus</td>
                                    <td>W1</td>
                                    <td>2</td>
                                    {{-- <td>Rp 0</td> --}}
                                    <td>Rp 1.200.000</td>
                                    <td>Rp 2.400.000</td>
                                    <td class="text-center">
                                        <button class="btn btn-warning float-left"
                                            cemes-confirm="Anda Yakin Ingin Mengedit Pesanan ini?">Edit</button>
                                        <button class="btn btn-danger float-left"
                                            cemes-confirm="Anda Yakin Ingin Menghapus Pesanan ini?">Hapus</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        @if (!$create)
                            <hr>
                            <table>
                                <tr>
                                    <th>Status</th>
                                    <td class="text-capitalize">{{ $order->status }}</td>
                                </tr>
                                <tr>
                                    <th>Seller</th>
                                    <td>{{ $order->seller_name }}</td>
                                </tr>
                                <tr>
                                    <th>Showroom</th>
                                    <td>{{ $order->customer_name }}</td>
                                </tr>
                            </table>
                        @endif

                        @if ($create)
                            <button type="submit" class="btn btn-primary float-right">Create</button>
                        @endif
                </form>
                <div class="mt-5 d-flex justify-content-end">
                    @if ($order->status == 'unpaid')
                        <form cemes="form" method="POST" action="{{ route('admin.mitra.order.cancel', $order->id) }}">
                            <button type="submit" class="btn btn-danger mr-3"
                                cemes-confirm="Anda Yakin Ingin Membatalkan Pesanan ini?">Cancel</button>
                        </form>
                        <form cemes="form" method="POST" action="{{ route('admin.mitra.order.paid', $order->id) }}">
                            <button type="submit" class="btn btn-success"
                                cemes-confirm="Anda Yakin Ingin Mengubah status Pesanan ini jadi terbayar?">Paid</button>
                        </form>
                    @else
                        <button class="btn btn-default" disabled>Paid</button>
                    @endif
                </div>
            </div>

            <!-- /.card-body -->
            <div class="card-footer">
                <a href="{{ route('admin.mitra.order.index') }}" class="btn btn-default">Back</a>
            </div>

        </div>
        <!-- /.card -->

    </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="ordering" tabindex="-1" role="dialog" aria-labelledby="orderingLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Ordering</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="#" onsubmit="createCart(event); return false;" id="formCart" method="post">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-form-label">Produk WPlus</label>
                                        <select name="item_id" id="item_id" class="form-control select2 w-100">
                                            @foreach ($product_wplus as $w)
                                                <option value="{{ $w['value'] }}">
                                                    {{ $w['label'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-form-label">Banyaknya</label>
                                        <input type="number" min="1" max="99" placeholder="minimal 1 paket"
                                            value="{{ $order->qty ?? 1 }}" name="qty" id="qty"
                                            class="form-control">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-form-label">Harga Barang</label>
                                        <input name="price" id="price" class="form-control" disabled>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-form-label">Total Harga Barang</label>
                                        <input name="sub_total" id="sub_total" class="form-control" disabled>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" form="formCart" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        localStorage.removeItem("cart");
        let form = new FormData();
        let cartItems = localStorage.getItem("cart");
        var garansi = {
            @php echo $const_products_wplus @endphp
        };
        var harga = {
            @php echo $const_price_wplus @endphp
        };
        $(document).ready(function() {
            createHTML();

            $("#item_id, #qty").on('change', function() {
                var produk = $("#item_id").val();
                var qty = $("#qty").val();
                $("#price").val(harga[produk] ?? 0);
                $("#sub_total").val((harga[produk] ?? 0) * (qty ?? 0));
            });
        });

        function appendCart(html) {
            $("table#table-cart tbody").html(html);
        }

        function createHTML() {
            if (cartItems != null) {
                json = JSON.parse(cartItems);
                if (typeof json === "object") {
                    var cart = '',
                        no = 1;
                    Object.keys(json).forEach(function(key) {
                        cart += `<tr>
                                    <td>${no++}</td>
                                    <td>Wplus</td>
                                    <td>${garansi[json[key].item_id] ?? '-'}</td>
                                    <td>${json[key].qty}</td>
                                    <td>Rp ${numberFormat(harga[json[key].item_id] ?? 0)}</td>
                                    <td>Rp ${numberFormat((harga[json[key].item_id] ?? 0) * json[key].qty)}</td>
                                    <td><button class="btn btn-warning float-left"
                                            cemes-confirm="Anda Yakin Ingin Mengedit Pesanan ini?">Edit</button>
                                        <button class="btn btn-danger float-left"
                                            cemes-confirm="Anda Yakin Ingin Menghapus Pesanan ini?">Hapus</button>
                                    </td>
                                </tr>`;
                    });
                    appendCart(cart);
                }
            } else {
                console.log("==================> Data tidak ada");
                console.log(cartItems);
            }
        }

        function createCart(event) {
            event.preventDefault();
            var cartForm = $(event.target);
            var dataCart = convertFormToJSON(cartForm);
            json = JSON.parse(cartItems);
            if (cartItems !== null && typeof json === 'object') {
                dataCart.qty = parseInt(dataCart.qty);
                console.log(json[dataCart.item_id]);
                if (json[dataCart.item_id] != undefined) {
                    dataCart.qty += parseInt(json[dataCart.item_id].qty);
                    json[dataCart.item_id] = dataCart
                } else {
                    Object.assign(json, {
                        [dataCart.item_id]: dataCart
                    });
                }
                var newData = JSON.stringify(json);
                localStorage.setItem('cart', newData);
            } else {
                dataCart.qty = parseInt(dataCart.qty);
                var newData = JSON.stringify({
                    [dataCart.item_id]: dataCart
                });
                localStorage.setItem('cart', newData)
            }
            cartItems = localStorage.getItem('cart')
            createHTML()
        }

        function numberFormat(number) {
            return new Intl.NumberFormat(['ban', 'id']).format(number);
        }

        function convertFormToJSON(form) {
            return $(form)
                .serializeArray()
                .reduce(function(json, {
                    name,
                    value
                }) {
                    json[name] = value;
                    return json;
                }, {});
        }
    </script>
@endsection