<div>
    <style>
        /* select2-selection select2-selection--multiple */
      
    </style>
    <div class="container-fluid">
        <div id="deleteModal" class="modal fade" role='dialog'>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>Are you sure you want to delete this?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <span id='deleteButton'></span>
                    </div>
                </div>
            </div>
        </div>
        {{-- Status model --}}
        <div id="statusModal" class="modal fade" role='dialog'>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>Are you sure you want to change the status?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <span id='changestatus'></span>
                    </div>
                </div>
            </div>
        </div>
        <div id="pauseModal" class="modal fade" role='dialog'>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>Select option?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <span>Pause</span>
                        <span>Unpause</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="pauseModalAction" class="modal fade" role='dialog'>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <p>Are you sure you want to pause?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <span id='changePauseStatus'></span>
                    </div>
                </div>
            </div>
        </div>

        {{-- end --}}
        <!-- Password Update Modal -->
        <div id="passwordModal" class="modal fade" role='dialog'>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Update Password</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form id="passwordForm" action="{{ route('member.update') }}" method="POST">
                            @csrf
                            <input type="hidden" name="user_id" id="user_id">

                            <div class="form-group">
                                <label for="new_password">New Password</label>
                                <div class="input-group">
                                    <input id="new_password" type="password"
                                        class="form-control @error('new_password') is-invalid @enderror"
                                        name="new_password">
                                    <span class="input-group-append">
                                        <button class="btn btn-outline-secondary cursor-pointer" type="button"
                                            id="toggleNewPassword">
                                            <i class="fa fa-eye-slash" id="eye-new-password"></i>
                                        </button>
                                    </span>
                                </div>
                                @error('new_password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="new_password_confirmation">Confirm New Password</label>
                                <div class="input-group">
                                    <input id="new_password_confirmation" type="password"
                                        class="form-control @error('new_password_confirmation') is-invalid @enderror"
                                        name="new_password_confirmation">
                                    <span class="input-group-append">
                                        <button class="btn btn-outline-secondary cursor-pointer" type="button"
                                            id="toggleNewPasswordConfirm">
                                            <i class="fa fa-eye-slash" id="eye-new-password-confirm"></i>
                                        </button>
                                    </span>
                                </div>
                                @error('new_password_confirmation')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">Update Password</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="content-wrapper">
            @if (session('status'))
                <div class="alert alert-success alert-dismissible fade show" role="alert"><i
                        class="far fa-check-circle"></i>
                    {{ session('status') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert"><i
                        class="far fa-check-circle"></i>
                    {{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif



            <section class="content">
                <div class="row page-titles">
                    <div class="col-md-5 align-self-center">
                        <h4 class="text-themecolor">Lead Distribution Panel</h4>
                    </div>
                    <div class="col-md-7 align-self-center text-right">
                        <div class="d-flex justify-content-end align-items-center">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                                <li class="breadcrumb-item active">Lead Distribution Panel</li>
                            </ol>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="form-inline">
                                    <form action="{{ route('leadDistribution') }}" method="get" id="form">
                                        <div class="row">
                                            <div class="mr-3 mb-2">
                                                <input type="text" wire:model.debounce.500ms="search"
                                                    class="form-control mr-2" placeholder="Registration No...">
                                            </div>

                                            <!-- Dropdown for Status Filter -->
                                            <div class="mr-3 mb-2">
<div class="mr-3 mb-2" wire:ignore>
    <select id="areaspro" multiple class="form-control">
        @foreach ($areas as $area)
            <option value="{{ $area->id }}">{{ $area->code . ' - ' . $area->name }}</option>
        @endforeach
    </select>
</div>
                                            </div>
                                            <div class="mr-3 mb-2">
                                                <select wire:model="member" class="form-control">
                                                    <option value="">All Members</option>
                                                    @foreach ($members as $id => $member)
                                                        <option value="{{ $id }}">{{ $member }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            {{-- <div class="mr-3 mb-2">
                                                <select wire:model="status" class="form-control">
                                                    <option value="">Status</option>
                                                    <option value="1" >Active</option>
                                                    <option value="0" >Inactive</option>
                                                </select>
                                            </div> --}}

                                            <!-- Submit Button and Reload Link -->
                                            <div class="mr-3 mb-2 d-flex">
                                                <button class="btn btn-sidebar btn btn-secondary w-100"
                                                    type="submit">
                                                    <i class="fas fa-search fa-fw"></i>
                                                </button>
                                                <a href="{{ route('leadDistribution') }}"
                                                    class="btn btn-secondary w-100" title="Reload">
                                                    <i class="fas fa-sync"></i>
                                                </a>
                                                {{-- @can('Lead-distribution-panel-undistributed-list')
                                                <a href="{{ route('leadUnDistribution') }}" class="btn btn-secondary w-100" title="Undistributed">
                                                     Undistributed
                                                </a>
                                                @endcan --}}
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <br>

                                <br>
                                <div wire:init="refreshLeads" class="table-responsive" wire:poll.1s="refreshLeads">
                                    <table
                                        class="table-auto w-full border-collapse border border-gray-300 table table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>S. No.</th>
                                                <th>Code</th>
                                                <th>Name</th>
                                                <th>Number</th>
                                                <th>M Name</th>
                                                <th>Nature</th>
                                                <th>PDF</th>
                                                {{-- <th>Status</th> --}}
                                                <th>Reason</th>
                                                <th>VRM</th>
                                                <th>Make</th>
                                                <th>Model</th>
                                                <th>Date</th>
                                                <th>Time</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($leads as $index => $lead)
                                                <tr wire:key="lead-{{ $lead->id }}" class="hover:bg-gray-100">
                                                    <td class="border border-gray-300 px-4 py-2">{{ $index + 1 }}
                                                    </td>
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        {{ $lead->area?->code ?? 'N/A' }}</td>
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        {{ $lead->area?->name ?? 'N/A' }}</td>
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        {{ $lead->member?->account_number ?? 'N/A' }}</td>
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        {{ $lead->member?->business_name ?? 'N/A' }}</td>
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        {{ $lead->member?->nature?->title ?? 'N/A' }}</td>
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        {{ $lead->member?->permanent_distribution_member == 0 ? 'No' : 'Yes' }}
                                                    </td>
                                                    {{-- <td class="border border-gray-300 px-4 py-2">
                    @if ($lead->member?->status == 1)
                        <button type="button"
                            class="btn btn-success btn-sm remove-icon"><span>Active</span></button>
                    @else
                        <button
                        type="button"
                            class="btn btn-danger btn-sm remove-icon"><span>Inactive</span></button>
                    @endif
                </td> --}}
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        {{ $lead->member?->reasonDet?->title ?? 'N/A' }}</td>
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        {{ $lead->lead?->vrm ?? 'N/A' }}</td>
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        {{ $lead->lead?->make ?? 'N/A' }}</td>
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        {{ $lead->lead?->model ?? 'N/A' }}</td>
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        {{ \Carbon\Carbon::parse($lead->created_at)->format(config('GET.admin_date_format')) }}
                                                    </td>
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        {{ \Carbon\Carbon::parse($lead->created_at)->format('H:i:s') }}
                                                    </td>
                                                    <td class="border border-gray-300 px-4 py-2">
                                                        @if ($lead->lead)
                                                            @can('Lead-distribution-panel-view')
                                                                <a
                                                                    href="{{ route('leadDistribution.view', $lead->lead?->id) }}">
                                                                    <button class="btn btn-info btn-sm" title="view"><i
                                                                            class="fas fa-eye"></i></button>
                                                                @endcan
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>


                            </div>

                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <!-- Load jQuery and Select2 before your custom script -->
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- THEN Select2 CSS & JS -->
{{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> --}}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>



  
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Function to initialize Select2
   

    // Handle Laravel Echo for real-time updates (unrelated to Select2 but included for completeness)
    const checkEcho = setInterval(() => {
        if (window.Echo) {
            clearInterval(checkEcho);
            console.log("✅ Echo initialized");

            window.Echo.private('leads')
                .listen('.lead.created', (e) => {
                    console.log("🔄 New Lead Received:", e);
                    Livewire.emit('lead.created');
                })
                .error((error) => {
                    console.error("❌ Echo Error:", error);
                });
        }
    }, 100);

    // Clear interval after 5 seconds if Echo is not initialized
    setTimeout(() => {
        if (!window.Echo) {
            clearInterval(checkEcho);
            console.error("❌ Echo failed to initialize after 5 seconds");
        }
    }, 5000);
});

 document.addEventListener('DOMContentLoaded', function () {
        function initializeSelect2() {
            if ($('#areaspro').hasClass("select2-hidden-accessible")) {
                $('#areaspro').select2('destroy');
            }

            $('#areaspro').select2({
                placeholder: "Select Area(s)",
                allowClear: true,
                width: '100%'
            });

            $('#areaspro').on('change', function (e) {
                let selected = $(this).val();
                @this.set('area', selected);
            });

            // Re-apply selected values after Livewire updates
            let currentValue = @json($area ?? []);
            $('#areaspro').val(currentValue).trigger('change');
        }

        initializeSelect2();

        Livewire.hook('message.processed', (message, component) => {
            initializeSelect2();
        });
    });
</script>