@extends('layouts.main')
@section('title', 'Plan Master')
@section('container')
    <style>
        /* General table header and filter styling for consistency */
        .filter-header {
            position: relative;
            cursor: pointer;
            user-select: none; /* Prevent accidental text selection */
        }

        .filter-icon {
            position: absolute;
            right: 8px; /* Adjusted spacing */
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d; /* Standard muted color */
            pointer-events: none; /* Allows click-through to the header for sorting */
        }

        .filter-dropdown {
            position: absolute;
            background: white;
            border: 1px solid #dee2e6; /* Bootstrap border color */
            padding: 10px;
            z-index: 1000;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Soft shadow */
            display: none;
            min-width: 200px;
            left: 0; /* Align left for better visibility */
        }

        .pagination-info {
            margin-top: 8px;
            font-size: 0.875rem; /* Smaller, standard font size */
            color: #6c757d;
        }

        .table-responsive {
            margin-top: 15px; /* Add some spacing above the table */
        }

        .dropdown-item {
            cursor: pointer;
        }

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

        .loading-spinner {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border: 0.15rem solid rgba(0, 0, 0, .1);
            border-radius: 50%;
            border-top-color: #F8B940;
            animation: spin 1s linear infinite; 
            vertical-align: middle;
        }

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

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

        ul.pagination li {
            margin: 0 2px;
            padding: 0;
        }

        ul.pagination .page-link {
            line-height: 1.25;
            padding: 0px 9px 10px 12px !important; 
            width: auto !important;
            border: none !important;
        }
        
        .form-control-sm {
            height: calc(1.5em + 0.5rem + 2px);
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }

        .column-filter {
            margin-bottom: 5px;
        }
    </style>

    {{-- ************ table **************** --}}
    <div class="row">
        <div class="col-xl-12 col-lg-12">
            <div class="card shadow-sm" style="height: max-content;">
                {{-- Card Header with Title and Action Buttons --}}
                <div class="card-header d-flex justify-content-between align-items-center p-3"
                    style="background: var(--secondary); border-bottom: 1px solid rgba(0,0,0,.125);">
                    <h4 class="card-title text-white mb-0">Plan Master - View</h4>
                    <div class="d-flex align-items-center">
                        {{-- Export Button --}}
                        @if (Auth::user()->hasActionAccess('distributor.export'))
                            <a href="{{ url('/export-distributors') }}" id="exportDistributorsBtn" class="btn btn-sm btn-light text-primary me-2 disabled"
                                aria-disabled="true"
                                target="_blank" title="Export Data">
                                <i class="fa fa-file-export me-1"></i> Export
                            </a>
                        @endif
                        {{-- Filter Modal Button (The existing modal) --}}
                        <button class="btn btn-sm btn-light text-primary me-2" data-bs-toggle="modal"
                            data-bs-target=".bd-example-modal-sm" title="Open Filter Modal">
                            <i class="fa fa-filter me-1"></i> Quick Filters
                        </button>
                        {{-- Add Button --}}
                        @if (Auth::user()->hasActionAccess('distributor.add'))
                            <a href="{{ url('/add-distributors') }}" class="btn btn-sm btn-primary" target="_blank"
                                title="Add New Distributor">
                                <i class="fa fa-plus me-1"></i> Add New
                            </a>
                        @endif
                    </div>
                </div>

                <div class="card-body">
                    {{-- General Filter Controls --}}
                    <div class="row mb-3 gx-2">
                        <div class="col-md-3 mb-2">
                            <label for="filterCompany" class="form-label visually-hidden">Company</label>
                            <select id="filterCompany" class="form-control form-control-sm">
                                <option value="">-- All Companies --</option>
                                @foreach($company as $row)
                                <option value="{{ $row->id }}">{{ $row->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 mb-2">
                            <label for="filterZone" class="form-label visually-hidden">Zone</label>
                            <select id="filterZone" class="form-control form-control-sm">
                                <option value="">-- All Zones --</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-2">
                            <label for="filterUnit" class="form-label visually-hidden">Unit</label>
                            <select id="filterUnit" class="form-control form-control-sm">
                                <option value="">-- All Units --</option>
                            </select>
                        </div>
                        <div class="col-md-3 mb-2">
                            <label for="filterProject" class="form-label visually-hidden">Project</label>
                            <select id="filterProject" class="form-control form-control-sm">
                                <option value="">-- All Projects --</option>
                            </select>
                        </div>
                    </div>
                    
                    <hr class="my-3">

                    {{-- Search, Column Toggle, Date Filter and Reset Controls --}}
                    <div class="row align-items-center mb-3">
                        {{-- Date Range Filter --}}
                        <div class="col-lg-5 col-md-12 mb-2 mb-lg-0">
                            <div class="d-flex align-items-center">
                                <label for="minDate" class="me-2 text-nowrap form-label mb-0">Date Range:</label>
                                <input type="date" id="minDate" class="form-control form-control-sm me-2" title="From Date">
                                <span class="me-2">-</span>
                                <input type="date" id="maxDate" class="form-control form-control-sm me-2" title="To Date">
                                <button id="filterDate" class="btn btn-sm btn-primary text-nowrap">
                                    <i class="fas fa-filter"></i>
                                </button>
                            </div>
                        </div>

                        {{-- Column Toggle and Reset --}}
                        <div class="col-lg-3 col-md-6 mb-2 mb-lg-0">
                            <div class="btn-group w-100">
                                <button class="btn btn-sm btn-outline-secondary 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><h6 class="dropdown-header">Toggle Visibility</h6></li>
                                    {{-- NOTE: I've corrected the column data-column indices to be sequential for the table columns --}}
                                    <li><a class="dropdown-item disabled" href="#" data-column="0"><input type="checkbox"
                                                class="column-toggle me-2" 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 me-2" 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 me-2" data-column="11" checked readonly
                                                disabled> Status</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="2"><input type="checkbox"
                                                class="column-toggle me-2" data-column="2" checked> Company</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="3"><input type="checkbox"
                                                class="column-toggle me-2" data-column="3" checked> Zone</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="4"><input type="checkbox"
                                                class="column-toggle me-2" data-column="4" checked> Unit</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="5"><input type="checkbox"
                                                class="column-toggle me-2" data-column="5" checked> Project</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="6"><input type="checkbox"
                                                class="column-toggle me-2" data-column="6" checked> Customer Code</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="7"><input type="checkbox"
                                                class="column-toggle me-2" data-column="7" checked> Distributor Name</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="8"><input type="checkbox"
                                                class="column-toggle me-2" data-column="8" checked> Contact Person</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="9"><input type="checkbox"
                                                class="column-toggle me-2" data-column="9" checked> Mobile No</a></li>
                                    <li><a class="dropdown-item" href="#" data-column="10"><input type="checkbox"
                                                class="column-toggle me-2" data-column="10" checked> Address</a></li>
                                </ul>
                                <button id="resetFilters" class="btn btn-sm btn-outline-danger">
                                    <i class="fas fa-sync-alt"></i> Reset
                                </button>
                            </div>
                        </div>

                        {{-- Global Search --}}
                        <div class="col-lg-4 col-md-6">
                            <div class="input-group input-group-sm">
                                <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>

                    {{-- Data Table --}}
                    <div class="table-responsive">
                        <table id="distributorTable" class="table table-bordered table-striped table-hover align-middle">
                            <thead class="table-dark"> {{-- Changed to table-dark for a clear header --}}
                                <tr>
                                    <th data-sortable="true" class="filter-header text-nowrap">ID <i
                                            class="fas fa-filter filter-icon" data-column="0"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control form-control-sm column-filter" data-column="0"
                                                placeholder="Filter ID...">
                                        </div>
                                    </th>
                                    <th class="text-nowrap">Actions</th>
                                    <th data-sortable="true" class="filter-header text-nowrap">Status <i
                                            class="fas fa-filter filter-icon" data-column="11"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control form-control-sm column-filter" data-column="11"
                                                placeholder="Filter Status...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header text-nowrap">Company <i
                                            class="fas fa-filter filter-icon" data-column="2"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control form-control-sm column-filter" data-column="2"
                                                placeholder="Filter Company...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header text-nowrap">Zone <i
                                            class="fas fa-filter filter-icon" data-column="3"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control form-control-sm column-filter" data-column="3"
                                                placeholder="Filter Zone...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header text-nowrap">Unit <i
                                            class="fas fa-filter filter-icon" data-column="4"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control form-control-sm column-filter" data-column="4"
                                                placeholder="Filter Unit...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header text-nowrap">Project <i
                                            class="fas fa-filter filter-icon" data-column="5"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control form-control-sm column-filter" data-column="5"
                                                placeholder="Filter Project...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header text-nowrap">Customer Code <i
                                            class="fas fa-filter filter-icon" data-column="6"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control form-control-sm column-filter" data-column="6"
                                                placeholder="Filter Code...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header text-nowrap">Distributor Name <i
                                            class="fas fa-filter filter-icon" data-column="7"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control form-control-sm column-filter" data-column="7"
                                                placeholder="Filter Name...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header text-nowrap">Contact Person <i
                                            class="fas fa-filter filter-icon" data-column="8"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control form-control-sm column-filter" data-column="8"
                                                placeholder="Filter Contact...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header text-nowrap">Mobile No <i
                                            class="fas fa-filter filter-icon" data-column="9"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control form-control-sm column-filter" data-column="9"
                                                placeholder="Filter Mobile...">
                                        </div>
                                    </th>
                                    <th data-sortable="true" class="filter-header text-nowrap">Address <i
                                            class="fas fa-filter filter-icon" data-column="10"></i>
                                        <div class="filter-dropdown">
                                            <input type="text" class="form-control form-control-sm column-filter" data-column="10"
                                                placeholder="Filter Address...">
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>

                    {{-- Pagination & Info --}}
                    <div class="row mt-3 align-items-center">
                        <div class="col-md-6">
                            <div class="pagination-info">Showing **1** to **10** of **50** entries (Placeholder)</div>
                        </div>
                        <div class="col-md-6">
                            <nav class="float-md-end">
                                <ul class="pagination pagination-sm mb-0" id="paginationControls">
                                    {{-- Pagination list items will be injected here by JS --}}
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Quick Filters Modal (sm) --}}
    <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white p-3"> {{-- Better modal header style --}}
                    <h5 class="modal-title">⚙️ Date Filters</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="modalMinDate" class="form-label">From Date:</label>
                        <input type="date" id="modalMinDate" class="form-control"> {{-- Changed ID to avoid conflict with outside input --}}
                    </div>
                    <div class="mb-3">
                        <label for="modalMaxDate" class="form-label">To Date:</label>
                        <input type="date" id="modalMaxDate" class="form-control"> {{-- Changed ID to avoid conflict with outside input --}}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary light" data-bs-dismiss="modal">Close</button>
                    <button type="button" id="filterDateModal" class="btn btn-primary">Apply Filter</button> {{-- Changed ID to be specific --}}
                </div>
            </div>
        </div>
    </div>

    {{-- Upload BookStock Modal (sm-none is a bad class name, kept for compatibility) --}}
    <div class="modal fade bd-example-modal-sm bd-example-modal-sm-none" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header text-white p-3" style="background: var(--secondary) !important; border-bottom: 1px solid rgba(0,0,0,.125);"> {{-- Different color for different action --}}
                    <h5 class="modal-title text-white" style="">Upload BookStock</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="uploadbookstock">
                        @csrf
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="bookstock" class="form-label">Book Stock File (.xlsx, .xls)</label>
                                <input type="file" name="filename" class="form-control" id="bookstock" accept=".xlsx,.xls" required/>
                                <input name="dist_id" id="dist_id" type="hidden" />
                            </div>
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary w-100">Submit Upload</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <button class="btn btn-primary p-2 d-none" id="bookstockupload" data-bs-toggle="modal"
        data-bs-target=".bd-example-modal-sm-none" style="float:right;margin:10px;"><i class="fa fa-filter"></i> </button>




           <div class="modal fade bd-reallocateModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background:var(--secondary) ;">
                   <h5 class="modal-title">Reacllocate Plan</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="basic-form">
                        <form id="reallocate">
                            @csrf
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label>Select Status :</label>
                                        <select class="form-control" name="status" id="status"
                                            aria-label="Default select example" required="">
                                            <option value="">Select Status</option>
                                            <option value="1">Current Audit</option>
                                            <option value="2">Fresh Audit</option>

                                        </select>
                                </div>
                                <div class="form-group col-md-6">
                                    <label>Vendor/Agency :</label>
                                        <select class="form-control" name="agencey_id" id="agencey_id"
                                            aria-label="Default select example" required="">
                                            <option value="">Select Vendor/Agency</option>
                                            @foreach ($user->where('role_id', '4') as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach

                                        </select>
                                </div>
                                
                                <div class="form-group col-sm-6">
                                    <label>Auditor :</label>
                                    <select id="Auditor_id" required name="Auditor_id[]"
                                        class="form-control js-example-templating" multiple=true>
                                        <option value="">Selet Auditor</option>
                                    </select>
                                </div>

                                <div class="form-group col-sm-6">
                                    <label>Leader :</label>
                                    <select name="leader_id" id="leader_id" required class="form-control">
                                    </select>
                                </div>

                                <div class="col-xxl-6 col-md-6">
                                    <label>Verification :</label>
                                    <select required name="verification_id" class="form-control" id="verification_id">
                                        <option value="">Select Verification Name</option>
                                        @foreach ($user->where('role_id', '6') as $unames)
                                            <option value="{{ $unames->id }}">{{ $unames->name }}</option>
                                        @endforeach
                                    </select>
                                </div>


                                <div class="col-xxl-6 col-md-6" id="qc_ids">
                                    <label>QC :</label>
                                    <select class="form-control" name="qc_id" id="qc_id"
                                        aria-label="Default select example">
                                        <option value="">Select QC Name</option>
                                        @foreach ($user->where('role_id', '7') as $rowuser)
                                            <option value="{{ $rowuser->id }}">{{ $rowuser->name }}</option>
                                        @endforeach
                                    </select>
                                </div>



                                <div class="col-xxl-6 col-md-6" id="company_very_ids">
                                    <label>Company :</label>
                                    <select class="form-control" name="company_very_id" id="company_very_id"
                                        aria-label="Default select example">
                                        <option value="">Select Company Name</option>
                                        @foreach ($user->where('role_id', '8') as $rowuser)
                                            <option value="{{ $rowuser->id }}">{{ $rowuser->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-xxl-6 col-md-6">
                                    <label>Manager :</label>
                                    <select class="form-control" name="manager_id" id="manager_id"
                                        aria-label="Default select example">
                                        <option value="">Select Manager Name</option>
                                        @foreach ($user->where('role_id', '5') as $rowuser)
                                            <option value="{{ $rowuser->id }}">{{ $rowuser->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>
                            <input type="hidden" name="planid" id="planid">
                            <input type="hidden" name="dist_id_update" id="dist_id_update" />
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="Reallocationbtn" class="btn btn-primary btn-block">Reallocation</button>
                </div>
            </div>
        </div>
    </div>





    <div class="modal fade bd-example-modal-sm-lg-m" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header" style="background:var(--secondary) ;">
                    <h5 class="modal-title">View Teams</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body">
                    {{-- *************** TAB ************** --}}
                    <!-- Nav tabs -->
                    <div class="default-tab">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#home"><i class="la la-user me-2"></i>
                                    View Team's</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="home" role="tabpanel">
                                <div class="pt-4">
                                    {{-- ********** table ********* --}}

                                    <div class="table-responsive">
                                        <table class="table display nowrap" style="width:100%;">
                                            <thead>
                                                <tr>
                                                    <th>Sr No</th>
                                                    <th>Action </th>
                                                    <th>User Name</th>
                                                    <th>Role Name</th>
                                                    <th>Status</th>
                                                    <th>Start Date</th>
                                                </tr>
                                            </thead>
                                            <tbody id="userTable">
                                                
                                            </tbody>
                                        </table>

                                    </div>
                                    {{-- ********** table ********* --}}
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- *************** TAB ************** --}}
                </div>
                {{-- <div class="modal-footer"> --}}
                    {{-- <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button> --}}
                
                {{-- </div> --}}
            </div>
        </div>
    </div>

    <button class="btn btn-primary d-none p-2" style="float:right;" data-bs-toggle="modal"
        data-bs-target=".bd-example-modal-sm-lg-m" id="model_id"><i class="fa fa-filter"></i></button>


@endsection
<script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
<script nonce="{{ $cspNonce }}" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script nonce="{{ $cspNonce }}" src="{{ asset('js/distributor.js') }}"></script>