@extends('template.layouts.template-base')
@section('title', 'Customers')

@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 p-0">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-title">
                        Customers
                    </div>
                </div>
                <div class="col-auto cate-top-btns">
                   <div class="action-buttons d-none" id="bulkActions">
                        <button type="button"
                                id="bulkDeleteBtn"
                                class="btn-delete-category"
                                data-bs-toggle="modal"
                                data-bs-target=".remove-user-list-screen">
                            Deactivate Customer <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="javascript:void(0);">
                        Add Customers<i class="ri-add-fill fs-5"></i>
                    </a> --}}
                        </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid product-table-sec customer-page">
        <div class="content-wrapper">
            <div class="filter-section">
                <span class="badge-total">Total Products - 07</span>
                <span class="badge-active-cus">Active Customers - {{ $activeCustomers }}</span>
                <span class="badge-inacive-cus">Inactive Customers  - {{ $inActiveCustomers }}</span>
                {{-- 
                <div class="search-box-category">
                    <input type="text" placeholder="Search" id="searchInput">
                    <i class="bx bx-search"></i>
                </div> --}}
                <div>
                    <button class="filter-btn" data-bs-toggle="modal" data-bs-target=".filter-modal-popup">
                       Filter <i class="ri-equalizer-line"></i>
                       
                    </button>
                </div>

            </div>

            <div class="card-body">
                <div class="table-responsive">
                    <table id="customersTable" class="table">
                        <thead>
                            <tr>
                                <th scope="col"><input type="checkbox" id="selectAll"></th>
                                <th scope="col">Customer Name</th>
                                <th scope="col">Phone Number</th>
                                <th scope="col">Location</th>
                                <th scope="col">Orders</th>
                                <th scope="col">Last Order</th>
                                <th scope="col">Revenue</th>
                                <th scope="col">Status</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                      
                    </table>
                </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')">Status</button>
        <button class="tab" onclick="switchTab('ordered-product')">Ordered Product</button>
        <button class="tab" onclick="switchTab('revenue')">Revenue(₹)</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="active-stock">
                        <label for="active-stock">Active</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="in-active-stock">
                        <label for="in-active-stock">Inactive</label>
                    </div>
                </div>
            </div>
                </div>

                <div class="tab-content" id="ordered-product">
            <div class="filter-section">
                <h3>Ordered Product</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">High to Low <i class="bx bx-sort-alt-2 fs-5 m-2"></i></label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="inactive">
                        <label for="inactive">Low to Hight <i class="bx bx-sort-alt-2 fs-5 m-2"></i> </label>
                    </div>
                </div>
            </div>
                </div>

                <div class="tab-content" id="revenue">
            <div class="filter-section">
                <h3>Ordered Revenue</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">Below ₹5,000</label>
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox" id="70kg">
                        <label for="70kg">Below ₹5,000</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="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
    <div id="deleteUserToast" 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>Deleted Successful</h6>
        <p>The user has been deleted successfully.</p>
    </div>
        </div>
        </div>
    </div>

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

@endsection


@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="{{ asset('assets/auth/js/jquery-ui.js') }}"></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>
               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>
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.category-checkbox');
        const bulkActions = document.getElementById('bulkActions');

        // Toggle buttons visibility
        function toggleBulkActions() {
            let selected = $('.customer-checkbox:checked').length;

            if (selected > 0) {
                $('#bulkActions').removeClass('d-none');
            } else {
                $('#bulkActions').addClass('d-none');
            }
        }

        // 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 type="text/javascript">
    var table;

    $(function() {

        table = $('#customersTable').DataTable({
            processing: true,
            serverSide: true,
            ordering: false,
            searching: true,
            responsive: true,
            pageLength: 10,
            ajax: {
                url: "{{ route('backend.customers.index') }}",
                data: function(d) {
                    d.status = $('#statusFilter').val();
                    d.search = $('input[type="search"]').val();
                }
            },
            columns: [
                { data: 'checkbox' },
                { data: 'name' },
                { data: 'mobile' },
                { data: 'district' },
                { data: 'orders' },
                { data: 'last_order' },
                { data: 'revenue' },
                { data: 'status' },
                { data: 'action' }
            ],
        });

        // Reset selectAll after redraw
        table.on('draw', function () {
            $('#selectAll').prop('checked', false);
            $('#bulkActions').addClass('d-none');
        });

        // Select All
        $(document).on('click', '#selectAll', function () {
            var rows = table.rows({ 'search': 'applied' }).nodes();
            $('input.customer-checkbox', rows).prop('checked', this.checked);
        });

        // Individual Checkbox
        $(document).on('change', '.customer-checkbox', function () {
            var total = table.rows({ 'search': 'applied' }).nodes().length;
            var checked = $('input.customer-checkbox:checked').length;
            $('#selectAll').prop('checked', total === checked);
            toggleBulkActions();
        });

    });

    function getSelectedCustomers() {
        let ids = [];

        $('.customer-checkbox:checked').each(function () {
            ids.push($(this).val());
        });

        return ids;
    }

    $(document).on('click', '#bulkDeleteBtn', function () {

        let ids = getSelectedCustomers();

        if (ids.length === 0) {
            alert('Please select at least one customer.');
            return;
        }

        if (!confirm('Are you sure you want to deactivate selected customers?')) {
            return;
        }

        $.ajax({
            url: "{{ route('backend.customers.bulkDeactivate') }}",
            type: "POST",
            data: {
                ids: ids
            },
            success: function (response) {

                table.ajax.reload();
                $('#bulkActions').addClass('d-none');

                alert(response.message);
            },
            error: function () {
                alert('Something went wrong.');
            }
        });

    });

    $(document).on('click', '.delete-item', function (e) {
        e.preventDefault();

        let url = $(this).data('url');
        let table = $(this).data('table');

        if (!confirm('Are you sure you want to delete this customer?')) {
            return;
        }

        $.ajax({
            url: url,
            type: "POST",
            success: function (response) {

                if (response.status) {

                    $(table).DataTable().ajax.reload(null, false);

                    alert(response.message);

                } else {
                    alert('Something went wrong.');
                }
            },
            error: function () {
                alert('Server error.');
            }
        });
    });

    $(document).on('click', '.toggle-status', function (e) {

        e.preventDefault();

        let url = $(this).data('url');

        $.ajax({
            url: url,
            type: "POST",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {

                if (response.status) {
                    $('#customersTable').DataTable().ajax.reload(null, false);
                }

            },
            error: function () {
                alert('Server error');
            }
        });
    });


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