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

@section('subhead')
<title>Products - List</title>
@endsection

<style>
    .tabulator-row .tabulator-cell {
        white-space: initial !important;
    }
</style>

@section('subcontent')
<div class="intro-y flex flex-col sm:flex-row items-center mt-8">
    <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
        <a class="btn btn-primary shadow-md mr-2" href="{{route('products.create')}}">Add New Products</a>
    </div>
</div>
<!-- BEGIN: HTML Table Data -->
<div class="intro-y box mt-5">
    <div class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
        <h2 class="font-medium text-base mr-auto">Search & Filters</h2>
        <div class="form-check form-switch w-full sm:w-auto sm:ml-auto mt-3 sm:mt-0">
            <label class="form-check-label ml-0" for="show-search-filters">Show Search & Filters</label>
            <input id="show-search-filters" data-target="#search-filters" class="toggle-content form-check-input mr-0 ml-3"
                type="checkbox">
        </div>
    </div>
    <div id="search-filters" class="p-5 hidden">
        <form id="tabulator-html-filter-form-status">
            <div class="grid grid-cols-4 gap-5">
            <div>
                <label>Product Name</label><br>
                <input id="product_name" type="text" class="form-control sm:w-64 2xl:w-full mt-2 sm:mt-0">
            </div>
            <div>
                <label>Price</label><br>
                <input id="price" type="text" class="form-control sm:w-64 2xl:w-full mt-2 sm:mt-0">
            </div>
            <div >
                <label>Catogary Name</label><br>
                <select name="category_id" id="category_id" class="form-control">
                    <option value="">Select</option>
                    @foreach ($categories as $category)
                    <option value="{{ $category->id }}">{{ $category->parent_id ?
                        $category->parent->name .'-->'. $category->name : $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <div >
                <label>SKU</label><br>
                <input id="sku" type="text" class="form-control sm:w-64 2xl:w-full mt-2 sm:mt-0">
            </div>
            <div >
                <label>Brand Name</label><br>
                <select name="brand_id" id="brand_id" class="form-control">
                    <option value="">Select</option>
                    @foreach ($brands as $brand)
                        <option value="{{$brand->id}}">{{ $brand->name }}</option>
                    @endforeach
                </select>
            </div>
            </div>
            <div class="mt-5">
                <button id="tabulator-html-filter-go-status" type="button" class="btn btn-primary">Search</button>
                <button id="tabulator-html-filter-reset-status" type="button" class="btn btn-outline-secondary">Reset</button>
                </div>
        </form>
    </div>
</div>
<div class="intro-y box p-5 mt-5">
    <div class="flex flex-col sm:flex-row sm:items-end xl:items-start">
        <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>
<!-- END: HTML Table Data -->

@endsection

@section('script')
<script>
    let productListRoute = '{{ route('products.index') }}'; 
    function todaysDealToggleRoute(product_id) {
        let url = '{{ route('todays_deal.toggle', ':product_id') }}';
        return url.replace(':product_id', product_id);
    }
    function toggleStatus(product_id) {
        let url = '{{ route('product.toggle_status', ':product_id') }}';
        return url.replace(':product_id', product_id);
    }
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="{{asset(mix("js/backend/pages/products/index.js"))}}"></script>
<script>
    function productCopyRoute(product_id)
        {
            let url = '{{ route('product.copyProduct', ':product_id') }}'
             return url.replace(':product_id', product_id);
        }
</script>
@endsection