@extends('students-dashboard.app')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-12 col-lg-10 m-auto">
            <div class="page-header mb-4">
                <div class="page-block mb-0">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <div class="page-header-title mb-0">
                                <h4 class="mb-0">Apply Leave</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-12 col-lg-10 m-auto">
            <div class="card">
                <div class="card-header">
                    <h5>Edit Leave</h5>
                    <hr>
                </div>
                <div class="card-body">
                    <form action="{{route('student.apply-leave.update', $leave->id)}}" method="post">
                        @csrf
                        @method('PUT')
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <select class="form-select" id="floatingSelect"
                                        name="leave_type" aria-label="Floating label select example">
                                        <option selected="selected">Select Leave Type</option>
                                        @foreach ($leaveTypes as $leaveType)
                                            <option value="{{$leaveType->id}}" {{$leave->leaveType->id == $leaveType->id ? 'selected' : ''}}>{{$leaveType->name}}</option>
                                        @endforeach
                                    </select> 
                                    <label for="floatingSelect">Leave Type</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="date" class="form-control" id="fromDate" name="from_date" placeholder="Date" value="{{$leave->from_date}}">
                                    <label for="fromDate">From Date</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="date" class="form-control" id="toDate" name="to_date" placeholder="Date" value="{{$leave->to_date}}">
                                    <label for="toDate">To Date</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="number" class="form-control" id="numberOfDays" name="requested_days" placeholder="Number" readonly value="{{$leave->requested_days}}">
                                    <label for="numberOfDays">Number of Days</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-floating">
                                    <textarea name="leave_reason" class="form-control" id="floatingTextarea2"
                                        style="height: 100px">{{$leave->leave_reason}}</textarea> 
                                        <label for="floatingTextarea2"></label>
                                    <label for="floatingInput">Leave Reason</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const fromDate = document.getElementById('fromDate');
        const toDate = document.getElementById('toDate');
        const numberOfDays = document.getElementById('numberOfDays');

        function calculateDays() {
            if (fromDate.value && toDate.value) {
                const start = new Date(fromDate.value);
                const end = new Date(toDate.value);
                const diffTime = Math.abs(end - start);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
                numberOfDays.value = diffDays;
            }
        }

        fromDate.addEventListener('change', calculateDays);
        toDate.addEventListener('change', calculateDays);
    });
</script>
@endpush