@extends('template.layouts.template-base')
@section('title', 'Product Management - Category')

@section('styles')
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"
    />
<style>
  .page-content{
    background-color:#F0F4F8!important;
    padding: 80px 10px;
  }
</style>
@endsection

@section('content')
    <div class="page-header product-main">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        Product Management / <span class="breadcrumb-link">Product</span>
                    </div>
                </div>
                <div class="col-auto cate-top-btns">
                   <div class=" action-buttons d-none"  id="bulkActions">
                    <button class="btn-delete-category" data-bs-toggle="modal" data-bs-target=".remove-product-screen">
                        Detele List <i class='bx bxs-trash fs-5'></i>
                    </button>

                    </div>
                     <button class="btn-export-category">
                        Export
                          <svg xmlns="http://www.w3.org/2000/svg"
                         width="16" height="16"
                         viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round">
                        <path d="M12 16V3"></path>
                        <polyline points="7 8 12 3 17 8"></polyline>
                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                        </svg>
                    </button>

                    <a class="btn-add-category" href="{{ route('backend.products.create') }}">
                        Add Product <i class="ri-add-fill fs-5"></i>
                    </a>
                        </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid product-table-sec">
        <div class="content-wrapper">
            <div class="filter-section">
                <span class="badge-total">Total Products - {{ $product_count }}</span>

                <div class="position-relative">
                    <div class="col-md-3 custom-dropdown">
                        <select id="categoryFilter" name="category" class="dropdown-btn">
                            <option value="">All</option>
                            @foreach($categories as $category)
                            <option value="{{ $category->id }}">{{ $category->category_name_en }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- <div class="search-box-category">
                    <input type="text" placeholder="Search" id="searchInput">
                    <i class="bx bx-search"></i>
                </div> --}}

                <button class="filter-btn" data-bs-toggle="modal" data-bs-target=".filter-modal-popup">
                    <span>Filter</span>
                    <span><i class="ri-equalizer-line"></i></span>
                </button>

            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table id="productsTable" class="table align-middle mb-0 orders-table-container">
                        <thead class="custom-table-header">
                            <tr>
                                {{-- <th scope="col"><input type="checkbox" id="selectAll"></th> --}}
                                <th scope="col">S.No</th>
                                <th scope="col">Product</th>
                                <th scope="col">Price Per Kg</th>
                                <th scope="col">Category</th>
                                <th scope="col">Stock</th>
                                {{-- <th scope="col">Total Earnings</th> --}}
                                <th scope="col">Status</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
        <div id="deleteToast" class="toast login-success-toast" role="alert" aria-live="assertive" aria-atomic="true">

            <div class="toast-body d-flex align-items-center gap-3">
        <div class="toast-left">
            <div class="check-circle">
                ✓
            </div>
        </div>
        <div class="toast-right">
            <h6>Delete Successful</h6>
            <p>The Product has been deleted successfully.</p>
        </div>
            </div>
            </div>
    </div>

    <div class="modal fade filter-modal-popup forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">

                <div class="modal-header">
            <h4 class="filter-title">Filter</h4>
        <button class="close-btn" data-bs-dismiss="modal">×</button>
                </div>
                <div class="modal-body row inquiry-preview-modal ">
                    <div class="col-lg-4">
                            <div class="tabs-container">
        <button class="tab active" onclick="switchTab('stock-status')">Stock Status</button>
        <button class="tab" onclick="switchTab('product-status')">Product Status</button>
        <button class="tab" onclick="switchTab('weight')">Weight</button>
        <button class="tab" onclick="switchTab('price')">Price</button>
        <button class="tab" onclick="switchTab('sold-status')">Sold Status</button>
        <button class="tab" onclick="switchTab('date-range')">Date Range</button>
        </div>
                    </div>
                    <div class="col-lg-8">
                            <div class="content-container">
        <div class="tab-content active" id="stock-status">
            <div class="filter-section">
                <h3>Stock Status</h3>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="all-stock" checked>
                        <label for="all-stock">All</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="in-stock">
                        <label for="in-stock">In Stock</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="low-stock">
                        <label for="low-stock">Low Stock</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="out-of-stock">
                        <label for="out-of-stock">Out of Stock</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content" id="product-status">
            <div class="filter-section">
                <h3>Product Status</h3>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="all-product" checked>
                        <label for="all-product">All</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="active">
                        <label for="active">Active</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="inactive">
                        <label for="inactive">Inactive</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content" id="weight">
            <div class="filter-section">
                <h3>Weight</h3>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="all-weight" checked>
                        <label for="all-weight">All</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="50kg">
                        <label for="50kg">50 kg</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="70kg">
                        <label for="70kg">70 kg</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content" id="price">
            <div class="filter-section">
                <h3>Price</h3>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="radio" name="price" id="high-to-low" checked>
                        <label for="high-to-low">High to Low</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="radio" name="price" id="low-to-high">
                        <label for="low-to-high">Low to High</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content" id="sold-status">
            <div class="filter-section">
                <h3>Sold Status</h3>
                <div class="checkbox-group">
                    <div class="checkbox-item">
                        <input type="checkbox" id="all-sold" checked>
                        <label for="all-sold">All</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="sold">
                        <label for="sold">Sold</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="unsold">
                        <label for="unsold">Unsold</label>
                    </div>
                </div>
            </div>
        </div>

            <div class="tab-content" id="date-range">
                <div class="filter-section">
                        <h3>Date Range</h3>
                            <div class="date-input-group">
                                <div class="date-field">
                                <label>From Date</label>
                                <input
                                    type="text"
                                    id="from-date"
                                    placeholder="Select Date"
                                    readonly
                                    />
                                </div>
                        <div class="date-field">
                        <label>To Date</label>
                        <input
                        type="text"
                        id="to-date"
                        placeholder="Select Date"
                        readonly
                        />
                    </div>
                    </div>
                </div>
                </div>
        </div>
                    </div>
            <div class="modal-footer">
            <button class="btn btn-clear" onclick="clearFilters()">Clear All</button>
            <button class="btn btn-submit" onclick="submitFilters()">Submit</button>
        </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade add-stock-screen forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">

                <div class="modal-header">
                    <h5>Add Stock</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body inquiry-preview-modal p-4">
                    <div class="stock-wrapper">
                        <p class="stock-note">
                            Enter the quantity you want to add to the existing stock.
                        </p>

                        <div class="stock-row">
                            <div class="stock-field">
                                <label>Stock Level</label>
                                <input type="text" placeholder="Enter Category Name">
                            </div>

                            <div class="stock-field">
                                <label>Stock Alert</label>
                                <input type="text" placeholder="Enter Category Name">
                            </div>
                        </div>
                    </div>

                    <!-- Buttons -->
                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">

                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">
                            Cancel
                        </button>
                        <button type="button" class="btn delete-btn show-toast" data-toast-target="#addStockToast">
                            Add Stock
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('template.layouts.confirm-delete-modal');

@endsection


@section('scripts')

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
      // Open filter modal
      function openFilterModal() {
        document.getElementById("filterModalOverlay").classList.add("active");
      }

      // Close filter modal
      function closeFilterModal() {
        document
          .getElementById("filterModalOverlay")
          .classList.remove("active");
      }

      // Close modal when clicking on overlay
      function closeFilterOnOverlay(event) {
        if (event.target === document.getElementById("filterModalOverlay")) {
          closeFilterModal();
        }
      }

      // Switch tabs
      function switchTab(event, tabName) {
        const tabs = document.querySelectorAll(".tab");
        const contents = document.querySelectorAll(".tab-content");

        tabs.forEach((tab) => tab.classList.remove("active"));
        contents.forEach((content) => content.classList.remove("active"));

        event.target.classList.add("active");
        document.getElementById(tabName).classList.add("active");
      }

      // Initialize Flatpickr for date inputs
      flatpickr("#from-date", {
        dateFormat: "d M, Y",
        position:"below",
        defaultDate: new Date(),
        onChange: function (selectedDates, dateStr, instance) {
          console.log("From Date selected:", dateStr);
        },
      });

      flatpickr("#to-date", {
        dateFormat: "d M, Y",
        position:"auto",
        defaultDate: new Date(),
        onChange: function (selectedDates, dateStr, instance) {
          console.log("To Date selected:", dateStr);
        },
      });

      // Clear all filters
      function clearFilters() {
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        checkboxes.forEach((cb) => (cb.checked = false));

        const radios = document.querySelectorAll('input[type="radio"]');
        radios.forEach((radio) => (radio.checked = false));

        document.getElementById("from-date").value = "";
        document.getElementById("to-date").value = "";

        console.log("Filters cleared");
      }

      // Submit filters
      function submitFilters() {
        const filters = {
          stockStatus: Array.from(
            document.querySelectorAll("#stock-status input:checked"),
          ).map((cb) => cb.id),
          productStatus: Array.from(
            document.querySelectorAll("#product-status input:checked"),
          ).map((cb) => cb.id),
          weight: Array.from(
            document.querySelectorAll("#weight input:checked"),
          ).map((cb) => cb.id),
          price:
            document.querySelector('input[name="price"]:checked')?.id || null,
          soldStatus: Array.from(
            document.querySelectorAll("#sold-status input:checked"),
          ).map((cb) => cb.id),
          fromDate: document.getElementById("from-date").value,
          toDate: document.getElementById("to-date").value,
        };

        console.log("Filters submitted:", filters);
        closeFilterModal();
      }
    </script>

    <script>
        document.addEventListener('click', function (e) {

        document.querySelectorAll('.description-full.show').forEach(el => {
        el.classList.remove('show');
        });

        const desc = e.target.closest('.description-text');
        if (desc) {
            const fullText = desc.querySelector('.description-full');
            fullText.classList.add('show');
        }
    });
    </script>

    <script>
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.category-checkbox');
        const bulkActions = document.getElementById('bulkActions');

        // Toggle buttons visibility
        function toggleBulkActions() {
            const anyChecked = [...checkboxes].some(cb => cb.checked);
            bulkActions.classList.toggle('d-none', !anyChecked);
        }

        // Select All checkbox
        selectAll?.addEventListener('change', function () {
            checkboxes.forEach(cb => cb.checked = this.checked);
            toggleBulkActions();
        });

        // Individual checkbox change
        checkboxes.forEach(cb => {
            cb.addEventListener('change', () => {
                selectAll.checked = [...checkboxes].every(c => c.checked);
                toggleBulkActions();
            });
        });
    </script>
    <script>
        function switchTab(tabName)
        {
            const tabs = document.querySelectorAll('.tab');
            const contents = document.querySelectorAll('.tab-content');

            tabs.forEach(tab => tab.classList.remove('active'));
            contents.forEach(content => content.classList.remove('active'));

            event.target.classList.add('active');
            document.getElementById(tabName).classList.add('active');
        }
    </script>
    <script>
        $(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('#categoryFilter').on('change', function () {
                table.ajax.reload();
            });

            var table = $('#productsTable').DataTable({
                processing: true,
                ordering: false,
                searching: true,
                serverSide: true,
                responsive: true,
                pageLength: 10,
                language: {
                    paginate: {
                        next: '{{__('Next')}}',
                        previous: '{{__('Previous')}}'
                    }
                },
                ajax: {
                    url: "{{ route('backend.products.index') }}",
                    data: function(d) {
                        d.product_name_en      = $('#product_name_en').val(),
                        d.price                = $('#price').val(),
                        d.category_name        = $('#category_name').val(),
                        d.stock_level          = $('#stock_level').val(),
                        d.status               = $('#status').val();
                        d.category             = $('#categoryFilter').val();
                        d.search = $('input[type="search"]').val()
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    // {
                    //     data: 'checkbox',
                    //     name: 'checkbox'
                    // },
                    {
                        data: 'product_name_en',
                        name: 'product_name_en'
                    },
                    {
                        data: 'per_kg_price',
                        name: 'per_kg_price'
                    },
                    {
                        data: 'category_name',
                        name: 'category_name'
                    },
                    {
                        data: 'stock_level',
                        name: 'stock_level'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                ],
            });
            $('input[type="search"]').keyup(function(e) {
                countByFilter();
                table.draw();
                e.preventDefault();
            });
            $("#applyFilter").click(function(e) {
                table.draw();
                e.preventDefault();
            });


        });

        $(document).ready(function () {
            initDeleteHandler();
        });
    </script>

@endsection