@extends('layouts.app')

@section('title', 'Pengajuan Izin & Cuti')
@section('page-title', 'Pengajuan Izin, Sakit & Cuti')
@section('page-subtitle', 'Buat permohonan izin atau cuti dan pantau status persetujuan dari HRD/Admin.')

@section('page-actions')
<div class="d-flex justify-content-md-end gap-2 mt-2 mt-md-0">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCreateLeave">
        <i class="bi bi-plus-circle me-1"></i> Buat Pengajuan Baru
    </button>
</div>
@endsection

@section('content')
<div class="row mb-4">
    <div class="col-12 col-md-6 col-lg-4">
        <div class="card shadow-sm border-0 bg-light-primary">
            <div class="card-body p-3 d-flex align-items-center">
                <div class="stats-icon purple me-3"><i class="bi bi-calendar-check"></i></div>
                <div>
                    <h6 class="text-muted text-xs mb-1">SISA KUOTA CUTI TAHUNAN</h6>
                    <h3 class="font-extrabold mb-0 text-primary">{{ $employee->leave_balance }} Hari</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card shadow-sm border-0">
    <div class="card-header bg-white py-3 border-bottom">
        <h5 class="card-title mb-0 fw-bold"><i class="bi bi-clock-history me-2 text-primary"></i> Riwayat Pengajuan Saya</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4">Jenis Permohonan</th>
                        <th>Tanggal Mulai</th>
                        <th>Tanggal Selesai</th>
                        <th>Durasi</th>
                        <th>Alasan</th>
                        <th>Lampiran</th>
                        <th>Status</th>
                        <th class="text-end pe-4">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($leaveRequests as $leave)
                        <tr>
                            <td class="ps-4">
                                <span class="badge bg-light-primary text-primary fw-bold">{{ $leave->type_label }}</span>
                            </td>
                            <td>{{ \Carbon\Carbon::parse($leave->start_date)->translatedFormat('d M Y') }}</td>
                            <td>{{ \Carbon\Carbon::parse($leave->end_date)->translatedFormat('d M Y') }}</td>
                            <td><strong>{{ $leave->total_days }} Hari</strong></td>
                            <td>
                                <span class="d-inline-block text-truncate" style="max-width: 200px;" title="{{ $leave->reason }}">{{ $leave->reason }}</span>
                                @if($leave->rejection_note)
                                    <br><small class="text-danger">Catatan: {{ $leave->rejection_note }}</small>
                                @endif
                            </td>
                            <td>
                                @if($leave->attachment)
                                    <a href="{{ asset('storage/' . $leave->attachment) }}" target="_blank" class="btn btn-sm btn-outline-secondary">
                                        <i class="bi bi-file-earmark-pdf"></i> Dokumen
                                    </a>
                                @else
                                    <span class="text-muted">-</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge {{ $leave->status_badge }}">{{ ucfirst($leave->status) }}</span>
                            </td>
                            <td class="text-end pe-4">
                                @if($leave->status === 'pending')
                                    <form action="{{ route('employee.leave-requests.destroy', $leave->id) }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Batalkan pengajuan ini?')">
                                            <i class="bi bi-trash"></i> Batalkan
                                        </button>
                                    </form>
                                @else
                                    <span class="text-muted text-xs">Selesai</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center py-5 text-muted">
                                Belum ada riwayat pengajuan izin atau cuti.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($leaveRequests->hasPages())
            <div class="p-3 border-top d-flex justify-content-end">
                {{ $leaveRequests->links('pagination::bootstrap-5') }}
            </div>
        @endif
    </div>
</div>

{{-- Modal Create Leave Request --}}
<div class="modal fade" id="modalCreateLeave" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title text-white"><i class="bi bi-envelope-plus me-2"></i> Form Permohonan Izin / Cuti</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('employee.leave-requests.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Jenis Permohonan <span class="text-danger">*</span></label>
                        <select name="type" class="form-select" required>
                            <option value="permit">Izin Keperluan Pribadi/Keluarga</option>
                            <option value="sick">Sakit (Memerlukan Surat Dokter)</option>
                            <option value="leave">Cuti Tahunan (Sisa: {{ $employee->leave_balance }} Hari)</option>
                        </select>
                    </div>
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label fw-bold">Tanggal Mulai <span class="text-danger">*</span></label>
                            <input type="date" name="start_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-bold">Tanggal Selesai <span class="text-danger">*</span></label>
                            <input type="date" name="end_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Alasan / Keterangan Lengkap <span class="text-danger">*</span></label>
                        <textarea name="reason" class="form-control" rows="3" placeholder="Jelaskan alasan permohonan..." required></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Lampiran Dokumen / Surat Dokter (Opsional)</label>
                        <input type="file" name="attachment" class="form-control" accept="image/*,application/pdf">
                        <small class="text-muted">Format: JPG, PNG, PDF (Maks 3MB)</small>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-send me-1"></i> Kirim Permohonan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection