@extends('staff.layout')

@section('content')
<div class="page-view w-100">

    <!-- Page Header -->
    <div class="d-flex align-items-center justify-content-between gap-2 mb-3">
        <h3 class="mb-0 text-white fw-bold">
            Apply Leave
        </h3>
        <a href="{{ route('staff.leave_report') }}" class="btn btn-sm btn-primary">
            <i class="ti ti-history"></i> Leave Report
        </a>
    </div>


    <!-- Leave Form Card -->
    <div class="card bank-card p-3 p-md-4 w-100">

        <div class="mb-4">
            <h5 class="text-white mb-1">
                Leave Request
            </h5>

            <p class="text-white-50 mb-0">
                Submit your leave request by providing the required details.
            </p>
        </div>


        <form id="leaveForm">

            <div class="row g-3">

                <!-- From Date -->
                <div class="col-12 col-md-6">

                    <label for="fromDate" class="form-label text-white">
                        From Date
                        <span class="text-danger">*</span>
                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            <i class="ti ti-calendar"></i>
                        </span>

                        <input type="date"
                            id="fromDate"
                            name="from_date"
                            class="form-control"
                            required>

                    </div>

                </div>


                <!-- To Date -->
                <div class="col-12 col-md-6">

                    <label for="toDate" class="form-label text-white">
                        To Date
                        <span class="text-danger">*</span>
                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            <i class="ti ti-calendar"></i>
                        </span>

                        <input type="date"
                            id="toDate"
                            name="to_date"
                            class="form-control"
                            required>

                    </div>

                </div>


                <!-- Reason -->
                <div class="col-12">

                    <label for="reason" class="form-label text-white">
                        Reason
                        <span class="text-danger">*</span>
                    </label>

                    <textarea id="reason"
                        name="reason"
                        class="form-control"
                        rows="5"
                        placeholder="Enter your leave reason..."
                        required></textarea>

                </div>


                <!-- Submit -->
                <div class="col-12">

                    <div class="d-flex justify-content-end">

                        <button type="submit"
                            class="btn btn-primary">

                            <i class="ti ti-send me-1"></i>

                            Submit Leave

                        </button>

                    </div>

                </div>

            </div>

        </form>

    </div>

</div>



@endsection