@extends('layouts.main')

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

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

@section('content')
<div class="row justify-content-center mb-5">
    {{-- @auth
        <div class="col-md-3">
            @include('user.menu')
        </div>
    @endauth --}}
    <div class="col-md-8">
        <div class="card">
            <h2 class="card-header  bg-white py-3 px-5 mb-0">
                Season Parking Card Application Form
            </h2>
            <form action="{{ route('issue.apply.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="card-body px-5">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="site_id" class="form-label">Site Name <span class="text-danger">*</span></label>
                                <select name="site_id" id="site_id" class="select2 form-select @error('site_id') is-invalid @enderror text-capitalize">
                                    <option value="0">-- Select --</option>
                                    @foreach ($sites as $site)
                                        <option value="{{ $site->site_id }}" @selected(old('site_id') == $site->site_id)>
                                            {{ $site->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('site_id')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="season_type" class="form-label ">
                                    Season Parking Type <span class="text-danger">*</span>
                                </label>
                                <select name="season_type" id="season_type" class="form-select @error('season_type') is-invalid @enderror text-capitalize">
                                    <option value="">-- Select --</option>
                                </select>
                                @error('season_type')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        {{-- <div class="col-md-6">
                            <div class="mb-4">
                                <label for="user_type" class="form-label">Account Type <span class="text-danger">*</span></label>
                                    <select name="user_type" id="user_type" class="form-select @error('user_type') is-invalid @enderror text-capitalize" disabled>
                                        <option value="">--Select--</option>
                                        <option value="2" @selected(Auth::user()->profile->user_type == 2)>Corporate</option>
                                        <option value="1" @selected(Auth::user()->profile->user_type == 1)>Individual</option>
                                    </select>
                                    @error('user_type')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                            </div>
                        </div> --}}
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="mb-4">
                                <label for="effective_date" class="form-label">Start Date <span class="text-danger">*</span></label>
                                <select name="effective_date" id="effective_date" class="form-select @error('effective_date') is-invalid @enderror text-capitalize">
                                    @foreach($dates as $date)
                                        <option value="{{ $date->format('Y-m-d') }}">
                                            {{ $date->format('jS F Y') }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('effective_date')
                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="row mb-4">
                                <label for="car_no_1" class="col-form-label fw-semibold text-muted col-md-3">Car Plate No. I</label>
                                <div class="col-md-9">
                                    <input type="text" id="car_no_1" name="cars[1]" class="form-control @error('cars') is-invalid @enderror">
                                </div>
                            </div>
                            <div class="row mb-4">
                                <label for="car_no_2" class="col-form-label fw-semibold text-muted col-md-3">Car Plate No. II</label>
                                <div class="col-md-9">
                                    <input type="text" id="car_no_2" name="cars[2]" class="form-control @error('cars') is-invalid @enderror">
                                    @error('cars')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" role="switch" name="is_tenant" value="1" id="is_tenant" @checked(old('is_tenant'))>
                                    <label class="form-check-label" for="is_tenant">Tenant</label>
                                </div>
                            </div>

                                <div class="mb-4 {{ old('is_tenant') ? '' : 'd-none' }}" id="tenant">
                                    <label for="attachment" class="form-label ">Upload Tenant Document <span class="text-danger">*</span></label>
                                    <input type="file" name="attachment" id="attachment" class="form-control @error('attachment') is-invalid @enderror">
                                    <i class="text-muted">Allowed files: jpg, png, pdf, doc, docx (max: 4mb)</i>
                                    @error('attachment')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                        </div>


                        @if (Auth::user()->user_type == '2')
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label for="total_cards" class="form-label ">Number Of Cards <span class="text-danger">*</span></label>
                                    <input type="number" name="total_cards" id="total_cards" value="{{ old('total_cards') }}" min="1" class="form-control @error('total_cards') is-invalid @enderror">
                                    @error('total_cards')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input @error('agree') is-invalid @enderror" name="agree" type="checkbox" id="nf_checkbox_css_1" @checked(old('agree'))>
                                <label class="form-check-label" for="nf_checkbox_css_1">I agree to the <strong>important notice</strong> below to proceed. <span class="text-danger">*</span></label>
                                @error('agree')
                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">
                        <p class="fw-bolder">* Important Notice</p>
                        <ul>
                            <li class="mb-3">
                                Your Season Parking will starts on 1st of every month (regardless Public Holidays). Your request will be processed within 3 (three) business days.
                            </li>
                            <li class="mb-3">
                                Season parking fees are to be paid in advance before the 1st day of every month. The renewal of the season pass must be paid in advance on the 1st day of each month, failing which the windscreen disc, season label, or access card may be deactivated.
                            </li>
                            <li class="mb-3">
                                The Company reserves the right to terminate the season parking Agreement without notice if the user's payment is not received after one (1) month from the last date of payment. Your deposit will be forfeited.
                            </li>
                        </ul>
                    </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="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#site_id')
                .select2()
                .on('select2:select',  (e) => {
                    let site = e.params.data;

                    ajaxSelection(
                        $('#season_type'),
                        site ? '/api/season-types/site/' + site.id : '/api/season-types',
                    );
                });

            let ajaxSelection = (element, url, placeholder) => {
                element.select2({
                    ajax: {
                        url: url,
                        dataType: 'json',
                        delay: 500,
                        // minimumInputLength: 5,
                        data: function (params) {
                            return {
                                q: params.term,
                                page: params.page
                            };
                        },
                        processResults: function (data, params) {
                            params.page = params.page || 1;

                            return {
                                results: data.data,
                                pagination: {
                                    more: (params.page * 15) < data.total
                                }
                            };
                        },
                        cache: true
                    },
                    placeholder: placeholder,
                    width: 'resolve',
                });
            };

            @php
                $seasonTypeRoute = old('site_id')
                    ? route('api.season-types.site', ['site' => old('site_id')], false)
                    : route('api.season-types', [], false);
            @endphp

            ajaxSelection(
                $('#season_type'),
                '{{ $seasonTypeRoute }}',
            );

            $('#is_tenant').on('change', (e) => {
                if ($('#is_tenant').is(':checked')) {
                    $('#tenant').removeClass('d-none').addClass('d-block');
                } else {
                    $('#tenant').removeClass('d-block').addClass('d-none');
                }
            })

        });
    </script>
@endpush