@extends('layouts.teacher.app')

@section('content')
<style>
    .holiday-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        transition: transform 0.2s;
    }
    
    .holiday-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    }
    
    .form-label-custom {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }
    
    .time-select {
        padding: 0.5rem;
        border: 1px solid #ced4da;
        border-radius: 6px;
        font-size: 0.95rem;
    }
    
    .time-select:focus {
        border-color: #0d6efd;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(13,110,253,.25);
    }
    
    .table-custom {
        border-radius: 8px;
        overflow: hidden;
    }
    
    .table-custom thead {
        background-color: #f8f9fa;
    }
    
    .table-custom th {
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6c757d;
        border-bottom: 2px solid #dee2e6;
    }
    
    .badge-custom {
        padding: 0.4rem 0.8rem;
        border-radius: 6px;
        font-weight: 500;
    }
</style>

<div class="pagetitle">
    <h1>Pengurusan Cuti Sekolah</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('teacher.dashboard') }}">Utama</a></li>
            <li class="breadcrumb-item active">Cuti Umum</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <!-- Holiday Setting Form -->
        <div class="col-lg-5 mb-4">
            <div class="card holiday-card">
                <div class="card-body p-4">
                    <h5 class="card-title mb-4">
                        <i class="bi bi-calendar-plus me-2"></i>Tambah Cuti Baru
                    </h5>

                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form action="{{ route('outing.storeholiday') }}" method="POST" id="holidayForm">
                        @csrf
                        
                        <!-- Holiday Type -->
                        <div class="mb-4">
                            <label class="form-label-custom">Jenis Cuti <span class="text-danger">*</span></label>
                            <select class="form-select" name="code" id="code" required>
                                <option value="">Pilih Jenis Cuti</option>
                                @foreach($jenis as $item)
                                    <option value="{{ $item->code }}">{{ $item->jenis }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Description -->
                        <div class="mb-4">
                            <label class="form-label-custom">Keterangan Cuti</label>
                            <input type="text" class="form-control" name="desc" id="desc" 
                                   placeholder="cth. Hari Raya Aidilfitri" required>
                        </div>

                        <!-- Start Date & Time -->
                        <div class="mb-4">
                            <label class="form-label-custom">Tarikh & Masa Mula</label>
                            <div class="row g-2">
                                <div class="col-4">
                                    <select class="form-select time-select" name="start_day" id="start_day" required>
                                        <option value="">Hari</option>
                                    </select>
                                </div>
                                <div class="col-4">
                                    <select class="form-select time-select" name="start_month" id="start_month" required>
                                        <option value="">Bulan</option>
                                    </select>
                                </div>
                                <div class="col-4">
                                    <select class="form-select time-select" name="start_year" id="start_year" required>
                                        <option value="">Tahun</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row g-2 mt-2">
                                <div class="col-6">
                                    <select class="form-select time-select" name="start_hour" id="start_hour" required>
                                        <option value="">Jam</option>
                                    </select>
                                </div>
                                <div class="col-6">
                                    <select class="form-select time-select" name="start_minute" id="start_minute" required>
                                        <option value="">Minit</option>
                                    </select>
                                </div>
                            </div>
                            <input type="hidden" name="mula_cuti_date" id="mula_cuti_date">
                            <input type="hidden" name="mula_cuti_time" id="mula_cuti_time">
                        </div>

                        <!-- End Date & Time -->
                        <div class="mb-4">
                            <label class="form-label-custom">Tarikh & Masa Tamat</label>
                            <div class="row g-2">
                                <div class="col-4">
                                    <select class="form-select time-select" name="end_day" id="end_day" required>
                                        <option value="">Hari</option>
                                    </select>
                                </div>
                                <div class="col-4">
                                    <select class="form-select time-select" name="end_month" id="end_month" required>
                                        <option value="">Bulan</option>
                                    </select>
                                </div>
                                <div class="col-4">
                                    <select class="form-select time-select" name="end_year" id="end_year" required>
                                        <option value="">Tahun</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row g-2 mt-2">
                                <div class="col-6">
                                    <select class="form-select time-select" name="end_hour" id="end_hour" required>
                                        <option value="">Jam</option>
                                    </select>
                                </div>
                                <div class="col-6">
                                    <select class="form-select time-select" name="end_minute" id="end_minute" required>
                                        <option value="">Minit</option>
                                    </select>
                                </div>
                            </div>
                            <input type="hidden" name="tamat_cuti_date" id="tamat_cuti_date">
                            <input type="hidden" name="tamat_cuti_time" id="tamat_cuti_time">
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="bi bi-save me-2"></i>Simpan Cuti
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Holiday List -->
        <div class="col-lg-7">
            <div class="card holiday-card">
                <div class="card-body p-4">
                    <h5 class="card-title mb-4">
                        <i class="bi bi-calendar-event me-2"></i>Senarai Cuti Berdaftar
                    </h5>
                    <div class="table-responsive">
                        <table class="table table-hover table-custom">
                            <thead>
                                <tr>
                                    <th scope="col" style="width: 5%">#</th>
                                    <th scope="col" style="width: 30%">Keterangan</th>
                                    <th scope="col" style="width: 25%">Mula</th>
                                    <th scope="col" style="width: 25%">Tamat</th>
                                    <th scope="col" style="width: 15%">Oleh</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($holidays as $key => $holiday)
                                    <tr>
                                        <td class="text-muted">{{ $key + 1 }}</td>
                                        <td><strong>{{ $holiday->desc }}</strong></td>
                                        <td>
                                            <small class="text-muted">
                                                {{ \Carbon\Carbon::parse($holiday->mula_cuti)->format('d M Y') }}<br>
                                                <span class="badge badge-custom bg-light text-dark">
                                                    {{ \Carbon\Carbon::parse($holiday->mula_cuti)->format('h:i A') }}
                                                </span>
                                            </small>
                                        </td>
                                        <td>
                                            <small class="text-muted">
                                                {{ \Carbon\Carbon::parse($holiday->tamat_cuti)->format('d M Y') }}<br>
                                                <span class="badge badge-custom bg-light text-dark">
                                                    {{ \Carbon\Carbon::parse($holiday->tamat_cuti)->format('h:i A') }}
                                                </span>
                                            </small>
                                        </td>
                                        <td><small class="text-muted">{{ $holiday->created_by }}</small></td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center py-4 text-muted">
                                            <i class="bi bi-calendar-x" style="font-size: 2rem;"></i>
                                            <p class="mt-2 mb-0">Tiada cuti didaftarkan lagi</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Populate dropdowns
    const months = ['January', 'February', 'March', 'April', 'May', 'June', 
                    'July', 'August', 'September', 'October', 'November', 'December'];
    
    // Populate days (1-31)
    for(let i = 1; i <= 31; i++) {
        const day = i.toString().padStart(2, '0');
        document.getElementById('start_day').innerHTML += `<option value="${day}">${day}</option>`;
        document.getElementById('end_day').innerHTML += `<option value="${day}">${day}</option>`;
    }
    
    // Populate months
    months.forEach((month, index) => {
        const monthNum = (index + 1).toString().padStart(2, '0');
        document.getElementById('start_month').innerHTML += `<option value="${monthNum}">${month}</option>`;
        document.getElementById('end_month').innerHTML += `<option value="${monthNum}">${month}</option>`;
    });
    
    // Populate years (current year to +5 years)
    const currentYear = new Date().getFullYear();
    for(let i = currentYear; i <= currentYear + 5; i++) {
        document.getElementById('start_year').innerHTML += `<option value="${i}">${i}</option>`;
        document.getElementById('end_year').innerHTML += `<option value="${i}">${i}</option>`;
    }
    
    // Populate hours (00-23)
    for(let i = 0; i < 24; i++) {
        const hour = i.toString().padStart(2, '0');
        document.getElementById('start_hour').innerHTML += `<option value="${hour}">${hour}</option>`;
        document.getElementById('end_hour').innerHTML += `<option value="${hour}">${hour}</option>`;
    }
    
    // Populate minutes (00, 15, 30, 45)
    ['00', '15', '30', '45'].forEach(min => {
        document.getElementById('start_minute').innerHTML += `<option value="${min}">${min}</option>`;
        document.getElementById('end_minute').innerHTML += `<option value="${min}">${min}</option>`;
    });
    
    // Form submission handler
    document.getElementById('holidayForm').addEventListener('submit', function(e) {
        // Build start date and time
        const startDate = `${document.getElementById('start_year').value}-${document.getElementById('start_month').value}-${document.getElementById('start_day').value}`;
        const startTime = `${document.getElementById('start_hour').value}:${document.getElementById('start_minute').value}`;
        
        // Build end date and time
        const endDate = `${document.getElementById('end_year').value}-${document.getElementById('end_month').value}-${document.getElementById('end_day').value}`;
        const endTime = `${document.getElementById('end_hour').value}:${document.getElementById('end_minute').value}`;
        
        // Set hidden fields
        document.getElementById('mula_cuti_date').value = startDate;
        document.getElementById('mula_cuti_time').value = startTime;
        document.getElementById('tamat_cuti_date').value = endDate;
        document.getElementById('tamat_cuti_time').value = endTime;
    });
});
</script>
@endsection