@extends("layouts.master")
@section('title')
    Pos Dashboard
@endsection
@section('css')
    <link href="{{ URL::asset('build/css/custom.min.css') }}" id="app-style" rel="stylesheet" type="text/css" />
@endsection
@section('content')
    <!-- your page content start from here -->
    <div class="row">
        <div class="col-sm-12 col-xl-8">
            <div>
                <x-search-bar dataSearchUrl="{{ route('api.search.products') }}"/>
            </div>
            <div id="filter-nav">
                <!-- Filter buttons will be inserted here dynamically -->
            </div>
            <div class="row rounded-3 mt-3" style="background-color: lightgrey">
                <div class="col-12 pt-2 pb-3">
                    <div class="hidden" id="increment-url" data-increment-url="{{ route('view-increment') }}"></div>
                    <!-- This div holds the increment URL for incrementViews function on pos-dashboard.ini.js -->

                    <div id="product-list" class="p-2 row row-cols-1 row-cols-md-3 g-4">
                        <!-- Product cards will be inserted here dynamically -->

                    </div>
                    <div class="row">
                        <div class="col-6 px-4">
                            <p id="results-info" class="text-muted mb-0 mt-2"></p>
                        </div>
                        <div class="col-6 px-4">
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-end mb-0">
                                    <!-- Pagination links will be inserted here dynamically -->
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card mt-3">
                <div class="card-header">
                    <div class="d-flex">
                        <div class="flex-grow-1">
                            <h5 class="card-title mb-0">Order Summary</h5>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-borderless align-middle mb-0">
                            <thead class="table-light text-muted">
                            <tr>
                                <th style="width: 90px;" scope="col">Product</th>
                                <th scope="col">Product Info</th>
                                <th scope="col" class="text-end">Price</th>
                                <th scope="col" class="text-end">Action</th>
                            </tr>
                            </thead>
                        </table>
                        <div class="scrollable-tbody-wrapper">
                            <table class="table table-borderless align-middle mb-0">
                                <tbody id="selected-products">
                                <!-- Dynamically selected products will go here -->
                                </tbody>
                            </table>
                        </div>
                        <table class="table table-borderless align-middle mb-0">
                            <tfoot class="order-summary-footer">
                            <tr>
                                <td class="fw-semibold" colspan="2">Sub Total :</td>
                                <td id="cart-subtotal" class="fw-semibold text-end"></td>
                            </tr>
                            <tr>
                                <td colspan="2">Discount <span class="text-muted"></span> :</td>
                                <td id="cart-discount" class="text-end"></td>
                                <td class="text-end">
                                    <button class="btn btn-icon btn-pills btn-soft-success btn-sm remove-product" id="apply-discount" type="button">
                                        <i class="bx bx-edit"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">Shipping Charge :</td>
                                <td id="cart-shipping" class="text-end"></td>
                                <td class="text-end">
                                    <button class="btn btn-icon btn-pills btn-soft-success btn-sm remove-product" id="apply-shipping-charge" type="button">
                                        <i class="bx bx-edit"></i>
                                    </button>
                            </tr>
                            <tr>
                                <td colspan="2">Estimated Tax (20%):</td>
                                <td id="cart-tax" class="text-end"></td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
            <div class="sticky-footer">
                <table class="table table-borderless align-middle mb-0">
                    <tr>
                        <td class="fw-semibold total-label">Total :</td>
                        <td class="text-end fw-semibold total-amount">$ <span id="cart-total"></span></td>
                    </tr>
                </table>
                <form id="orderForm" method="POST" action="{{ route('orders.store') }}">
                    @csrf
                    <!-- Hidden inputs to send order data -->
                    <input type="hidden" name="total" id="order-total">
                    <input type="hidden" name="subtotal" id="order-subtotal">
                    <input type="hidden" name="discount" id="order-discount">
                    <input type="hidden" name="shipping_cost" id="order-shipping">
                    <input type="hidden" name="tax" id="order-tax">
                    <input type="hidden" name="products" id="order-products">
                    <button class="btn btn-primary btn-block" type="submit" id="checkout-button">
                        Checkout
                        <span id="checkout-spinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                    </button>
                </form>
            </div>
        </div>
    </div>

    @include('components.product-card')
    @include('components.filter-button')
    @include('components.filter-dropdown')
    @include('components.summary-product-card')
    @include('components.discount-popup')
    @include('components.shipping-popup')
@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ asset('build/js/pages/pos-dashboard/pos-dashboard.init.js') }}"></script>
    <script src="{{ URL::asset('build/js/admin/app.js') }}"></script>


    {{--    <script>--}}
    {{--        @foreach($categories as $category)--}}
    {{--        @if($category->children()->count()==0 && $category->parent() == null)--}}
    {{--        addCategoryToFilterNav(@json($category), false);--}}
    {{--        @elseif($category->children()->count()>0 && $category->parent_id == null)--}}
    {{--        addCategoryToFilterNav(@json($category), true);--}}
    {{--        @elseif($category->parent_id != null)--}}
    {{--             addSubCategoryToFilterNav(@json($category), {{ $category->parent_id }});  --}}
    {{--        @endif--}}
    {{--        @endforeach--}}
    {{--    </script>--}}

    <script>
        let categories = @json($categories);
        let filterNav = document.getElementById('filter-nav');

        if (categories)
            categories.forEach(category => {
                addCategoryToFilterNav(category);
            });
    </script>

@endsection