@extends('adminlte::page')

@section('title', 'Leave Requests | ' . Config::get('adminlte.title'))

@section('content_header')
<h1>Leave Requests</h1>
@stop

@section('content')
@include('layouts.flash-message')

<div class="leave-shell">
    <div class="leave-hero">
        <div>
            <p class="hero-kicker">App Leave Requests</p>
            <h2>Review leave requests sent from the app and take action from the admin panel.</h2>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 col-6">
            <div class="summary-card border-blue"><span>Total</span><strong>{{ $summary['total'] }}</strong></div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-card border-amber"><span>Pending</span><strong>{{ $summary['pending'] }}</strong></div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-card border-green"><span>Approved</span><strong>{{ $summary['approved'] }}</strong></div>
        </div>
        <div class="col-md-3 col-6">
            <div class="summary-card border-red"><span>Rejected</span><strong>{{ $summary['rejected'] }}</strong></div>
        </div>
    </div>

    <div class="card leave-card">
        <div class="card-header">
            <h3 class="card-title">Leave Request List</h3>
        </div>
        <div class="card-body">
            <div id="leave_filter">
                <div class="row">
                    <div class="col-lg-4 form-group">
                        <label for="user_id">Staff</label>
                        <select name="user_id" id="user_id" class="form-control">
                            <option value="">All Staff</option>
                            @foreach($userOptions as $id => $name)
                            <option value="{{ $id }}" @if((string) $selectedUserId === (string) $id) selected @endif>{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-lg-4 form-group">
                        <label for="status">Status</label>
                        <select name="status" id="status" class="form-control">
                            <option value="">All Status</option>
                            <option value="pending" @if($selectedStatus === 'pending') selected @endif>Pending</option>
                            <option value="approved" @if($selectedStatus === 'approved') selected @endif>Approved</option>
                            <option value="rejected" @if($selectedStatus === 'rejected') selected @endif>Rejected</option>
                        </select>
                    </div>
                    <div class="col-lg-4 form-group">
                        <label>Approval Note</label>
                        <input type="text" class="form-control" value="Approve requests as paid or unpaid leave from the action buttons below." disabled>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                {!! $html->table(['class' => 'table table-hover leave-table']) !!}
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<link href="{{ asset('vendor/datatables/css/dataTables.bootstrap4.css') }}" rel="stylesheet">
<style>
    .leave-shell { display:grid; gap:1.5rem; }
    .leave-hero {
        padding: 1.8rem;
        border-radius: 20px;
        border: 1px solid #d9d7cf;
        background: linear-gradient(135deg, #f2ebdd 0%, #dce7ec 100%);
    }
    .hero-kicker {
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: .72rem;
        font-weight: 700;
        color: #5f6978;
        margin-bottom: .3rem;
    }
    .summary-card, .leave-card {
        border-radius: 18px;
        border: 1px solid #ddd8cf;
        background: #fff;
        box-shadow: 0 16px 36px rgba(24, 38, 63, .07);
    }
    .summary-card { padding: 1rem; border-top: 4px solid transparent; }
    .summary-card span { display:block; color:#697586; }
    .summary-card strong { font-size:2rem; color:#18212f; line-height:1.1; }
    .border-blue { border-top-color: #2563eb; }
    .border-amber { border-top-color: #d97706; }
    .border-green { border-top-color: #059669; }
    .border-red { border-top-color: #dc2626; }
    .leave-card .card-header { background: transparent; border-bottom: 1px solid #e5e7eb; }
    .leave-card label { font-size: .8rem; color:#6b7280; margin-bottom:.45rem; }
    .leave-table thead th { text-transform: uppercase; letter-spacing: .06em; font-size: .76rem; color:#6b7280; border-top:0; }
    .leave-table td { vertical-align: middle; }
</style>
@stop

@section('js')
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
{!! $html->scripts() !!}
<script>
    $(document).ready(function() {
        $('#user_id, #status').change(function() {
            window.LaravelDataTables["dataTableBuilder"].draw();
        });
    });
</script>
@stop