@extends('layouts.main')
@section('title', 'Plan Allocation Master List')
@section('container')

    {{-- ************ table **************** --}}
    <div class="row">
        <div class="col-xl-12 col-lg-12">
            <div class="card" style="height: max-content;">
                <div class="card-header p-1" style="background:var(--secondary) ;">
                    <div class="row align-items-center gy-2" style=" width: 100%; ">
                        <div class="col-md-6 col-12">
                            <h4 class="card-title p-2">Plan - View</h4>
                        </div>
                        <div class="col-md-6 col-12 d-flex flex-wrap justify-content-md-end gap-2">
                            @if (Auth::user()->hasActionAccess('plan.create'))
                                <a href="{{ url('/add-plan') }}" class="btn btn-primary p-2" target="_blank">
                                    <i class="fa fa-plus"></i> Add Plan
                                </a>
                            @endif
                            @if(Auth::user()->hasActionAccess('plan.reallocate'))
                                <a href="{{ url('/Reallocation_view_plan') }}" class="btn btn-primary p-2" target="_blank" disabled>
                                    <i class="fa fa-history"></i>  Reallocation Plan
                                </a>
                            @endif
                            @if (Auth::user()->hasActionAccess('plan.filter'))
                                <button class="btn btn-outline-light p-2" data-bs-toggle="modal"
                                    data-bs-target=".bd-example-modal-sm"><i class="fa fa-filter"></i> Filter</button>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="border rounded-3 p-3 mb-3 bg-light-subtle">
                        <div class="row g-3 align-items-end">
                            <div class="col-xl-3 col-lg-4 col-md-6">
                                <label for="globalSearch" class="form-label fw-semibold">Search</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fa fa-search"></i></span>
                                    <input type="text" id="globalSearch" class="form-control"
                                        placeholder="Search by project or plan name">
                                </div>
                            </div>
                            <div class="col-xl-2 col-lg-4 col-md-6">
                                <label for="filterCompany" class="form-label fw-semibold">Company</label>
                                <select id="filterCompany" class="form-control">
                                    <option value="">All Companies</option>
                                    @foreach ($Company as $company)
                                        <option value="{{ $company->id }}">{{ $company->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-xl-2 col-lg-4 col-md-6">
                                <label for="filterZone" class="form-label fw-semibold">Zone</label>
                                <select id="filterZone" class="form-control">
                                    <option value="">All Zones</option>
                                </select>
                            </div>
                            <div class="col-xl-2 col-lg-4 col-md-6">
                                <label for="filterUnit" class="form-label fw-semibold">Unit</label>
                                <select id="filterUnit" class="form-control">
                                    <option value="">All Units</option>
                                </select>
                            </div>
                            <div class="col-xl-2 col-lg-4 col-md-6">
                                <label for="filterProject" class="form-label fw-semibold">Project</label>
                                <select id="filterProject" class="form-control">
                                    <option value="">All Projects</option>
                                </select>
                            </div>
                            <div class="col-xl-1 col-lg-4 col-md-6">
                                <label for="planPageSize" class="form-label fw-semibold">Rows</label>
                                <select id="planPageSize" class="form-control">
                                    <option value="10">10</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </div>
                            <div class="col-12 d-flex flex-wrap gap-2">
                                @if (Auth::user()->hasActionAccess('plan.filter'))
                                    <button type="button" id="applyFilters" class="btn btn-primary">
                                        <i class="fa fa-filter"></i> Apply Filters
                                    </button>
                                @endif
                                <button type="button" id="resetPlanFilters" class="btn btn-outline-secondary">
                                    Reset
                                </button>
                                <div class="ms-md-auto text-muted small d-flex align-items-center" id="planTableSummary">
                                    Loading plan list...
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- ********** table ********* --}}
                    <div class="table-responsive">
                        <table id="planTable" class="table table-striped table-hover align-middle display nowrap">
                            <thead>
                                <tr>
                                    <th># Sr No</th>
                                    <th>Action</th>
                                    <th>Project Name</th>
                                    <th>Plan Name</th>
                                    <th>Status</th>
                                    <th>Pending Distributor</th>
                                    <th>WIP Distributor</th>
                                    <th>Total Distributor</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3 mt-3">
                            <div class="text-muted small" id="planPaginationMeta"></div>
                            <ul id="paginationControls" class="pagination pagination-sm justify-content-center mb-0"></ul>
                        </div>

                    </div>
                    {{-- ********** table ********* --}}
                    
                </div>
            </div>
        </div>
    </div>




    <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" style="background:var(--secondary) ;">
                    <h5 class="modal-title">Filters</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="minDate" class="form-label">From</label>
                        <input type="date" id="minDate" class="form-control">
                    </div>
                    <div>
                        <label for="maxDate" class="form-label">To</label>
                        <input type="date" id="maxDate" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
                    @if (Auth::user()->hasActionAccess('plan.filter'))
                        <button type="button" id="filterDate" class="btn btn-primary">Filter</button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <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">
                        </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" 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>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#profile"><i class="la la-PLUS me-2"></i>
                                    Add New</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 class="tab-pane fade" id="profile">
                                <div class="pt-4">
                                    <form id="genrate" >
                                        @csrf
                                        <div class="row g-3">
                                            <div class="col-lg-8">
                                                <label class="form-label fw-semibold">Add Auditors</label>
                                                <select id="Auditor_ids" required name="Auditor_id[]"
                                                    class="form-control js-example-templating" multiple=true>
                                                    <option value="">Select Auditor</option>
                                                </select>
                                                <div class="form-text">Selected auditors will be added to the active team for this plan.</div>
                                            </div>
                                            <div class="col-lg-4 d-flex align-items-end">
                                                <input type="hidden" id="dist_m" name="dist_m"/>
                                                <input type="Submit" value="Submit" class="btn btn-primary w-100" />
                                            </div>
                                        </div>
                                    </form>
                                </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" id="model_id"><i class="fa fa-filter"></i></button>

@endsection
<form id="deletenow" >
    @csrf
    <input type="hidden" id="deleteid" name="deleteid"/>
    <input type="hidden" id="status" name="status"/>
    <button class="btn btn-danger" id="deletenowsubmit"></button>    
</form>


<script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
<script nonce="{{ $cspNonce }}" src="{{ asset('js/addplan.js') }}"></script>
<script nonce="{{ $cspNonce }}">
$(document).ready(function () {
    $('#Auditor_id').select2({
        width: '100%',
        allowClear: true
    });

    $('#Auditor_ids').select2({
        width: '100%',
        allowClear: true,
        dropdownParent: $('.bd-example-modal-sm-lg')
    });
});
</script>