@extends('layouts.app')

@section('title', 'Season Type Management')
@section('content')
<h1 class="page-header">Parking Management</h1>
<div class="panel panel-inverse border-0">
    <div class="panel-heading">Add New Season Rate</div>
    <form action="{{ route('seasonRate.store') }}" method="POST">
        @csrf
        <div class="panel-body">
            <div class="row my-4">
                <label for="site_id" class="col-form-label col-md-2">Site Name <span class="text-danger">*</span></label>
                <div class="col-md-10">
                    <select name="site_id" id="site_id" class="form-select @error('site_id') is-invalid @enderror">
                        <option value="">- Select Site -</option>
                        @foreach ($sites as $site)
                            <option value="{{ $site->site_id }}" @selected($site->site_id == old('site_id'))>{{ $site->name }}</option>
                        @endforeach
                    </select>
                    @error('site_id')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <div class="row mb-4">
                <label for="season_type_id" class="col-form-label col-md-2">Season Type <span class="text-danger">*</span></label>
                <div class="col-md-10">
                    <select name="season_type_id" id="season_type_id" class="form-select @error('season_type_id') is-invalid @enderror">
                        <option value="">- Select Type -</option>
                        @foreach ($seasonTypes as $seasonType)
                            <option value="{{ $seasonType->id }}" @selected(old('season_type_id') == $seasonType->id)>{{ $seasonType->name }}</option>
                        @endforeach
                    </select>
                    @error('season_type_id')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <div class="row mb-4">
                <label for="rate" class="col-form-label col-md-2">Rate <span class="text-danger">*</span></label>
                <div class="col-md-10">
                    <input type="number" min=0 step="0.01" id="rate" name="rate" value="{{ old('rate') }}" class="form-control @error('rate') is-invalid @enderror">
                    @error('rate')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="row mb-4">
                <label for="effective_date" class="col-form-label col-md-2">Effective Date <span class="text-danger">*</span></label>
                <div class="col-md-10">
                    <input type="date" id="effective_date" name="effective_date" value="{{ old('effective_date') }}" class="form-control @error('effective_date') is-invalid @enderror">
                    @error('effective_date')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="row mb-4">
                <label for="expiry_date" class="col-form-label col-md-2">Expiry Date <span class="text-danger">*</span></label>
                <div class="col-md-10">
                    <input type="date" id="expiry_date" name="expiry_date" value="{{ old('expiry_date') }}" class="form-control @error('expiry_date') is-invalid @enderror">
                    @error('expiry_date')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="row mb-4">
                <label for="status" class="col-form-label col-md-2">Status <span class="text-danger">*</span></label>
                <div class="col-md-10">
                    <select name="status" id="status" class="form-select @error('status') is-invalid @enderror text-capitalize">
                        <option value="">--Select status--</option>
                        <option value="1" @selected('1' == old('status', '1'))>Active</option>
                        <option value="0" @selected('0' == old('status'))>Inactive</option>
                    </select>
                    @error('status')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <div class="row mb-4">
                <label for="status" class="col-form-label col-md-2">SST</label>
                <div class="col-md-10">
                    <div class="form-check form-switch">
                        <input class="form-check-input" value="1" name="is_sst_included" type="checkbox" role="switch" id="is_sst_included" @checked(old('is_sst_included', true))>
                        <label class="form-check-label" for="is_sst_included">Included</label>
                    </div>
                    <small class="text-muted">Include SST 6%</small>
                </div>
            </div>
        </div>
        <div class="panel-footer text-end">
            <a href="{{ route('seasonRate.index') }}" class="btn btn-white">Back</a>
            <button type="submit" class="btn btn-primary">Register New Season Rate</button>
        </div>
    </form>
</div>
@endsection

@push('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" integrity="sha256-zaSoHBhwFdle0scfGEFUCwggPN7F+ip9XRglo8IWb4w=" crossorigin="anonymous">
    <style>
        .is-invalid + .select2.select2-container .selection .select2-selection.select2-selection--single  {
            border: 1px solid  #f44336;
        }

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

@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() {

            let ajaxSelection = (element, url, type, 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;

                            console.log(type)

                            return {
                                results: type !== 'site'
                                    ? data.data
                                    : $.map(data.data, function (item) { // Assuming your server returns items in an array
                                        return {
                                            id: item.id || item.site_id, // Map your server's ID field to 'id'
                                            text: item.text // Map your server's text field to 'text'
                                        };
                                    }),
                                pagination: {
                                    more: (params.page * 15) < data.total
                                }
                            };
                        },
                        cache: true
                    },
                    placeholder: placeholder,
                    width: 'resolve',
                });
            };

            ajaxSelection(
                $('#site_id'),
                '{{ route('api.sites', [], false) }}',
                'site'
            );


            ajaxSelection(
                $('#season_type_id'),
                '{{ route('api.season-types.type', [], false) }}',
            );
        });
    </script>
@endpush