@extends('layouts.main')
@section('title', 'Questionnaire Master')
@section('container')
        <style>
        .filter-header {
            position: relative;
            cursor: pointer;
        }

        .filter-icon {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #6c757d;
        }

        .filter-dropdown {
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            padding: 10px;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            display: none;
            min-width: 200px;
        }

        .pagination-info {
            margin-top: 8px;
            font-size: 14px;
            color: #6c757d;
        }

        .table-responsive {
            overflow-x: auto;
        }

        .dropdown-item {
            cursor: pointer;
        }

        .column-toggle {
            margin-right: 8px;
        }

        .loading-spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(0, 0, 0, .1);
            border-radius: 50%;
            border-top-color: #F8B940;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }

        ul.pagination li {
            margin: 0;
            padding: 0;
            line-height: 14px !important;
            border: 0px !important;
            padding: 4px 0px !important;
            margin: 0 !important;
        }
    </style>

    <div class="row">
        <div class="col-xl-12 col-lg-12 col-sm-12">
            <div class="card" style="height: max-content;">
                <div class="card-header new-card-header p-2" style="background:var(--secondary) ;">
                    <h4 class="card-title">Questionnaire Distributor</h4>
                </div>
                <div class="card-body">
                         {{-- Filter Controls --}}
                    <div class="row">
                        <div class="row mb-3">
                            <div class="col-md-3">
                                <select id="filterCompany" class="form-control form-control-sm">
                                    <option value="">-- All Companies --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select id="filterZone" class="form-control form-control-sm">
                                    <option value="">-- All Zones --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select id="filterUnit" class="form-control form-control-sm">
                                    <option value="">-- All Units --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select id="filterProject" class="form-control form-control-sm">
                                    <option value="">-- All Projects --</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-inline float-end">
                                <div class="form-group mr-2">
                                    <label for="minDate" class="mr-2">From:</label>
                                    <input type="date" id="minDate" class="form-control">
                                </div>
                                <div class="form-group mr-2">
                                    <label for="maxDate" class="mr-2">To:</label>
                                    <input type="date" id="maxDate" class="form-control">
                                </div>
                                <div class="form-group mr-2">
                                    <button id="filterDate" class="btn btn-primary mr-2">
                                        <i class="fas fa-filter"></i> Filter
                                    </button>
                                </div>

                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="btn-group">
                                <button class="btn btn-outline-primary dropdown-toggle" type="button"
                                    id="columnSelectDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fas fa-columns"></i> Columns
                                </button>
                                <ul class="dropdown-menu" id="columnSelectionMenu">
                                    <li><a class="dropdown-item disabled" href="#" data-column="0"><input type="checkbox"
                                                class="column-toggle" data-column="0" checked readonly disabled> ID</a></li>
                                    <li><a class="dropdown-item disabled" href="#" data-column="1" readonly><input
                                                type="checkbox" class="column-toggle" data-column="1" checked readonly
                                                disabled> Actions</a></li>
                                    <li><a class="dropdown-item disabled" href="#" data-column="11" readonly><input
                                                type="checkbox" class="column-toggle" data-column="11" checked readonly
                                                disabled> Status</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="2"><input type="checkbox"
                                                class="column-toggle" data-column="2" checked> Company</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="3"><input type="checkbox"
                                                class="column-toggle" data-column="3" checked> Zone</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="4"><input type="checkbox"
                                                class="column-toggle" data-column="4" checked> Unit</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="5"><input type="checkbox"
                                                class="column-toggle" data-column="5" checked> Project</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="6"><input type="checkbox"
                                                class="column-toggle" data-column="6" checked> Customer Code</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="7"><input type="checkbox"
                                                class="column-toggle" data-column="7" checked> Distributor Name</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="8"><input type="checkbox"
                                                class="column-toggle" data-column="8" checked> Contact Person</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="9"><input type="checkbox"
                                                class="column-toggle" data-column="9" checked> Mobile No</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="10"><input type="checkbox"
                                                class="column-toggle" data-column="10" checked> Address</a></li>
                                </ul>
                                <button id="resetFilters" class="btn btn-outline-secondary">
                                    <i class="fas fa-sync-alt"></i> Reset
                                </button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-inline">
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                                    <input type="text" id="globalSearch" class="form-control"
                                        placeholder="Search all columns...">
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- Data Table --}}
                    <div class="table-responsive">
                        <table id="distributorTable" class="table table-bordered table-striped table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th data-sortable="true" class="filter-header">ID <i class="fas fa-filter filter-icon"
                                            data-column="0"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control column-filter" data-column="0"
                                                placeholder="Filter ID...">
                                        </div>
                                    </th>
                                    <th>Actions</th>
                                    <th data-sortable="true" data-sortable="true" class="filter-header">Status <i
                                            class="fas fa-filter filter-icon" data-column="11"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control column-filter" data-column="11"
                                                placeholder="Filter Status...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" data-sortable="true" class="filter-header">Company <i
                                            class="fas fa-filter filter-icon" data-column="2"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control column-filter" data-column="2"
                                                placeholder="Filter Company...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header">Zone <i class="fas fa-filter filter-icon"
                                            data-column="3"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control column-filter" data-column="3"
                                                placeholder="Filter Zone...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header">Unit <i class="fas fa-filter filter-icon"
                                            data-column="4"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control column-filter" data-column="4"
                                                placeholder="Filter Unit...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header">Project <i
                                            class="fas fa-filter filter-icon" data-column="5"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control column-filter" data-column="5"
                                                placeholder="Filter Project...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header">Customer Code <i
                                            class="fas fa-filter filter-icon" data-column="6"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control column-filter" data-column="6"
                                                placeholder="Filter Code...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header">Distributor Name <i
                                            class="fas fa-filter filter-icon" data-column="7"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control column-filter" data-column="7"
                                                placeholder="Filter Name...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header">Contact Person <i
                                            class="fas fa-filter filter-icon" data-column="8"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control column-filter" data-column="8"
                                                placeholder="Filter Contact...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header">Mobile No <i
                                            class="fas fa-filter filter-icon" data-column="9"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control column-filter" data-column="9"
                                                placeholder="Filter Mobile...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header">Address <i
                                            class="fas fa-filter filter-icon" data-column="10"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control column-filter" data-column="10"
                                                placeholder="Filter Address...">
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    {{-- Pagination --}}
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <div class="pagination-info"></div>
                        </div>
                        <div class="col-md-6">
                            <nav class="float-end">
                                <ul class="pagination" id="paginationControls"></ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
    <script nonce="{{ $cspNonce }}" src="{{ asset('js/verificationdistributorQuestionnaire.js') }}"></script>
@endsection