@extends('layouts.app')

@section('title', 'Leave Request Detail | Institution Axis')

@section('sidebar-menu')
    @include('schooladmin.partials.sidebar')
@endsection

@section('sidebar-footer')
    <p>{{ auth()->user()->school?->name ?? 'Institution Axis' }}</p>
@endsection

@section('breadcrumb')
    <span><a href="{{ route('schooladmin.dashboard') }}">Home</a></span> /
    <span><a href="{{ route('schooladmin.staff.leaves.index') }}">Leave Requests</a></span> /
    <span class="active-page">Review</span>
@endsection

@section('navbar-right')
    <div class="notification-icon"><i class="fas fa-bell"></i><span class="badge-notify">5</span></div>
    <div class="profile-dropdown dropdown">
        <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">
            <img src="https://ui-avatars.com/api/?background=e54027&color=fff&name=Admin" 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>Leave Request Review</h4>
    </div>
    <a href="{{ route('schooladmin.staff.leaves.index') }}" class="btn btn-outline-secondary rounded-pill px-3">
        <i class="fas fa-arrow-left me-1"></i>Back to Leaves
    </a>
</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

<div class="row g-4">
    {{-- Left: Staff Info + Leave Details --}}
    <div class="col-lg-5">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body text-center p-4">
                <img src="{{ $leave->staffProfile->avatar_url }}"
                     class="rounded-circle border border-3 border-primary mb-3" width="80" height="80">
                <h5 class="fw-bold">{{ $leave->staffProfile->full_name }}</h5>
                <div class="text-muted small">{{ $leave->staffProfile->designation ?? 'Staff Member' }}</div>
                <div class="text-muted small">{{ $leave->staffProfile->staff_number }}</div>
                <div class="mt-2">
                    <span class="badge {{ $leave->status_badge }} px-3 fs-6">{{ ucfirst($leave->status) }}</span>
                </div>
            </div>
            <div class="card-body border-top">
                <dl class="row mb-0">
                    <dt class="col-5 text-muted">Leave Type</dt>
                    <dd class="col-7"><span class="badge bg-light text-dark border">{{ $leave->leave_type_label }}</span></dd>
                    <dt class="col-5 text-muted">Start Date</dt>
                    <dd class="col-7">{{ $leave->start_date->format('d M Y') }}</dd>
                    <dt class="col-5 text-muted">End Date</dt>
                    <dd class="col-7">{{ $leave->end_date->format('d M Y') }}</dd>
                    <dt class="col-5 text-muted">Days</dt>
                    <dd class="col-7"><strong>{{ $leave->days_requested }} working day(s)</strong></dd>
                    <dt class="col-5 text-muted">Submitted</dt>
                    <dd class="col-7">{{ $leave->created_at->format('d M Y, H:i') }}</dd>
                    @if($leave->reviewed_at)
                    <dt class="col-5 text-muted">Reviewed By</dt>
                    <dd class="col-7">{{ $leave->reviewer?->name ?? '—' }}</dd>
                    <dt class="col-5 text-muted">Reviewed On</dt>
                    <dd class="col-7">{{ $leave->reviewed_at->format('d M Y, H:i') }}</dd>
                    @endif
                </dl>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 mt-3">
            <div class="card-header bg-white py-3">
                <h6 class="mb-0 fw-semibold">Reason</h6>
            </div>
            <div class="card-body">
                <p class="mb-0">{{ $leave->reason }}</p>
            </div>
        </div>

        @if($leave->admin_notes)
        <div class="card border-0 shadow-sm rounded-4 mt-3">
            <div class="card-header bg-white py-3">
                <h6 class="mb-0 fw-semibold">Admin Notes</h6>
            </div>
            <div class="card-body">
                <p class="mb-0">{{ $leave->admin_notes }}</p>
            </div>
        </div>
        @endif
    </div>

    {{-- Right: Approve/Reject Actions --}}
    <div class="col-lg-7">
        @if($leave->status === 'pending')
        <div class="card border-0 shadow-sm rounded-4 mb-4 border-start border-4 border-success">
            <div class="card-header bg-white py-3">
                <h6 class="mb-0 fw-semibold text-success"><i class="fas fa-check-circle me-2"></i>Approve Leave</h6>
            </div>
            <div class="card-body">
                <form action="{{ route('schooladmin.staff.leaves.approve', $leave) }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Admin Note <small class="text-muted">(optional)</small></label>
                        <textarea name="admin_notes" class="form-control" rows="3"
                                  placeholder="e.g. Approved. Please ensure tasks are delegated."></textarea>
                    </div>
                    <button type="submit" class="btn btn-success px-4 rounded-pill"
                            onclick="return confirm('Approve this leave request?')">
                        <i class="fas fa-check me-2"></i>Approve Leave
                    </button>
                </form>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 border-start border-4 border-danger">
            <div class="card-header bg-white py-3">
                <h6 class="mb-0 fw-semibold text-danger"><i class="fas fa-times-circle me-2"></i>Reject Leave</h6>
            </div>
            <div class="card-body">
                <form action="{{ route('schooladmin.staff.leaves.reject', $leave) }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Reason for Rejection <span class="text-danger">*</span></label>
                        <textarea name="admin_notes" class="form-control @error('admin_notes') is-invalid @enderror"
                                  rows="3" required
                                  placeholder="e.g. Insufficient cover available during this period."></textarea>
                        @error('admin_notes')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <button type="submit" class="btn btn-danger px-4 rounded-pill"
                            onclick="return confirm('Reject this leave request?')">
                        <i class="fas fa-times me-2"></i>Reject Leave
                    </button>
                </form>
            </div>
        </div>
        @else
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body text-center py-5">
                <i class="fas fa-{{ $leave->status === 'approved' ? 'check-circle text-success' : 'times-circle text-danger' }} fa-3x mb-3"></i>
                <h5>This request has been <strong>{{ ucfirst($leave->status) }}</strong></h5>
                <p class="text-muted">No further action required.</p>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection