@extends('layouts.app')

@section('title', 'My Leave Requests | Institution Axis')

@section('sidebar-menu')
    {{-- Teacher sidebar partial if it exists --}}
    @includeIf('teacher.partials.sidebar')
@endsection

@section('breadcrumb')
    <span><a href="{{ route('teacher.dashboard') }}">Home</a></span> /
    <span class="active-page">My Leave Requests</span>
@endsection

@section('navbar-right')
    <div class="notification-icon"><i class="fas fa-bell"></i><span class="badge-notify"></span></div>
    <div class="profile-dropdown dropdown">
        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
            <img src="https://ui-avatars.com/api/?background=4f46e5&color=fff&name={{ urlencode(auth()->user()->name) }}" class="avatar-sm">
            <span>{{ auth()->user()->name }}</span>
            <i class="fas fa-chevron-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item text-danger" href="{{ route('logout') }}">Logout</a></li>
        </ul>
    </div>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0"><i class="fas fa-plane-departure me-2 text-primary"></i>My Leave Requests</h4>
        <small class="text-muted">View and track all your leave applications</small>
    </div>
    <button class="btn btn-primary rounded-pill px-3" data-bs-toggle="modal" data-bs-target="#leaveModal">
        <i class="fas fa-plus me-1"></i>New Request
    </button>
</div>

@foreach(['success','error'] as $msg)
    @if(session($msg))
    <div class="alert alert-{{ $msg === 'error' ? 'danger' : 'success' }} alert-dismissible fade show">
        {{ session($msg) }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif
@endforeach

@if(!$hasProfile)
<div class="alert alert-warning rounded-4">
    <i class="fas fa-exclamation-triangle me-2"></i>
    Your staff profile hasn't been created yet. Please contact your School Administrator to set it up before submitting leave requests.
</div>
@endif

<div class="card shadow-sm border-0 rounded-4">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
                <thead class="table-light">
                    <tr><th>#</th><th>Leave Type</th><th>From</th><th>To</th><th>Days</th><th>Status</th><th>Admin Notes</th><th>Submitted</th></tr>
                </thead>
                <tbody>
                    @forelse($leaves as $leave)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td><span class="badge bg-light text-dark border">{{ $leave->leave_type_label }}</span></td>
                        <td>{{ $leave->start_date->format('d M Y') }}</td>
                        <td>{{ $leave->end_date->format('d M Y') }}</td>
                        <td class="text-center"><span class="badge bg-secondary">{{ $leave->days_requested }}d</span></td>
                        <td><span class="badge {{ $leave->status_badge }}">{{ ucfirst($leave->status) }}</span></td>
                        <td><small class="text-muted">{{ $leave->admin_notes ?? '—' }}</small></td>
                        <td><small class="text-muted">{{ $leave->created_at->format('d M Y') }}</small></td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center text-muted py-5">
                            <i class="fas fa-inbox fa-2x mb-2 d-block"></i>
                            No leave requests submitted yet.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($leaves->hasPages())
    <div class="card-footer bg-white">{{ $leaves->links() }}</div>
    @endif
</div>

{{-- Leave Request Modal --}}
<div class="modal fade" id="leaveModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header border-0">
                <h5 class="modal-title fw-bold"><i class="fas fa-plane-departure me-2 text-primary"></i>New Leave Request</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('teacher.leaves.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Leave Type <span class="text-danger">*</span></label>
                            <select name="leave_type" class="form-select @error('leave_type') is-invalid @enderror" required>
                                <option value="">— Select type —</option>
                                @foreach(['sick','annual','maternity','paternity','emergency','other'] as $t)
                                <option value="{{ $t }}" {{ old('leave_type') === $t ? 'selected' : '' }}>{{ ucfirst($t) }}</option>
                                @endforeach
                            </select>
                            @error('leave_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Start Date <span class="text-danger">*</span></label>
                            <input type="date" name="start_date" class="form-control @error('start_date') is-invalid @enderror"
                                   value="{{ old('start_date') }}" required min="{{ now()->toDateString() }}">
                            @error('start_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">End Date <span class="text-danger">*</span></label>
                            <input type="date" name="end_date" class="form-control @error('end_date') is-invalid @enderror"
                                   value="{{ old('end_date') }}" required min="{{ now()->toDateString() }}">
                            @error('end_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Reason <span class="text-danger">*</span></label>
                            <textarea name="reason" class="form-control @error('reason') is-invalid @enderror"
                                      rows="4" required placeholder="Please describe the reason for your leave request...">{{ old('reason') }}</textarea>
                            @error('reason')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    <div class="alert alert-info mt-3 rounded-3 small">
                        <i class="fas fa-info-circle me-2"></i>
                        Your request will be submitted to the School Admin for review. You'll be notified of the decision.
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary px-5 rounded-pill">
                        <i class="fas fa-paper-plane me-2"></i>Submit Request
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('custom-scripts')
<script>
// Re-open modal with errors if validation fails
@if($errors->any())
document.addEventListener('DOMContentLoaded', () => {
    new bootstrap.Modal(document.getElementById('leaveModal')).show();
});
@endif
</script>
@endsection