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

@section('subhead')
<title>Customer Details</title>
@endsection

@section('subcontent')
<div class="intro-y flex items-center mt-8">
    <h2 class="text-lg font-medium mr-auto">Customer Details</h2>
</div>
<div class="intro-y grid grid-cols-12 gap-6 mt-5">
    <div class="col-span-12 lg:col-span-12">
        <!-- BEGIN: Basic Tab -->
        <div class="intro-y box">
            <div id="basic-tab" class="p-5">
                <div class="preview">
                    <ul class="nav nav-tabs" role="tablist">
                        <li id="address" class="nav-item flex-1" role="presentation">
                            <button class="nav-link w-full py-2 active" data-tw-toggle="pill" data-tw-target="#address"
                                type="button" role="tab" aria-controls="address" aria-selected="true">
                                Address
                            </button>
                        </li>
                        <li id="order" class="nav-item flex-1" role="presentation">
                            <button class="nav-link w-full py-2" data-tw-toggle="pill" data-tw-target="#order"
                                type="button" role="tab" aria-controls="order" aria-selected="false">Orders
                            </button>
                        </li>
                        <li id="cart" class="nav-item flex-1" role="presentation">
                            <button class="nav-link w-full py-2" data-tw-toggle="pill" data-tw-target="#cart"
                                type="button" role="tab" aria-controls="cart" aria-selected="false">
                                Cart
                            </button>
                        </li>
                        <li id="wishlist" class="nav-item flex-1" role="presentation">
                            <button class="nav-link w-full py-2" data-tw-toggle="pill" data-tw-target="#wishlist"
                                type="button" role="tab" aria-controls="wishlist" aria-selected="false">
                                Wishlist
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content border-l border-r border-b">
                        <div id="address" class="tab-pane leading-relaxed p-5 active" role="tabpanel"
                            aria-labelledby="example-1-tab">
                            <div>
                                <div class="grid grid-cols-2 gap-3 ">
                                    @foreach ($customer->addresses as $addresses)
                                    <div class="box">
                                        <div class="capitalize pb-3 px-4">
                                            <div class="text-lg font-medium text-primary mt-2">
                                                <div class="mt-1">
                                                    {{ $addresses->full_name }}
                                                </div>
                                            </div>
                                            {{ $addresses->house_name }},
                                            {{ $addresses->road_name }} ,
                                            {{ $addresses->landmark }} ,
                                            {{ $addresses->city }} ,
                                            {{ $addresses->state }}-
                                            {{ $addresses->pincode }}<br>
                                            {{ $addresses->phone }}
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div id="order" class="tab-pane leading-relaxed p-5" role="tabpanel"
                            aria-labelledby="example-2-tab">
                            @section('subhead')
                            <title>Order List</title>
                            @endsection
                            <div class="intro-y box p-5 mt-5">
                                <div class="flex flex-col sm:flex-row sm:items-end xl:items-start">
                                    <form id="tabulator-html-filter-form" class="xl:flex sm:mr-auto">
                                        <div class="sm:flex items-center sm:mr-4">
                                            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2">Field</label>
                                            <select id="tabulator-html-filter-field"
                                                class="form-select w-full sm:w-32 2xl:w-full mt-2 sm:mt-0 sm:w-auto">
                                                <option value="order_no" selected>Order No</option>
                                                <option value="payment_method">Payment Method</option>
                                                <option value="payment_status">Payment Status</option>
                                                <option value="order_status">Order Status</option>
                                                <option value="email">Email</option> 
                                                <option value="phone">Phone</option>
                                            </select>
                                        </div>
                                        <div class="sm:flex items-center sm:mr-4 mt-2 xl:mt-0">
                                            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2">Type</label>
                                            <select id="tabulator-html-filter-type" class="form-select w-full mt-2 sm:mt-0 sm:w-auto">
                                                <option value="like" selected>Like</option>
                                                <option value="=">=</option>
                                                <option value="!=">!=</option>
                                            </select>
                                        </div>
                                        <div class="sm:flex items-center sm:mr-4 mt-2 xl:mt-0">
                                            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2">Value</label>
                                            <input id="tabulator-html-filter-value" type="text" class="form-control sm:w-40 2xl:w-full mt-2 sm:mt-0"
                                                placeholder="Search...">
                                        </div>
                                        <div class="mt-2 xl:mt-0">
                                            <button id="tabulator-html-filter-go" type="button" class="btn btn-primary w-full sm:w-16">Go</button>
                                            <button id="tabulator-html-filter-reset" type="button"
                                                class="btn btn-secondary w-full sm:w-16 mt-2 sm:mt-0 sm:ml-1">Reset</button>
                                        </div>
                                    </form>
                                    <div class="flex mt-5 sm:mt-0">
                                        <button id="tabulator-print" class="btn btn-outline-secondary w-1/2 sm:w-auto mr-2">
                                            <i data-lucide="printer" class="w-4 h-4 mr-2"></i> Print
                                        </button>
                                        <div class="dropdown w-1/2 sm:w-auto">
                                            <button class="dropdown-toggle btn btn-outline-secondary w-full sm:w-auto" aria-expanded="false"
                                                data-tw-toggle="dropdown">
                                                <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Export <i data-lucide="chevron-down"
                                                    class="w-4 h-4 ml-auto sm:ml-2"></i>
                                            </button>
                                            <div class="dropdown-menu w-40">
                                                <ul class="dropdown-content">
                                                    <li>
                                                        <a id="tabulator-export-csv" href="javascript:;" class="dropdown-item">
                                                            <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Export CSV
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a id="tabulator-export-json" href="javascript:;" class="dropdown-item">
                                                            <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Export JSON
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a id="tabulator-export-xlsx" href="javascript:;" class="dropdown-item">
                                                            <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Export XLSX
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a id="tabulator-export-html" href="javascript:;" class="dropdown-item">
                                                            <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Export HTML
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="overflow-x-auto scrollbar-hidden">
                                    <div id="tabulator" class="mt-5 table-report table-report--tabulator"></div>
                                </div>
                            </div>
                        </div>
                        <div id="cart" class="tab-pane leading-relaxed p-5" role="tabpanel"
                            aria-labelledby="example-2-tab">
                            @section('subhead')
                            <title>Cart-List</title>
                            @endsection
                            <div class="intro-y box p-5 mt-5">
                                <div class="flex flex-col sm:flex-row sm:items-end xl:items-start">
                                    <form id="tabulator-html-filter-form-cart" class="xl:flex sm:mr-auto">
                                        <div class="sm:flex items-center sm:mr-4">
                                            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2">Field</label>
                                            <select id="tabulator-html-filter-field-cart"
                                                class="form-select w-full sm:w-36 2xl:w-full mt-2 sm:mt-0 sm:w-auto">
                                                <option value="name">Product Name</option>
                                                <option value="price">Amount</option>
                                                <!-- <option value="category_product">Category Name</option> -->
                                                <option value="brand_name">Brand Name</option>
                                            </select>
                                        </div>
                                        <div class="sm:flex items-center sm:mr-4 mt-2 xl:mt-0">
                                            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2">Type</label>
                                            <select id="tabulator-html-filter-type-cart"
                                                class="form-select w-full mt-2 sm:mt-0 sm:w-auto">
                                                <option value="like" selected>Like</option>
                                                <option value="=">=</option>
                                                <option value="!=">!=</option>
                                            </select>
                                        </div>
                                        <div class="sm:flex items-center sm:mr-4 mt-2 xl:mt-0">
                                            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2">Value</label>
                                            <input id="tabulator-html-filter-value-cart" type="text"
                                                class="form-control sm:w-40 2xl:w-full mt-2 sm:mt-0"
                                                placeholder="Search...">
                                        </div>
                                        <div class="mt-2 xl:mt-0">
                                            <button id="tabulator-html-filter-go-cart" type="button"
                                                class="btn btn-primary w-full sm:w-16">Go</button>
                                            <button id="tabulator-html-filter-reset-cart" type="button"
                                                class="btn btn-secondary w-full sm:w-16 mt-2 sm:mt-0 sm:ml-1">Reset</button>
                                        </div>
                                    </form>
                                    <div class="flex mt-5 sm:mt-0">
                                        <button id="tabulator-print-cart"
                                            class="btn btn-outline-secondary w-1/2 sm:w-auto mr-2">
                                            <i data-lucide="printer" class="w-4 h-4 mr-2"></i> Print
                                        </button>
                                        <div class="dropdown w-1/2 sm:w-auto">
                                            <button class="dropdown-toggle btn btn-outline-secondary w-full sm:w-auto"
                                                aria-expanded="false" data-tw-toggle="dropdown">
                                                <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Export <i
                                                    data-lucide="chevron-down" class="w-4 h-4 ml-auto sm:ml-2"></i>
                                            </button>
                                            <div class="dropdown-menu w-40">
                                                <ul class="dropdown-content">
                                                    <li>
                                                        <a id="tabulator-export-csv-cart" href="javascript:;"
                                                            class="dropdown-item">
                                                            <i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
                                                            Export
                                                            CSV
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a id="tabulator-export-json-cart" href="javascript:;"
                                                            class="dropdown-item">
                                                            <i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
                                                            Export
                                                            JSON
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a id="tabulator-export-xlsx-cart" href="javascript:;"
                                                            class="dropdown-item">
                                                            <i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
                                                            Export
                                                            XLSX
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a id="tabulator-export-html-cart" href="javascript:;"
                                                            class="dropdown-item">
                                                            <i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
                                                            Export
                                                            HTML
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="overflow-x-auto scrollbar-hidden">
                                    <div id="tabulator_cart" class="mt-5 table-report table-report--tabulator">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="wishlist" class="tab-pane leading-relaxed p-5" role="tabpanel"
                            aria-labelledby="example-2-tab">
                            @section('subhead')
                            <title>Wishlist - List</title>
                            @endsection
                            <div class="intro-y box p-5 mt-5">
                                <div class="flex flex-col sm:flex-row sm:items-end xl:items-start">
                                    <form id="tabulator-html-filter-form-wishlist" class="xl:flex sm:mr-auto">
                                        <div class="sm:flex items-center sm:mr-4">
                                            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2">Field</label>
                                            <select id="tabulator-html-filter-field-wishlist"
                                                class="form-select w-full sm:w-36 2xl:w-full mt-2 sm:mt-0 sm:w-auto">
                                                <option value="name">Product Name</option>
                                                <option value="price">Amount</option>
                                                <!-- <option value="category_product">Category Name</option> -->
                                                <option value="brand_name">Brand Name</option>
                                            </select>
                                        </div>
                                        <div class="sm:flex items-center sm:mr-4 mt-2 xl:mt-0">
                                            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2">Type</label>
                                            <select id="tabulator-html-filter-type-wishlist"
                                                class="form-select w-full mt-2 sm:mt-0 sm:w-auto">
                                                <option value="like" selected>Like</option>
                                                <option value="=">=</option>
                                                <option value="!=">!=</option>
                                            </select>
                                        </div>
                                        <div class="sm:flex items-center sm:mr-4 mt-2 xl:mt-0">
                                            <label class="w-12 flex-none xl:w-auto xl:flex-initial mr-2">Value</label>
                                            <input id="tabulator-html-filter-value-wishlist" type="text"
                                                class="form-control sm:w-40 2xl:w-full mt-2 sm:mt-0"
                                                placeholder="Search...">
                                        </div>
                                        <div class="mt-2 xl:mt-0">
                                            <button id="tabulator-html-filter-go-wishlist" type="button"
                                                class="btn btn-primary w-full sm:w-16">Go</button>
                                            <button id="tabulator-html-filter-reset-wishlist" type="button"
                                                class="btn btn-secondary w-full sm:w-16 mt-2 sm:mt-0 sm:ml-1">Reset</button>
                                        </div>
                                    </form>
                                    <div class="flex mt-5 sm:mt-0">
                                        <button id="tabulator-print-wishlist"
                                            class="btn btn-outline-secondary w-1/2 sm:w-auto mr-2">
                                            <i data-lucide="printer" class="w-4 h-4 mr-2"></i> Print
                                        </button>
                                        <div class="dropdown w-1/2 sm:w-auto">
                                            <button class="dropdown-toggle btn btn-outline-secondary w-full sm:w-auto"
                                                aria-expanded="false" data-tw-toggle="dropdown">
                                                <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Export <i
                                                    data-lucide="chevron-down" class="w-4 h-4 ml-auto sm:ml-2"></i>
                                            </button>
                                            <div class="dropdown-menu w-40">
                                                <ul class="dropdown-content">
                                                    <li>
                                                        <a id="tabulator-export-csv-wishlist" href="javascript:;"
                                                            class="dropdown-item">
                                                            <i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
                                                            Export
                                                            CSV
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a id="tabulator-export-json-wishlist" href="javascript:;"
                                                            class="dropdown-item">
                                                            <i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
                                                            Export
                                                            JSON
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a id="tabulator-export-xlsx-wishlist" href="javascript:;"
                                                            class="dropdown-item">
                                                            <i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
                                                            Export
                                                            XLSX
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a id="tabulator-export-html-wishlist" href="javascript:;"
                                                            class="dropdown-item">
                                                            <i data-lucide="file-text" class="w-4 h-4 mr-2"></i>
                                                            Export
                                                            HTML
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="overflow-x-auto scrollbar-hidden">
                                    <div id="tabulator_wishlist" class="mt-5 table-report table-report--tabulator">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection
    @section('script')
    <script>
        let productListRoute = '{{ route('wishlist.index') }}';
        let cartListRoute = '{{ route('cart.index') }}';
        let orderListRoute = '{{ route('order.index') }}';
        let customer_id= '{{$customer->id}}';

        function updateOrderRoute(order_id) {
                let url = '{{ route('order.edit', ':order_id') }}';
                return url.replace(':order_id', order_id);
            }
        function updateProductOptionRoute(product_id) {
        let url = '{{ route('products.edit', ':product_id') }}';
        return url.replace(':product_id', product_id);
        }
    </script>

    <script src="{{ mix('dist/backend/js/ckeditor-classic.js') }}"></script>
    <script src="{{ asset(mix('vendors/jquery/jquery.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/repeater/jquery.repeater.min.js')) }}"></script>
    <script src="{{ asset(mix('js/backend/pages/order/edit.js')) }}"></script>
    <script src="{{asset(mix('js/backend/pages/order/index.js'))}}"></script>
    <script src="{{asset(mix('js/backend/pages/customers/cart.js'))}}"></script>
    <script src="{{asset(mix('js/backend/pages/customers/wishlist.js'))}}"></script>
    
    @endsection