@extends('../layout/' . $layout)

@section('subhead')
    <title>Dashboard - PO Bintang Asia</title>
@endsection

@section('subcontent')
    <div class="pos intro-y grid grid-cols-12 gap-5 mt-5">
        <!-- BEGIN: Ticket -->
        <div class="col-span-12 lg:col-span-4" id="ticket-layout">
            <div class="intro-y">
                <div class="box p-3">
                    <!-- <div class="flex items-center border-b py-5"> -->
                    <div class="flex mr-auto">
                        <div class="text-gray-600 items-center mr-auto">Kewajiban Jatuh Tempo</div>
                        <div class="font-medium text-base">Rp. -</div>
                        <!-- <div id='hutang-jth-tempo'></div> -->
                    </div>
                </div>
            </div>
            <div class="tab-content">
                <div class="tab-content__pane active" id="ticket">
                    <!-- Cari Produk -->
                    <div class="box mt-2 p-2">
                        <div class="pos__tabs nav-tabs justify-center flex">
                            <select class="cari input input--lg w-full box placeholder-theme-13"></select>
                        </div>
                    </div>
                    @php $total = 0 @endphp
                    @php
                        $cartItems = collect(session('cart'))->groupBy(function ($item) {
                            return ($item['id_program'] ?? '') . '||' . $item['kd_brg'];
                        });
                    @endphp

                    @if (session('cart'))
                        <div class="pos__ticket box p-2 mt-2" id="detail-brg">
                            @foreach ($cartItems as $key => $items)
                                @php
                                    $first = $items->first();
                                    $programId = $first['id_program'] ?? '';
                                    $isProgram = $programId !== '';

                                    $mainItems = $items->where('isBonus', '!=', 'Y');
                                    $totalMainQty = $mainItems->sum('satuan_qty');
                                    $totalMainPrice = $mainItems->sum('total_price');

                                    $bonusItems = $items->where('isBonus', 'Y');
                                    $totalBonusQty = $bonusItems->sum('satuan_qty');
                                    $totalBonusPrice = $bonusItems->sum('total_price');
                                @endphp

                                {{-- Main Row --}}
                                <a role="button"
                                    onclick="detailCart('{{ $first['id_program'] }}', '{{ $first['nm_program'] }}','{{ $first['kd_brg'] }}','{{ $first['name'] }}','{{ $first['quantity'] }}','{{ $first['satuan'] }}','{{ $totalMainQty }}','{{ $first['jml_dus'] }}','{{ $first['jml_inner'] }}')"
                                    class="flex items-center p-3 cursor-pointer transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">
                                    <div class="pos__ticket__item-name truncate mr-1">{{ $first['name'] }}</div>
                                    <div class="text-gray-600">| {{ $totalMainQty }} ({{ $first['satuan'] }})</div>
                                    @if ($first['isBonus'] == 'Y')
                                        <div class="pos__ticket__item-name truncate mr-1 text-gray-600">&nbsp;( Bonus )
                                        </div>
                                    @endif
                                    @if (empty($first['id_program']))
                                        <i data-feather="edit" class="w-4 h-4 text-gray-600 ml-2"></i>
                                    @else
                                        <i data-feather="minus-circle" class="w-4 h-4 text-gray-600 ml-2"></i>
                                    @endif
                                    <div class="ml-auto">Rp. {{ number_format($totalMainPrice, 0, ',', '.') }}</div>
                                    @php $total += $totalMainPrice @endphp
                                </a>

                                @if ($bonusItems->count() > 0)
                                    @php
                                        $firstBonus = $bonusItems->first();
                                    @endphp
                                    <div class="ml-4 pl-4 border-l border-gray-300 text-xs text-gray-600 py-1">
                                        {{ $firstBonus['name'] }} - {{ $totalBonusQty }} ({{ $firstBonus['satuan'] }})
                                        <span class="text-gray-400">(Bonus)</span>
                                    </div>
                                    @php $total += $totalBonusPrice @endphp
                                @endif
                            @endforeach
                        </div>
                    @endif

                    <div class="col-span-12">
                        <textarea class="input w-full border mt-2 flex-1" placeholder="Catatan" id="catatan"></textarea>
                    </div>

                    <div class="box p-5 mt-2">
                        <div class="flex items-center">
                            <div id="pembayaran" class="text-sm mr-auto">Metode Pembayaran</div>
                            <div class="ml-auto">
                                <select id="jenis-pembayaran" name="jenis-pembayaran"
                                    class="input w-28 border text-sm rounded-md h-9 px-2 leading-tight">
                                    <option value="tunai" class="text-sm">Cash</option>
                                    <option value="kredit" class="text-sm">Credit</option>
                                </select>
                            </div>
                        </div>

                        <div class="flex mt-4 pt-4 border-t border-gray-200">
                            <div class="mr-auto text-sm" id="subtotal">Subtotal</div>
                            <div class="text-sm" id="subtotal-value" data-value="{{ $total }}">Rp.
                                {{ number_format($total, 0, ',', '.') }}</div>
                        </div>
                        <div class="flex mt-4" style="display: none;">
                            <div class="mr-auto">Discount</div>
                            <div class="text-theme-6">10%</div>
                        </div>
                        <div class="flex mt-4 pt-4 border-t border-gray-200">
                            <div class="mr-auto font-medium text-base">Total</div>
                            <div class="font-medium text-base" id="total-value" data-value="{{ $total }}">Rp.
                                {{ number_format($total, 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="flex mt-5">
                        <button class="button w-32 inline-block mr-1 mb-2 border border-gray-400 text-gray-600"
                            onclick="{{ !empty(session('cart')) ? 'return showAllProduct();' : '' }}">Hapus List</button>
                        <button
                            class="button w-32 inline-block mr-1 mb-2 {{ empty(session('cart')) ? 'bg-gray-200 text-gray-600 cursor-not-allowed' : 'text-white bg-theme-1 shadow-md' }} ml-auto"
                            onclick="{{ !empty(session('cart')) ? 'return showSaveProduct();' : 'return false;' }}"
                            {{ empty(session('cart')) ? 'disabled' : '' }}>
                            Simpan
                        </button>
                    </div>
                </div>

                <!-- Detail Tabs -->
                <div class="tab-content__pane" id="details">
                    <div class="box p-5 mt-5">
                        <div class="flex items-center border-b py-5">
                            <div class="">
                                <div class="text-gray-600">Kewajiban Jatuh Tempo</div>
                                <div id='hutang-jth-tempo'>Rp. -</div>
                            </div>
                            <i data-feather="file-text" class="w-4 h-4 text-gray-600 ml-auto"></i>
                        </div>
                        <div class="flex items-center border-b py-5">
                            <div class="">
                                <div class="text-gray-600">No. Tiket</div>
                                <div id='no-ticket'> - </div>
                            </div>
                            <i data-feather="file-text" class="w-4 h-4 text-gray-600 ml-auto"></i>
                        </div>
                        <div class="flex items-center border-b py-5">
                            <div class="">
                                <div class="text-gray-600">No. PO</div>
                                <div id='no-order'> - </div>
                            </div>
                            <i data-feather="file-text" class="w-4 h-4 text-gray-600 ml-auto"></i>
                        </div>
                        <div class="flex items-center border-b py-5">
                            <div class="">
                                <div class="text-gray-600">Tanggal</div>
                                <div id='tgl-order'>{{ date('Y-m-d') }}</div>
                            </div>
                            <i data-feather="clock" class="w-4 h-4 text-gray-600 ml-auto"></i>
                        </div>
                        <div class="flex items-center border-b py-5">
                            <div class="">
                                <div class="text-gray-600">Customer</div>
                                <div>{{ Auth::user()->nama }}</div>
                            </div>
                            <i data-feather="user" class="w-4 h-4 text-gray-600 ml-auto"></i>
                        </div>
                        <!-- <div class="flex items-center border-b py-5">
                            <div class="">
                                <div class="text-gray-600">People</div>
                                <div>3</div>
                            </div>
                            <i data-feather="users" class="w-4 h-4 text-gray-600 ml-auto"></i>
                        </div>
                        <div class="flex items-center pt-5">
                            <div class="">
                                <div class="text-gray-600">Table</div>
                                <div>21</div>
                            </div>
                            <i data-feather="mic" class="w-4 h-4 text-gray-600 ml-auto"></i>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- END: Ticket -->

        <!-- BEGIN: Item List -->
        <div class="intro-y col-span-12 lg:col-span-8">

            <div class="lg:flex intro-y mb-4">
                <div class="grid grid-cols-2 gap-1 mb-1">
                    <select class="cari-jenis input input--lg box lg:w-64 text-sm py-2" id="jns-select">
                        <option class="relative text-gray-700">
                            {{ session('nm_product') != '' ? session('nm_product') : 'Pilih Kategori' }}
                        </option>
                    </select>
                    @if (session('jns_product') != '')
                        <button class="button button--sm border flex items-center justify-center text-gray-700 w-10 h-10"
                            onclick="clearSelect()">
                            <i data-feather="x" class="w-5 h-5"></i>
                        </button>
                    @endif
                </div>

                <div class="relative text-gray-700 ml-auto mb-1">
                    <input type="text" class="input input--lg w-full lg:w-64 box pr-10 placeholder-theme-13"
                        value="{{ session('keywords') != '' ? session('keywords') : '' }}" placeholder="Cari Produk..."
                        id="name">
                    <i class="w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0" data-feather="search"></i>
                </div>

                <!-- New Dropdown for Items Per Page -->
                <div class="relative text-gray-700 ml-4 mb-1">
                    <select id="items-per-page" class="input input--lg box lg:w-15 text-sm py-2"
                        onchange="updateItemsPerPage()">
                        <option value="10" {{ session('showing') == 10 ? 'selected' : '' }}>10</option>
                        <option value="20" {{ session('showing') == 20 ? 'selected' : '' }}>20</option>
                        <option value="50" {{ session('showing') == 50 ? 'selected' : '' }}>50</option>
                        <option value="100" {{ session('showing') == 100 ? 'selected' : '' }}>100</option>
                    </select>
                </div>
            </div>

            <div id="product-list" class="mt-2">
                <div class="grid grid-cols-10 gap-5 pt-5 border-t border-theme-5">
                    @foreach ($product as $prod)
                        <a role="button" id="btnBarang-{{ $loop->iteration }}" onclick="detail('{{ $prod->product_code }}', '{{ $prod->product_name }}', '{{ $prod->unit_name }}')" class="intro-y block col-span-12 sm:col-span-2 xxl:col-span-2">
                            <div class="box rounded-md p-3 relative zoom-in flex flex-col items-center border-2">
                                <div class="w-full aspect-[3/4] flex justify-center relative">
                                    <img id="img-product" src="{{ $prod->image }}" class="w-full h-full object-contain">
                                </div>
                                <div class="block font-bold text-center truncate mt-2 text-xs">
                                    {{ $prod->product_name }}
                                </div>
                                <div class="block text-center truncate mt-1 text-xs">
                                    <i class="font-bold">Rp. {{ number_format($prod->price, 0, ',', '.') }}</i>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>

            <div class="mt-10" id="pagination">
                {{ $product->onEachSide(0)->links('layout.components.my-pagination') }}
            </div>

    </div>

</div>

    <!-- BEGIN: Delete Confirmation Modal -->
    <div class="modal" id="delete-confirmation-modal" role="dialog">
        <div class="modal__content">
            <div class="p-5 text-center">
                <i data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"></i>
                <div class="text-3xl mt-5">Konfirmasi Hapus</div>
                <div class="text-gray-600 mt-2">Apakah anda yakin ingin hapus seluruh produk?</div>
            </div>
            <div class="px-5 pb-8 text-center">
                <button type="button" data-dismiss="modal" class="button w-24 border text-gray-700 mr-1">Batal</button>
                <button type="button" onclick="javascript:deleteCartProduct('All')"
                    class="button w-24 bg-theme-6 text-white">Hapus</button>
            </div>
        </div>
    </div>
    <!-- END: Delete Confirmation Modal -->

    <!-- BEGIN: Save Confirmation Modal -->
    <div class="modal" id="save-confirmation-modal" role="dialog">
        <div class="modal__content">
            <div class="p-5 text-center">
                <i data-feather="check-circle" class="w-16 h-16 text-theme-9 mx-auto mt-3"></i>
                <div class="text-3xl mt-5">Konfirmasi Simpan</div>
                <div class="text-gray-600 mt-2">Apakah anda yakin ingin simpan untuk diproses?</div>
            </div>
            <div class="px-5 pb-8 text-center">
                <button type="button" data-dismiss="modal" class="button w-24 border text-gray-700 mr-1">Batal</button>
                <button type="button"
                    onclick="javascript:saveDataPOWithCurrentTotal('{{ Auth::user()->login_hash }}','0')"
                    class="button w-24 bg-theme-9 text-white">Simpan</button>
            </div>
        </div>
    </div>
    <!-- END: Save Confirmation Modal -->

    <!-- BEGIN: Save Confirmation Modal -->
    <div class="modal" id="confirmation-limit-modal" role="dialog">
        <div class="modal__content">
            <div class="p-5 text-center">
                <i data-feather="info" class="w-16 h-16 text-theme-12 mx-auto mt-3"></i>
                <div class="text-3xl mt-5">Informasi</div>
                <div class="text-gray-600 mt-2">Hutang jatuh tempo sudah mencapai limit, PO tidak dapat diproses!</div>
            </div>
            <div class="px-5 pb-8 text-center">
                <button type="button" data-dismiss="modal" class="button w-24 border text-gray-700 mr-1">OKE!</button>
            </div>
        </div>
    </div>
    <!-- END: Save Confirmation Modal -->
@include('pages.dashboard.js')
@include('pages.dashboard.modal-add')
@endsection