@extends('layouts.main')

@push('css')
    <link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .is-invalid + .select2.select2-container .selection .select2-selection.select2-selection--multiple  {
            border: 1px solid  #f44336;
        }

        .multiple-select2 .is-invalid {
            border: none;
        }
    </style>
@endpush

@section('content')
<div class="row justify-content-center mb-5">
    <div class="col-md-8">
        <div class="card">
            <h2 class="card-header  bg-white py-3 px-5 mb-0">
                Season Parking Card Suspension Application Form
            </h2>
            <form action="{{ route('issue.suspension.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="card-body px-5">
                    {{-- <div class="row my-4">
                        <div class="">
                            <label for="site_id" class="form-label">Choose card <span class="text-danger">*</span></label>
                            @if($user->seasoncard->isNotEmpty())
                                <table class="table border mb-2">
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" name="" id="" class="form-check-input @error('agree') is-invalid @enderror"></th>
                                            <th>Card No.</th>
                                            <th>Season Type</th>
                                            <th>Rate</th>
                                            <th>Card Status</th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-group-divider">
                                        @foreach ($user->seasoncard->where('status', 1) as $index => $card)
                                        <tr>
                                            <td><input type="checkbox" name="card" id="card" class="form-check-input @error('agree') is-invalid @enderror"></td>
                                            <td>{{ $card->card_no ?? '-'  }}</td>
                                            <td>{{ $card->types->name ?? '-'  }}</td>
                                            <td>RM {{ number_format($card->effectiveRateAmount(), 2) }}</td>
                                            <td>{{ $card->statuses->name ?? '-'  }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            @else
                                <div class="border-muted text-center p-4" style="border-radius: 8px; border-style:dashed; border-width:1px;">
                                    <div class="text-muted text-center">
                                        No card found
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div> --}}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4 has-error">
                                <label for="cards" class="form-label">Card to Suspend <span class="text-danger">*</span></label>
                                <select name="cards[]" id="" class="multiple-select2 form-control @error('cards') is-invalid @enderror" multiple>
                                    @foreach ($cards as $card)
                                        <option value="{{ $card->card_no }}"  {{ in_array($card->card_no, old('cards') ?? []) ? 'selected' : '' }}>{{ $card->card_no.' | '.$card->type->name }}</option>
                                    @endforeach
                                </select>
                                @error('cards')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6"></div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="effective_start_date" class="form-label">Intended Start Date<span class="text-danger">*</span></label>

                                <select name="effective_start_date" id="effective_start_date" class="form-select @error('effective_start_date') is-invalid @enderror">
                                    @foreach($periods as $period)
                                        <option value="{{ $period->day(1)->format('Y-m-d') }}" @selected(old('effective_start_date') == $period->day(1)->format('Y-m-d'))>{{ $period->format('jS F Y') }}</option>
                                    @endforeach
                                </select>

                                @error('effective_start_date')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="effective_end_date" class="form-label">Intended End Date<span class="text-danger">*</span></label>

                                @php
                                    // Default to the month after the earliest selectable start month, so the
                                    // end date always stays after the start date the form opens with.
                                    $defaultEndDate = collect($periods)->skip(1)->first() ?? collect($periods)->first();
                                @endphp

                                <select name="effective_end_date" id="effective_end_date" class="form-select @error('effective_end_date') is-invalid @enderror">
                                    @foreach($periods as $period)
                                        <option value="{{ $period->day(1)->format('Y-m-d') }}" @selected(old('effective_end_date', $defaultEndDate->day(1)->format('Y-m-d')) == $period->day(1)->format('Y-m-d'))>{{ $period->format('jS F Y') }}</option>
                                    @endforeach
                                </select>

                                @error('effective_end_date')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="reason" class="form-label">Reason <span class="text-danger">*</span></label>
                                <select name="reason" id="reason" class="form-select @error('reason') is-invalid @enderror">
                                    <option value="">- Select reason -</option>
                                    <option value="Semester Break (Student)" @selected(old('reason') == 'Semester Break (Student)')>Semester Break (Student)</option>
                                    <option value="Maternity Leave" @selected(old('reason') == 'Maternity Leave')>Maternity Leave</option>
                                    <option value="Umrah/Haji" @selected(old('reason') == 'Umrah/Haji')>Umrah/Haji</option>
                                    <option value="Prolonged Illness" @selected(old('reason') == 'Prolonged Illness')>Prolonged Illness</option>
                                    <option value="Vehicle Breakdown" @selected(old('reason') == 'Vehicle Breakdown')>Vehicle Breakdown</option>
									<option value="Others" @selected(old('reason') == 'Others')>Others reason</option>
                                </select>
								@error('reason')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
								<div id="otherReasonWrapper" style="display: none; margin-top: 10px;">
									<input type="text" name="others_reason" id="others_reason"
										   class="form-control @error('others_reason') is-invalid @enderror"
										   placeholder="Please specify your reason"
										   value="{{ old('others_reason') }}">
									@error('others_reason')
										<div class="invalid-feedback">{{ $message }}</div>
									@enderror
								</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="attachment" class="form-label ">Attach Support Document <span class="text-danger">*</span></label>
                                <input type="file" name="attachment" id="attachment" class="form-control @error('attachment') is-invalid @enderror">
                                @error('attachment')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-none py-3 px-5 d-flex justify-content-between align-items-center">
                    <a href="{{ route('home') }}" class="btn btn-white btn-lg">Cancel</a>
                    <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('js')
    <script src="/assets/plugins/select2/dist/js/select2.full.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.multiple-select2').select2({
                "placeholder" : "-- Select card --"
            });
        });

		document.addEventListener("DOMContentLoaded", function () {
        const reasonSelect = document.getElementById("reason");
        const otherReasonWrapper = document.getElementById("otherReasonWrapper");

        function toggleOtherReason() {
            if (reasonSelect.value === "Others") {
                otherReasonWrapper.style.display = "block";
            } else {
                otherReasonWrapper.style.display = "none";
            }
        }

        // Run on load (to restore old input if validation fails)
        toggleOtherReason();

        // Run on change
        reasonSelect.addEventListener("change", toggleOtherReason);
    });
    </script>
@endpush