@extends('dashlayouts.app')

@section('content')
<div class="pagetitle">
    <h1>Apply for Outing</h1>
    <nav>
        <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
        <li class="breadcrumb-item">Outing Record</li>
        <li class="breadcrumb-item active">Apply for Outing</li>
        </ol>
    </nav>
</div>

<section class="section">
    @include('errors')
    @include('layouts.messages')

    <form action="{{ route('outing.create') }}" method="POST" autocomplete="off" id="regform"
        enctype="multipart/form-data">
        @csrf
        <div class="card mb-4 custom-card">
            <div class="card-header custom-card-header">
                <h5 class="card-title mb-0">Outing Application Form</h5>
            </div>
            <div class="card-body custom-card-body">
                <div class="form-row my-2">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="student_name" class="form-label"><strong>Student Name</strong></label>
                            <p class="form-control-plaintext">{{ $student->student_name }}</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="school_name" class="form-label"><strong>School</strong></label>
                            <p class="form-control-plaintext">{{ $student->nama_pusat }}</p>
                        </div>
                    </div>
                </div>

                <hr class="custom-hr">

                <div class="row mb-4">
                    <div class="col-md-1 text-center align-content-center">
                        <h4>From :</h4>
                    </div>
                    <div class="col-md-5">
                        <label for="start_date" class="form-label">Outing Start Date <span
                                class="text-danger">*</span></label>
                        <input type="date" name="start_date" class="form-control custom-form-control"
                            id="start_date" autocomplete="off" value="{{ old('start_date') }}" required>
                    </div>
                    <div class="col-md-5">
                        <label for="start_time" class="form-label">Outing Start Time <span
                                class="text-danger">*</span></label>
                        <input type="time" name="start_time" class="form-control custom-form-control"
                            id="start_time" autocomplete="off" value="{{ old('start_time') }}" required>
                    </div>
                </div>

                <hr class="custom-hr">

                <div class="row mb-4">
                    <div class="col-md-1 text-center align-content-center">
                        <h4>To :</h4>
                    </div>
                    <div class="col-md-5">
                        <label for="end_date" class="form-label">Outing End Date <span
                                class="text-danger">*</span></label>
                        <input type="date" name="end_date" class="form-control custom-form-control"
                            id="end_date" autocomplete="off" value="{{ old('end_date') }}" required>
                    </div>
                    <div class="col-md-5">
                        <label for="end_time" class="form-label">Outing End Time <span
                                class="text-danger">*</span></label>
                        <input type="time" name="end_time" class="form-control custom-form-control"
                            id="end_time" autocomplete="off" value="{{ old('end_time') }}" required>
                    </div>
                </div>

                <hr class="custom-hr">

                <div class="form-group m-4">
                    <label for="reason" class="form-label">Reason <span class="text-danger">*</span></label>
                    <textarea type="text" name="reason" id="reason" class="form-control custom-form-control"
                        placeholder="Enter reason for outing" data-parsley-trigger="change"
                        data-parsley-maxlength="200" data-parsley-pattern="^[a-zA-Z0-9\s\/\'\.\,\-\@\(\)\&]+$"
                        value="{{ old('reason') }}" required></textarea>
                </div>

                <input id="kod_pusat" name="kod_pusat" type="hidden" value="{{ $student->kod_pusat }}">
                <input id="student_name" name="student_name" type="hidden" value="{{ $student->student_name }}">
                <input id="student_id" name="student_id" type="hidden" value="{{ $student->student_id }}">

                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-primary custom-btn">Submit</button>
                </div>
            </div>
        </div>
    </form>
</section>

<script>
// Set the minimum date for the start and end date inputs
function setMinDate() {
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0');
    var yyyy = today.getFullYear();

    var minDate = yyyy + '-' + mm + '-' + dd;
    document.getElementById("start_date").min = minDate;
    document.getElementById("end_date").min = minDate;
}

// Update the minimum end date based on the selected start date
function updateEndDateMin() {
    var startDate = document.getElementById("start_date").value;
    document.getElementById("end_date").min = startDate;
}

// Event listeners
document.addEventListener('DOMContentLoaded', setMinDate);
document.getElementById("start_date").addEventListener("change", updateEndDateMin);
</script>
@endsection