@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <h4>New Leave Request</h4>
            </div>
            <div class="card">
                <div class="card-body">
                    <form action="{{ route('leaverequestprocess') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.DocumentType') }} <span class="manitory">*</span></label>
                                    <select name="DocumentTypeId" class="form-control" disabled>
                                        @foreach ($lookupData['document_types'] as $type)
                                            <option value="{{ $type->Id }}" {{ $type->Id == 3 ? 'selected' : '' }}>
                                                {{ $type->Name }}</option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" name="DocumentTypeId" value="1">
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.DocumentStatus') }} <span class="manitory">*</span></label>
                                    <select name="DocumentStatusId" class="form-control" disabled>
                                        @foreach ($lookupData['document_statuses'] as $status)
                                            <option value="{{ $status->Id }}" {{ $status->Id == 1 ? 'selected' : '' }}>
                                                {{ $status->Name }}</option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" name="DocumentStatusId" value="1">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Request Date <span class="text-danger">*</span></label>
                                    <input type="date" name="leave_request_date" class="form-control"
                                        value="{{ old('leave_request_date') }}">
                                    @error('leave_request_date')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-lg-4 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.LeaveType') }} <span class="manitory">*</span></label>
                                    <select name="leave_type_id" class="form-control" id="cmbleavetype">
                                        <option value="">{{ __('sitelabel.SelectLeaveType') }}</option>
                                        @foreach ($lookupData['app_hr_att_leave_type'] as $type)
                                            <option value="{{ $type->Id }}">{{ $type->Name }}</option>
                                        @endforeach
                                    </select>
                                    @error('leave_type_id')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>Start Date <span class="text-danger">*</span></label>
                                    <input type="date" name="start_date" class="form-control"
                                        value="{{ old('start_date') }}">
                                    @error('start_date')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>End Date <span class="text-danger">*</span></label>
                                    <input type="date" name="end_date" class="form-control"
                                        value="{{ old('end_date') }}">
                                    @error('end_date')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Status') }}</label>
                                    <input type="checkbox" name="status" class="form-check-input" checked>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.FullHalyDay') }}</label>
                                    <input type="checkbox" name="full_half_day" id="fullHalfDay" class="form-check-input"
                                        checked>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.FirstSecondHalf') }}</label>
                                    <select name="first_second_half" id="firstSecondHalf" class="form-control" disabled>
                                        <option value="2">First Half</option>
                                        <option value="3">Second Half</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Document') }}</label>
                                    <input type="file" name="document_file" class="form-control">
                                    @error('document_file')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                           
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Reason') }} <span class="text-danger">*</span></label>
                                    <textarea name="reason" class="form-control">{{ old('reason') }}</textarea>
                                    @error('reason')
                                        <div class="text-danger">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-12">
                                <button type="submit" class="btn btn-primary">{{ __('sitelabel.Save') }}</button>
                                <a href="{{ route('leaverequest') }}" class="btn btn-dark">{{ __('sitelabel.Back') }}</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fullHalfDay = document.getElementById('fullHalfDay');
            const firstSecondHalf = document.getElementById('firstSecondHalf');
            const startDate = document.getElementById('startDate');
            const endDate = document.getElementById('endDate');
            const today = new Date().toISOString().split('T')[0];

            // Request Date validation
            document.querySelector('input[name="leave_request_date"]').setAttribute('min', today);

            // Initial state
            firstSecondHalf.disabled = fullHalfDay.checked;

            // Handle Full/Half Day checkbox change
            fullHalfDay.addEventListener('change', function() {
                firstSecondHalf.disabled = this.checked;
                if (this.checked) {
                    firstSecondHalf.value = '';
                    endDate.readOnly = false; // Allow end date modification for full day
                } else {
                    // When half day is selected, set end date same as start date
                    if (startDate.value) {
                        endDate.value = startDate.value;
                        endDate.readOnly = true; // Lock end date for half day
                    }
                }
            });

            // Sync end date with start date when half day is selected
            startDate.addEventListener('change', function() {
                if (!fullHalfDay.checked && this.value) {
                    endDate.value = this.value;
                }
            });

            // Prevent end date modification when half day is selected
            endDate.addEventListener('change', function() {
                if (!fullHalfDay.checked && startDate.value && this.value !== startDate.value) {
                    this.value = startDate.value;
                    alert('For half day leave, end date must match start date');
                }
            });

            // Handle first/second half selection
            firstSecondHalf.addEventListener('change', function() {
                if (this.value && startDate.value) {
                    endDate.value = startDate.value;
                }
            });
        });

        $(document).ready(function() {
            $('#firstSecondHalf, #cmbleavetype').select2({
                theme: "bootstrap-5",
            });
        });
    </script>
@endsection