@extends('layouts.app')

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

@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-daygrid-event { font-size: 0.85em; }
    .fc-toolbar-title { font-size: 1.25rem !important; font-weight: 700 !important; color: #1e293b; }
    .fc-button-primary { background-color: #3b82f6 !important; border-color: #3b82f6 !important; }
    .fc-button-primary:hover { background-color: #2563eb !important; border-color: #2563eb !important; }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-9">
            <div class="card p-4">
                <div id='calendar'></div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card p-4 bg-primary text-white border-0 shadow-lg mb-4">
                <h5 class="mb-3"><i class="fas fa-book-open me-2"></i>HR Policy</h5>
                <p class="small mb-4">View and download our latest HR policies and guidelines for {{ $settings->country ?? 'Your Region' }}.</p>
                @if($settings->hr_policy)
                    <a href="{{ asset('storage/' . $settings->hr_policy) }}" target="_blank" class="btn btn-light w-100 py-2 fw-bold text-primary">
                        <i class="fas fa-file-pdf me-2"></i>Download HR Policy
                    </a>
                @else
                    <button class="btn btn-light w-100 py-2 fw-bold text-primary disabled">
                        <i class="fas fa-info-circle me-2"></i>Policy Not Uploaded
                    </button>
                @endif
            </div>
            
            <div class="card p-4">
                <h6 class="fw-bold mb-3">Legend</h6>
                <div class="d-flex align-items-center mb-2">
                    <span class="badge bg-info me-2">&nbsp;&nbsp;</span>
                    <span class="small">Common Holiday</span>
                </div>
                <div class="d-flex align-items-center mb-2">
                    <span class="badge bg-primary me-2">&nbsp;&nbsp;</span>
                    <span class="small">Company Off Day</span>
                </div>
            </div>

            <div class="card p-0 mt-4 overflow-hidden border-0">
                 <div class="bg-light p-4">
                    <h6 class="fw-bold mb-2" style="font-size: 0.9rem;">Business Info</h6>
                    <div class="small text-muted">
                        <i class="fas fa-globe me-2"></i> Region: {{ $settings->country ?? 'Global' }}<br>
                        <i class="fas fa-envelope me-2"></i> {{ $settings->contact_email }}
                    </div>
                 </div>
            </div>
        </div>
    </div>
</div>

<!-- Event Detail Modal -->
<div class="modal fade" id="eventModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-light">
                <h5 class="modal-title fw-bold" id="eventTitle"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="text-muted small d-block">Date</label>
                    <p class="fw-bold mb-0" id="eventDate"></p>
                </div>
                <div class="mb-0">
                    <label class="text-muted small d-block">Description / Reason</label>
                    <p id="eventDescription" class="mb-0"></p>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,dayGridWeek'
        },
        events: "{{ route('holidays.events') }}",
        eventClick: function(info) {
            $('#eventTitle').text(info.event.title);
            $('#eventDate').text(info.event.start.toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
            }));
            $('#eventDescription').text(info.event.extendedProps.description || 'No additional details provided.');
            $('#eventModal').modal('show');
        }
    });
    calendar.render();
});
</script>
@endpush