@extends('layouts.app')

@section('page_title', 'Leave Management')

@section('content')
    <div class="row g-4 mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm overflow-hidden h-100">
                <div class="card-body p-4 text-center">
                    <div class="icon-box bg-primary-subtle text-primary rounded-circle mx-auto mb-3"
                        style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
                        <i class="bi bi-calendar-check fs-4"></i>
                    </div>
                    <h6 class="text-muted small text-uppercase fw-bold mb-1">Annual Leave</h6>
                    <h2 class="fw-bold mb-1">{{ ($balances->annual_total ?? 0) - ($balances->annual_used ?? 0) }}</h2>
                    <p class="text-muted smaller mb-0">Total Allowance: {{ $balances->annual_total ?? 0 }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm overflow-hidden h-100">
                <div class="card-body p-4 text-center">
                    <div class="icon-box bg-danger-subtle text-danger rounded-circle mx-auto mb-3"
                        style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
                        <i class="bi bi-heart-pulse fs-4"></i>
                    </div>
                    <h6 class="text-muted small text-uppercase fw-bold mb-1">Sick Leave</h6>
                    <h2 class="fw-bold mb-1">{{ ($balances->sick_total ?? 0) - ($balances->sick_used ?? 0) }}</h2>
                    <p class="text-muted smaller mb-0">Total Allowance: {{ $balances->sick_total ?? 0 }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm overflow-hidden h-100">
                <div class="card-body p-4 text-center">
                    <div class="icon-box bg-info-subtle text-info rounded-circle mx-auto mb-3"
                        style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
                        <i class="bi bi-sun fs-4"></i>
                    </div>
                    <h6 class="text-muted small text-uppercase fw-bold mb-1">Casual Leave</h6>
                    <h2 class="fw-bold mb-1">{{ ($balances->casual_total ?? 0) - ($balances->casual_used ?? 0) }}</h2>
                    <p class="text-muted smaller mb-0">Total Allowance: {{ $balances->casual_total ?? 0 }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4 align-items-center">
        <div class="col-md-6">
            <h5 class="fw-bold mb-0">My Leave Requests</h5>
        </div>
        <div class="col-md-6 text-md-end">
            <a href="{{ route('leaves.create') }}" class="btn btn-primary px-4 shadow-sm"><i class="bi bi-plus-lg me-2"></i>
                Apply for Leave</a>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-4">
            <div class="table-responsive">
                <table class="table datatable table-hover align-middle">
                    <thead class="bg-light">
                        <tr>
                            <th class="border-0">Type</th>
                            <th class="border-0">From</th>
                            <th class="border-0">To</th>
                            <th class="border-0 text-center">Days</th>
                            <th class="border-0">Reason</th>
                            <th class="border-0">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($leaves as $leave)
                            <tr>
                                <td class="fw-semibold">{{ ucfirst($leave->leave_type) }}</td>
                                <td>{{ $leave->from_date->format('d M, Y') }}</td>
                                <td>{{ $leave->to_date->format('d M, Y') }}</td>
                                <td class="text-center"><span
                                        class="badge bg-secondary-subtle text-secondary">{{ $leave->total_days }}</span>
                                </td>
                                <td><span class="text-muted small">{{ Str::limit($leave->reason, 40) }}</span></td>
                                <td>
                                    <span
                                        class="badge bg-{{ $leave->status == 'approved' ? 'success' : ($leave->status == 'rejected' ? 'danger' : 'warning') }}-subtle text-{{ $leave->status == 'approved' ? 'success' : ($leave->status == 'rejected' ? 'danger' : 'warning') }} px-3 rounded-pill">
                                        {{ ucfirst($leave->status) }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection