@extends('adminlte::page')

@section('title', 'Calendar')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="mb-0">Calendar</h1>
        <div>
            <a href="{{ route('court-dates.index') }}" class="btn btn-sm btn-outline-primary"><i class="fas fa-gavel mr-1"></i>Court Dates</a>
            <a href="{{ route('tasks.index') }}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-tasks mr-1"></i>Tasks</a>
        </div>
    </div>
@endsection

@section('content')
<div class="row mb-3">
    <div class="col-md-3">
        <label for="filter_case" class="small text-muted mb-1">Case</label>
        <select id="filter_case" class="form-control select2">
            <option value="">All Cases</option>
            @foreach($cases as $c)
                <option value="{{ $c->id }}">{{ $c->case_number }} — {{ $c->title }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-3">
        <label for="filter_lawyer" class="small text-muted mb-1">Lawyer</label>
        <select id="filter_lawyer" class="form-control select2">
            <option value="">All Lawyers</option>
            @foreach($lawyers as $u)
                <option value="{{ $u->id }}">{{ $u->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-6">
        <label class="small text-muted mb-1 d-block">Types</label>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="type_court" value="court" checked>
            <label class="form-check-label" for="type_court">Court Dates</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="type_tasks" value="tasks" checked>
            <label class="form-check-label" for="type_tasks">Tasks</label>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <div id="calendar"></div>
    </div>
</div>
@endsection

@push('css')
<style>
    .fc .ev-conflict { box-shadow: inset 0 0 0 2px #d9534f; }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/index.global.min.css" />
@endpush

@push('js')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.14/index.global.min.js"></script>
<script>
(function(){
    const el = document.getElementById('calendar');
    const caseSel = document.getElementById('filter_case');
    const lawyerSel = document.getElementById('filter_lawyer');
    const typeCourt = document.getElementById('type_court');
    const typeTasks = document.getElementById('type_tasks');

    // Initialize Select2 if available
    if (window.jQuery && jQuery().select2) {
        jQuery('#filter_case').select2();
        jQuery('#filter_lawyer').select2();
    }

    function getTypes(){
        const t = [];
        if (typeCourt.checked) t.push('court');
        if (typeTasks.checked) t.push('tasks');
        return t;
    }

    function buildExtraParams(){
        const p = {};
        if (caseSel.value) p.case_id = caseSel.value;
        if (lawyerSel.value) p.lawyer_id = lawyerSel.value;
        const types = getTypes();
        if (types.length) p.types = types;
        return p;
    }

    const calendar = new FullCalendar.Calendar(el, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        height: 'auto',
        nowIndicator: true,
        navLinks: true,
        selectable: false,
        eventTimeFormat: { hour: '2-digit', minute: '2-digit', meridiem: false },
        events: function(info, success, failure){
            const params = new URLSearchParams({
                start: info.startStr,
                end: info.endStr,
            });
            const extra = buildExtraParams();
            Object.keys(extra).forEach(k => {
                const v = extra[k];
                if (Array.isArray(v)) {
                    v.forEach(val => params.append(k+'[]', val));
                } else if (v !== undefined && v !== null && v !== '') {
                    params.append(k, v);
                }
            });
            fetch(`/calendar/events?${params.toString()}`, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(r => r.json())
            .then(data => success(Array.isArray(data) ? data : (data.events || [])))
            .catch(err => failure(err));
        },
        eventClick: function(info){
            if (info.event.url) {
                info.jsEvent.preventDefault();
                window.location.href = info.event.url;
            }
        }
    });

    calendar.render();

    function refetch(){ calendar.refetchEvents(); }
    caseSel.addEventListener('change', refetch);
    lawyerSel.addEventListener('change', refetch);
    typeCourt.addEventListener('change', refetch);
    typeTasks.addEventListener('change', refetch);
})();
</script>
@endpush