@extends('layouts.app')

@section('title', 'Holiday Management')

@push('css')
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet' />
<style>
    .fc-event { cursor: pointer; border: none !important; padding: 2px 4px; border-radius: 4px; }
    .fc-day-future:hover { background-color: #f8fafc; cursor: pointer; }
    #calendar { min-height: 500px; }
    .holiday-list-card { max-height: 600px; overflow-y: auto; }
</style>
@endpush

@section('panel-actions')
    @if(auth()->user()->canAccess('holidays.manage'))
    <button type="button" class="btn btn-primary btn-sm px-3 shadow-sm" data-toggle="modal" data-target="#addHolidayModal">
        <i class="fas fa-plus mr-1"></i> Add Holiday
    </button>
    @endif
@endsection

@section('content')
<div class="row">
    <div class="col-lg-8">
        <div class="card card-outline card-primary shadow-sm">
            <div class="card-header">
                <h3 class="card-title font-weight-bold"><i class="fas fa-calendar-alt mr-2 text-primary"></i>Interactive Holiday Calendar</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
                </div>
            </div>
            <div class="card-body p-3">
                <div id='calendar'></div>
                <div class="mt-3">
                    <span class="badge badge-info mr-2">Common Holiday</span>
                    <span class="badge badge-warning mr-2">Company Off</span>
                    <span class="badge badge-secondary">Other</span>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card card-outline card-success shadow-sm">
            <div class="card-header">
                <h3 class="card-title font-weight-bold"><i class="fas fa-list mr-2 text-success"></i>Upcoming Holidays</h3>
            </div>
            <div class="card-body p-0 holiday-list-card">
                <div class="table-responsive">
                    <table class="table table-hover table-valign-middle mb-0" id="holidaysTable">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Holiday Name</th>
                                <th class="text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Loaded via DataTable -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="info-box bg-light border shadow-none">
            <span class="info-box-icon"><i class="fas fa-info-circle text-info"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Quick Tip</span>
                <span class="info-box-number small text-muted font-weight-normal">Click on any date in the calendar to quickly add a new holiday.</span>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modals')
<div class="modal fade" id="addHolidayModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary py-2">
                <h5 class="modal-title font-weight-bold text-white">Holiday Details</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="addHolidayForm">
                @csrf
                <div class="modal-body p-4">
                    <div class="form-group">
                        <label class="font-weight-bold">Event Name</label>
                        <input type="text" name="name" class="form-control" required placeholder="e.g., Diwali, Annual Day">
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font-weight-bold">Date</label>
                                <input type="date" name="date" id="holiday_date" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="font-weight-bold">Type</label>
                                <select name="type" class="form-control" required>
                                    <option value="common">Common Holiday</option>
                                    <option value="fixed">Company Off Day</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-0">
                        <label class="font-weight-bold">Description</label>
                        <textarea name="description" class="form-control" rows="3" placeholder="Additional details..."></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light p-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-sm px-4">Save Holiday</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
<script>
$(function() {
    var table = $('#holidaysTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('holidays.data') }}",
        columns: [
            {data: 'date', name: 'date', render: function(data){ return '<strong>'+data+'</strong>'; }},
            {data: 'name', name: 'name'},
            {data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-right'}
        ],
        order: [[0, 'asc']],
        paging: false,
        info: false,
        searching: false,
        language: { emptyTable: "No holidays scheduled" }
    });

    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        themeSystem: 'bootstrap',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,dayGridWeek'
        },
        events: "{{ route('holidays.events') }}",
        dateClick: function(info) {
            $('#holiday_date').val(info.dateStr);
            $('#addHolidayModal').modal('show');
        },
        eventClick: function(info) {
            Swal.fire({
                title: info.event.title,
                text: info.event.extendedProps.description || 'No description provided.',
                icon: 'info'
            });
        }
    });
    calendar.render();

    $('#addHolidayForm').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            url: "{{ route('holidays.store') }}",
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                $('#addHolidayModal').modal('hide');
                $('#addHolidayForm')[0].reset();
                table.draw();
                calendar.refetchEvents();
                Swal.fire({ icon: 'success', title: 'Success', text: response.success, toast: true, position: 'top-end', showConfirmButton: false, timer: 3000 });
            }
        });
    });

    $('body').on('click', '.delete-holiday', function() {
        var id = $(this).data('id');
        Swal.fire({
            title: 'Delete holiday?',
            text: "This will remove it from calendar.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Yes, delete!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ url('holidays') }}/" + id,
                    type: 'DELETE',
                    data: { _token: "{{ csrf_token() }}" },
                    success: function() { 
                        table.draw(); 
                        calendar.refetchEvents();
                        Swal.fire({ icon: 'success', title: 'Deleted!', toast: true, position: 'top-end', showConfirmButton: false, timer: 2000 });
                    }
                });
            }
        });
    });
});
</script>
@endpush