@extends('layouts.tab')
@section('planner_content')
    <div class="container mt-4">

        @if (auth()->user()->user_type == 1)
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="mb-0">Company Targets</h4>
                <button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#plannerCanvas">Create
                    Targets</button>
            </div>
        @endif

        <!-- Success Message -->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Planner Cards -->
        <div class="row">
            <div class="col-md-12">
                <div class="alert-info p-25 mb-4">
                    <div class="row g-3">

                        {{-- Province --}}
                        <div class="col-md-4">
                            <label class="form-label">Filter by Province</label>
                            <select id="provinceFilter" class="form-control">
                                <option value="">All Provinces</option>
                                @foreach ($allplaces->pluck('area.province')->unique('id') as $province)
                                    @if ($province)
                                        <option value="{{ $province->id }}">{{ $province->name }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>

                        {{-- Area --}}
                        <div class="col-md-4">
                            <label class="form-label">Filter by Area</label>
                            <select id="areaFilter" class="form-control">
                                <option value="">All Areas</option>
                            </select>
                        </div>

                        {{-- Location / Place --}}
                        <div class="col-md-4">
                            <label class="form-label">Filter by Location</label>
                            <select id="locationFilter" class="form-control">
                                <option value="">All Locations</option>
                            </select>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            @foreach ($planners as $planner)
                @php $assignedUsers = explode(',', $planner->assigned_to); @endphp

                <!-- Unified Planner Wrapper -->
                <div class="planner-wrapper row mb-4" data-province-id="{{ $planner->province_id ?? '' }}"
                    data-area-id="{{ $planner->area_id ?? '' }}" data-location-id="{{ $planner->location ?? '' }}">

                    <!-- Planner Card -->
                    <div class="col-xl-4 col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                @php
                                    $planPeriod = str_replace(' - ', ' to ', $planner->plan_period);
                                    $dates = explode(' to ', $planPeriod);
                                @endphp

                                <h5 class="card-title m-0 me-2 text-capitalize">
                                    {{ $planner->planner_type }} -
                                    {{ \Carbon\Carbon::parse(trim($dates[0]))->format('d-m-Y') }} to
                                    {{ \Carbon\Carbon::parse(trim($dates[1]))->format('d-m-Y') }}
                                </h5>

                                <!-- Assign Users Button -->
                                <button class="btn btn-sm btn-outline-primary assign-btn me-2" data-bs-toggle="modal"
                                    data-bs-target="#assignModal" data-planner-id="{{ $planner->id }}"
                                    data-assigned-users="{{ $planner->assigned_to }}">
                                    <span class="mdi mdi-account-group-outline"></span>
                                </button>

                                <!-- Edit Planner Button -->
                                <button class="btn btn-sm btn-outline-secondary edit-btn" data-bs-toggle="offcanvas"
                                    data-bs-target="#editPlannerCanvas" data-planner='@json($planner)'>
                                    <span class="mdi mdi-note-edit-outline"></span>
                                </button>
                            </div>
                            <div class="card-body">
                                <div class="mb-4">
                                    <h3 class="mb-0">₹{{ number_format($planner->target_amount, 2) }}</h3>
                                    <p class="mb-0">Target for this period</p>
                                    <h6 class="mt-3">
                                        <span class="mdi mdi-map-marker-outline"></span>
                                        @if ($planner->location)
                                            {{ $planner->places->location }}
                                            @if ($planner->area_id)
                                                , {{ $planner->area->name }}
                                            @endif
                                            @if ($planner->province_id)
                                                , {{ $planner->province->name }}
                                            @endif
                                        @elseif($planner->area_id)
                                            {{ $planner->area->name }}
                                            @if ($planner->province_id)
                                                , {{ $planner->province->name }}
                                            @endif
                                        @elseif($planner->province_id)
                                            {{ $planner->province->name }}
                                        @else
                                            N/A
                                        @endif
                                    </h6>

                                </div>
                                <ul class="p-0 m-0 list-unstyled">
                                    @foreach ($planner->targets as $target)
                                        <li class="d-flex mb-3 align-items-center">
                                            <div class="avatar flex-shrink-0 bg-lightest rounded me-3">
                                                <img src="{{ asset('assets/img/icons/unicons/chart.png') }}"
                                                    alt="{{ $target->status->name }}">
                                            </div>
                                            <div class="d-flex w-100 justify-content-between align-items-center">
                                                <h6 class="mb-0">{{ $target->status->name }}</h6>
                                                <span
                                                    class="bg-label-secondary rounded-pill">{{ $target->target_count }}</span>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                                <ul class="list-unstyled d-flex align-items-center avatar-group mb-0">
                                    @foreach ($planner->assignedUsers as $user)
                                        <li class="avatar avatar-sm pull-up" data-bs-toggle="tooltip"
                                            data-bs-placement="bottom" title="{{ $user->name }}">
                                            <a href="#"><img class="rounded-circle"
                                                    src="{{ asset('storage/' . $user->profile_image) }}"
                                                    alt="{{ $user->name }}"></a>
                                        </li>
                                    @endforeach
                                    <a href="{{ url('/company-planners/details/' . $planner->id) }}"
                                        class="text-end ms-2">View Details</a>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Breakdown -->
                    <div class="col-md-8">
                        <div class="planner-card mb-3">
                            <h6>{{ $planner->title ?? $planner->plan_period }}</h6>

                            @if ($planner->planner_type == 'year')
                                <h4>Yearly Plan Bifurcation</h4>
                                <div class="breakdown-cards row">
                                    @foreach ($planner->breakdowns as $breakdown)
                                        <div class="col-md-4">
                                            <div class="card mb-4">
                                                <div class="card-body">
                                                    <h5 class="card-title">{{ ucfirst($breakdown->breakdown_type) }} Target
                                                    </h5>
                                                    <p>Target: ₹{{ number_format($breakdown->target_amount, 2) }}</p>
                                                    <p>Achieved: ₹{{ number_format($breakdown->achieved_amount, 2) }}</p>
                                                    @php
                                                        $divisor = match (strtolower($breakdown->breakdown_type)) {
                                                            'monthly' => 12,
                                                            'quarterly' => 4,
                                                            'half_yearly' => 2,
                                                            'weekly' => 52,
                                                            'daily' => 365,
                                                            default => 1,
                                                        };
                                                    @endphp
                                                    <ul class="p-0 m-0 list-unstyled">
                                                        @foreach ($planner->targets as $target)
                                                            <li class="d-flex mb-3 align-items-center">
                                                                <div
                                                                    class="d-flex w-100 justify-content-between align-items-center">
                                                                    <h6 class="mb-0">{{ $target->status->name }}</h6>
                                                                    <span
                                                                        class="bg-label-primary rounded-pill">{{ number_format($target->target_count / $divisor) }}</span>
                                                                </div>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                    <div class="col-md-4">
                                        <div class="card mb-4">
                                            <div class="card-body">
                                                <h5 class="card-title">Session Target</h5>
                                                <p class="text-muted"><small>Morning Session: 4 hrs (9 AM – 1 PM)</small>
                                                </p>
                                                <p class="text-muted"><small>Afternoon Session: 4 hrs (2 PM – 6 PM)</small>
                                                </p>
                                                @php $sessionDivisor = 730; @endphp
                                                <ul class="p-0 m-0 list-unstyled">
                                                    @foreach ($planner->targets as $target)
                                                        <li class="d-flex mb-3 align-items-center">
                                                            <div
                                                                class="d-flex w-100 justify-content-between align-items-center">
                                                                <h6 class="mb-0">{{ $target->status->name }}</h6>
                                                                <span
                                                                    class="bg-label-primary rounded-pill">{{ number_format($target->target_count / $sessionDivisor) }}</span>
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach

            <!-- Script -->
            <script>
                document.getElementById('locationFilter').addEventListener('change', function() {
                    const selectedLocation = this.value;

                    document.querySelectorAll('.planner-wrapper').forEach(function(wrapper) {
                        const wrapperLocation = wrapper.getAttribute('data-location-id');
                        wrapper.style.display = (selectedLocation === "" || wrapperLocation === selectedLocation) ?
                            'flex' : 'none';
                    });
                });
            </script>
        </div>

        <!-- Create Planner Offcanvas -->
        <!-- Include Create Planner Offcanvas -->

        <div class="offcanvas offcanvas-end w-35" tabindex="-1" id="plannerCanvas" aria-labelledby="plannerCanvasLabel">
            <div class="offcanvas-header">
                <h5 id="plannerCanvasLabel">Create Planner</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
            </div>

            <div class="offcanvas-body">
                <form action="{{ route('company-planners.store') }}" method="POST">
                    @csrf

                    {{-- Planner Type --}}
                    <div class="mb-3">
                        <label class="form-label">Planner Type</label>
                        <select name="planner_type" class="form-control" required>
                            <option value="">Select Type</option>
                            <option value="month">Month</option>
                            <option value="year">Year</option>
                            <option value="week">Week</option>
                            <option value="hyearly">Half Yearly</option>
                            <option value="qyearly">Quarter Yearly</option>
                        </select>
                    </div>

                    {{-- Plan Period --}}
  <div class="mb-3">
    <label for="dateRange" class="form-label">Plan Period</label>
    <input type="text" id="dateRange" name="plan_period" class="form-control" placeholder="YYYY-MM-DD - YYYY-MM-DD">
</div>

<script>
$(function() {
    $('#dateRange').daterangepicker({
        locale: { format: 'YYYY-MM-DD' },
        opens: 'left',
        autoUpdateInput: true, // picker updates input
    });
});
</script>




                    {{-- Target Amount --}}
                    <div class="mb-3">
                        <label class="form-label">Target Amount</label>
                        <input type="number" step="0.01" name="target_amount" class="form-control">
                    </div>

                    {{-- Industries --}}
                    <div class="mb-3">
                        <label class="form-label">Industries</label>
                        <div class="row">
                            @foreach ($industries as $industry)
                                <div class="col-md-6">
                                    <div class="form-check">
                                        <input type="checkbox" name="industries[]" value="{{ $industry->id }}"
                                            class="form-check-input">
                                        <label class="form-check-label">{{ $industry->page_name }}</label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Solutions --}}
                    <div class="mb-3">
                        <label class="form-label">Solutions</label>
                        <div class="row">
                            @foreach ($solutions as $solution)
                                <div class="col-md-6">
                                    <div class="form-check">
                                        <input type="checkbox" name="solutions[]" value="{{ $solution->id }}"
                                            class="form-check-input">
                                        <label class="form-check-label">{{ $solution->page_name }}</label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- Channels --}}
                    <div class="mb-3">
                        <label class="form-label">Channels</label>
                        <div class="card form-control">
                            <div class="card-body p-0">
                                @foreach ($channel_categories as $category)
                                    <strong>{{ $category->name }}</strong>
                                    <div class="mt-3 mb-4">
                                        @foreach ($category->channels as $channel)
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" name="channel[]"
                                                    value="{{ $channel->id }}">
                                                <label class="form-check-label">{{ $channel->name }}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    {{-- ===============================
                LOCATION HIERARCHY
            =============================== --}}

                    {{-- ===============================
    LOCATION HIERARCHY
=============================== --}}

                    {{-- Province --}}
                    <div class="mb-3">
                        <label class="form-label">Province</label>
                        <select id="createProvince" name="province_id" class="form-control">
                            <option value="">-- Select Province --</option>
                            @foreach ($allplaces->pluck('area.province')->unique('id') as $province)
                                @if ($province)
                                    <option value="{{ $province->id }}">{{ $province->name }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    {{-- Area --}}
                    <div class="mb-3">
                        <label class="form-label">Area</label>
                        <select id="createArea" name="area_id" class="form-control" disabled>
                            <option value="">-- Select Area --</option>
                        </select>
                    </div>

                    {{-- Location --}}
                    <div class="mb-3">
                        <label class="form-label">Location</label>
                        <select name="location" id="createLocation" class="form-control" disabled>
                            <option value="">-- Select Location --</option>
                        </select>
                    </div>


                    {{-- Target Per Status --}}
                    <div class="mb-4">
                        <h6>Target Per Status</h6>
                        <div class="row">
                            @foreach ($statuses as $status)
                                <div class="col-md-6">
                                    <label>{{ $status->name }}</label>
                                    <input type="number" name="targets[{{ $status->id }}]" value="0"
                                        class="form-control">
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <button type="submit" class="btn btn-success w-100">Save Planner</button>
                </form>
            </div>
        </div>


        <!-- Include Edit Planner Offcanvas -->
        <!-- Include Edit Planner Offcanvas -->
        <div class="offcanvas offcanvas-end w-35" tabindex="-1" id="editPlannerCanvas"
            aria-labelledby="editPlannerCanvasLabel">
            <div class="offcanvas-header">
                <h5 id="editPlannerCanvasLabel">Edit Planner</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
            </div>
            <div class="offcanvas-body">
                <form method="POST" id="editPlannerForm" action="">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="planner_id" id="editPlannerId">

                    <div class="mb-3">
                        <label class="form-label">Planner Type:</label>
                        <select name="planner_type" id="editPlannerType" class="form-control" required>
                            <option value="">Select Type</option>
                            <option value="month">Month</option>
                            <option value="year">Year</option>
                            <option value="week">Week</option>
                            <option value="hyearly">Half Yearly</option>
                            <option value="qyearly">Quarter Yearly</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Plan Period:</label>
                        <input type="text" name="plan_period" id="editPlanPeriod" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Target Amount:</label>
                        <input type="number" name="target_amount" id="editTargetAmount" step="0.01"
                            class="form-control">
                    </div>

                    {{-- Province --}}
                    <div class="mb-3">
                        <label class="form-label">Province</label>
                        <select id="editProvince" name="province_id" class="form-control">
                            <option value="">-- Select Province --</option>
                            @foreach ($allplaces->pluck('area.province')->unique('id') as $province)
                                @if ($province)
                                    <option value="{{ $province->id }}">{{ $province->name }}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>

                    {{-- Area --}}
                    <div class="mb-3">
                        <label class="form-label">Area</label>
                        <select id="editArea" name="area_id" class="form-control" disabled>
                            <option value="">-- Select Area --</option>
                        </select>
                    </div>

                    {{-- Location --}}
                    <div class="mb-3">
                        <label class="form-label">Location</label>
                        <select name="location" id="editLocation" class="form-control" disabled>
                            <option value="">-- Select Location --</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Industries:</label>
                        <div class="row">
                            @foreach ($industries as $industry)
                                <div class="col-md-6">
                                    <div class="form-check">
                                        <input type="checkbox" name="industries[]" value="{{ $industry->id }}"
                                            class="form-check-input edit-industry"
                                            id="edit_industry_{{ $industry->id }}">
                                        <label class="form-check-label"
                                            for="edit_industry_{{ $industry->id }}">{{ $industry->page_name }}</label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Solutions:</label>
                        <div class="row">
                            @foreach ($solutions as $solution)
                                <div class="col-md-6">
                                    <div class="form-check">
                                        <input type="checkbox" name="solutions[]" value="{{ $solution->id }}"
                                            class="form-check-input edit-solution"
                                            id="edit_solution_{{ $solution->id }}">
                                        <label class="form-check-label"
                                            for="edit_solution_{{ $solution->id }}">{{ $solution->page_name }}</label>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Channels</label>
                        <div class="card form-control">
                            <div class="card-body p-0">
                                @foreach ($channel_categories as $category)
                                    <strong>{{ $category->name }}</strong>
                                    <div class="mt-4 mb-4">
                                        @foreach ($category->channels as $channel)
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" name="channel[]"
                                                    value="{{ $channel->id }}" id="edit_channel_{{ $channel->id }}"
                                                    @if (!empty(old('channel')) && in_array($channel->id, old('channel'))) checked @endif>
                                                <label class="form-check-label" for="edit_channel_{{ $channel->id }}">
                                                    {{ $channel->name }}
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-success w-100">Update Planner</button>
                </form>
            </div>
        </div>

        <!-- Assign Users Modal -->
        <div class="modal fade" id="assignModal" tabindex="-1" aria-labelledby="assignModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form method="POST" action="{{ route('company-planners.assign') }}">
                    @csrf
                    <input type="hidden" name="planner_id" id="assignPlannerId">

                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Assign Users</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body">
                            @foreach ($users as $user)
                                <div class="form-check">
                                    <input type="checkbox" name="assigned_to[]" value="{{ $user->id }}"
                                        class="form-check-input" id="user_{{ $user->id }}">
                                    <label class="form-check-label"
                                        for="user_{{ $user->id }}">{{ $user->name }}</label>
                                </div>
                            @endforeach
                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Assign</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>

    <!-- Scripts -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const allPlaces = @json($allplaces);

            // ------------------ Assign Users Modal ------------------
            const assignModal = document.getElementById('assignModal');
            if (assignModal) {
                assignModal.addEventListener('show.bs.modal', function(event) {
                    const button = event.relatedTarget;
                    const plannerId = button.dataset.plannerId;
                    const assignedUsers = button.dataset.assignedUsers?.split(',') || [];

                    document.getElementById('assignPlannerId').value = plannerId;

                    document.querySelectorAll('#assignModal input[name="assigned_to[]"]').forEach(cb => {
                        cb.checked = assignedUsers.includes(cb.value);
                    });
                });
            }

            // ------------------ Helper Functions ------------------
            function populateAreas(provinceId, areaSelect, locationSelect, selectedAreaId = null) {
                areaSelect.innerHTML = '<option value="">-- Select Area --</option>';
                locationSelect.innerHTML = '<option value="">-- Select Location --</option>';
                areaSelect.disabled = true;
                locationSelect.disabled = true;
                if (!provinceId) return;

                const areas = {};
                allPlaces.forEach(p => {
                    if (p.area && p.area.province_id == provinceId) areas[p.area.id] = p.area.name;
                });

                Object.entries(areas).forEach(([id, name]) => {
                    const option = document.createElement('option');
                    option.value = id;
                    option.text = name;
                    if (selectedAreaId && selectedAreaId == id) option.selected = true;
                    areaSelect.appendChild(option);
                });

                if (Object.keys(areas).length) areaSelect.disabled = false;
            }

            function populateLocations(areaId, locationSelect, selectedLocationId = null) {
                locationSelect.innerHTML = '<option value="">-- Select Location --</option>';
                locationSelect.disabled = true;
                if (!areaId) return;

                allPlaces.forEach(p => {
                    if (p.area_id == areaId) {
                        const option = document.createElement('option');
                        option.value = p.id;
                        option.text = p.location;
                        if (selectedLocationId && selectedLocationId == p.id) option.selected = true;
                        locationSelect.appendChild(option);
                    }
                });

                locationSelect.disabled = false;
            }

            function preselectCheckboxes(containerSelector, idsString, prefix) {
                document.querySelectorAll(containerSelector).forEach(cb => cb.checked = false);
                if (!idsString) return;
                idsString.split(',').forEach(id => {
                    const el = document.getElementById(`${prefix}_${id.trim()}`);
                    if (el) el.checked = true;
                });
            }

            // ------------------ Edit Planner ------------------
            document.querySelectorAll('.edit-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const planner = JSON.parse(this.dataset.planner);
                    const form = document.getElementById('editPlannerForm');
                    form.action = `/company-planners/${planner.id}`;

                    document.getElementById('editPlannerId').value = planner.id;
                    document.getElementById('editPlannerType').value = planner.planner_type;
                    document.getElementById('editPlanPeriod').value = planner.plan_period;
                    document.getElementById('editTargetAmount').value = planner.target_amount ?? '';

                    const provinceSelect = document.getElementById('editProvince');
                    const areaSelect = document.getElementById('editArea');
                    const locationSelect = document.getElementById('editLocation');

                    provinceSelect.value = planner.province_id;
                    populateAreas(planner.province_id, areaSelect, locationSelect, planner.area_id);
                    if (planner.area_id) populateLocations(planner.area_id, locationSelect, planner
                        .location);

                    // Preselect Industries / Solutions / Channels
                    preselectCheckboxes('input.edit-industry', planner.industry, 'edit_industry');
                    preselectCheckboxes('input.edit-solution', planner.solutions, 'edit_solutions');
                    preselectCheckboxes('input.edit-channel', planner.channel, 'edit_channel');
                });
            });

            // ------------------ Dynamic Selects ------------------
            function setupDynamicSelects(provinceIdSelector, areaIdSelector, locationIdSelector) {
                const provinceSelect = document.getElementById(provinceIdSelector);
                const areaSelect = document.getElementById(areaIdSelector);
                const locationSelect = document.getElementById(locationIdSelector);

                provinceSelect.addEventListener('change', function() {
                    populateAreas(this.value, areaSelect, locationSelect);
                });

                areaSelect.addEventListener('change', function() {
                    populateLocations(this.value, locationSelect);
                });
            }

            // Apply dynamic selects for both Create and Edit forms
            setupDynamicSelects('createProvince', 'createArea', 'createLocation');
            setupDynamicSelects('editProvince', 'editArea', 'editLocation');

            // ------------------ Filters (Optional) ------------------
            const provinceFilter = document.getElementById('provinceFilter');
            const areaFilter = document.getElementById('areaFilter');
            const locationFilter = document.getElementById('locationFilter');

            function filterPlanners() {
                const selectedProvince = provinceFilter.value;
                const selectedArea = areaFilter.value;
                const selectedLocation = locationFilter.value;

                document.querySelectorAll('.planner-wrapper').forEach(wrapper => {
                    const provinceId = wrapper.getAttribute('data-province-id') || '';
                    const areaId = wrapper.getAttribute('data-area-id') || '';
                    const locationId = wrapper.getAttribute('data-location-id') || '';

                    // Show card if it matches ALL selected filters
                    const matchProvince = !selectedProvince || provinceId === selectedProvince;
                    const matchArea = !selectedArea || areaId === selectedArea;
                    const matchLocation = !selectedLocation || locationId === selectedLocation;

                    wrapper.style.display = (matchProvince && matchArea && matchLocation) ? 'flex' : 'none';
                });
            }

            // Event listeners
            provinceFilter.addEventListener('change', function() {
                // Populate Area dropdown based on Province
                areaFilter.innerHTML = '<option value="">All Areas</option>';
                locationFilter.innerHTML = '<option value="">All Locations</option>';

                if (this.value) {
                    const areas = {};
                    allPlaces.forEach(p => {
                        if (p.area && p.area.province_id == this.value) {
                            areas[p.area.id] = p.area.name;
                        }
                    });
                    Object.entries(areas).forEach(([id, name]) => {
                        areaFilter.innerHTML += `<option value="${id}">${name}</option>`;
                    });
                }
                filterPlanners();
            });

            areaFilter.addEventListener('change', function() {
                locationFilter.innerHTML = '<option value="">All Locations</option>';

                if (this.value) {
                    allPlaces.forEach(p => {
                        if (p.area_id == this.value) {
                            locationFilter.innerHTML +=
                                `<option value="${p.id}">${p.location}</option>`;
                        }
                    });
                }
                filterPlanners();
            });

            locationFilter.addEventListener('change', filterPlanners);


            // ------------------ Datepicker ------------------


        });
    </script>

    <!-- Include Edit Planner Offcanvas -->
    <style>
        .select2-container {
            z-index: 99999 !important;
        }

        .select2-container--default .select2-selection--single {
            height: 38px;
            border-radius: 6px;
        }

        .select2-container .select2-selection--single {
            height: 50px !important;
        }
    </style>
@endsection