@push('styles')
	<link href="{{ asset('admin_assets/vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet">
	<style>
.form-floating > .form-control:not(:placeholder-shown){padding-top: 11.5px !important;}
.form-floating > .form-control{height: calc(2.175rem + 2px);min-height: calc(2.175rem + 2px);}
</style>
@endpush

@php $selected = isset($event) ? $event->eventRanks->keyBy('rank_id') : collect(); @endphp
<div class="card shadow-none border my-4 admin-contact-section">
    <div class="card-header p-4">
        <h4 class="mb-0">{{ isset($event) ? 'Edit' : 'Create' }} Testing Event</h4></div>
    <div class="card-body p-4">
        <div class="row g-3">
            <div class="col-md-12">
                <label class="form-label">Title</label>
                <input class="form-control" name="title" value="{{ old('title',$event->title ?? '') }}">@error('title')
                <div class="invalid-feedback d-block">{{ $message }}</div>@enderror</div>
            <div class="col-md-4">
				<label class="form-label">
					Event Date <span class="text-danger">*</span>
				</label>

				<div class="flatpickr-input-container">
					<div class="form-floating">

						<input
							type="text"
							id="event_date"
							name="event_date"
							class="form-control datetimepicker @error('event_date') is-invalid @enderror"
							placeholder="Event Date"
							value="{{ old('event_date', isset($event) && $event->event_date ? \Carbon\Carbon::parse($event->event_date)->format('Y-m-d') : '') }}"
							data-options='{
								"disableMobile": true,
								"dateFormat": "Y-m-d"
							}'
						>

						<span class="uil uil-calendar-alt flatpickr-icon text-body-tertiary"></span>

						@error('event_date')
							<div class="invalid-feedback d-block">
								{{ $message }}
							</div>
						@enderror

					</div>
				</div>
			</div>
            <!--<div class="col-md-3">
                <label class="form-label">Sort</label>
                <input class="form-control" name="sort_no" value="{{ old('sort_no',$event->sort_no ?? 0) }}">
            </div>-->
            <div class="col-md-4">
				<label class="form-label">
					Registration Opens
				</label>

				<div class="flatpickr-input-container">
					<div class="form-floating">

						<input
							type="text"
							id="registration_opens_at"
							name="registration_opens_at"
							class="form-control datetimepicker @error('registration_opens_at') is-invalid @enderror"
							placeholder="Registration Opens"
							value="{{ old('registration_opens_at', isset($event) && $event->registration_opens_at ? $event->registration_opens_at->format('Y-m-d H:i') : '') }}"
							data-options='{
								"enableTime": true,
								"dateFormat": "Y-m-d H:i",
								"time_24hr": true,
								"disableMobile": true
							}'
						>

						<span class="uil uil-calendar-alt flatpickr-icon text-body-tertiary"></span>

						@error('registration_opens_at')
							<div class="invalid-feedback d-block">
								{{ $message }}
							</div>
						@enderror

					</div>
				</div>
			</div>

			<div class="col-md-4">
				<label class="form-label">
					Registration Closes
				</label>

				<div class="flatpickr-input-container">
					<div class="form-floating">

						<input
							type="text"
							id="registration_closes_at"
							name="registration_closes_at"
							class="form-control datetimepicker @error('registration_closes_at') is-invalid @enderror"
							placeholder="Registration Closes"
							value="{{ old('registration_closes_at', isset($event) && $event->registration_closes_at ? $event->registration_closes_at->format('Y-m-d H:i') : '') }}"
							data-options='{
								"enableTime": true,
								"dateFormat": "Y-m-d H:i",
								"time_24hr": true,
								"disableMobile": true
							}'
						>

						<span class="uil uil-calendar-alt flatpickr-icon text-body-tertiary"></span>

						@error('registration_closes_at')
							<div class="invalid-feedback d-block">
								{{ $message }}
							</div>
						@enderror

					</div>
				</div>
			</div>
            <div class="col-12">
                <label class="form-label">Description</label>
                <textarea class="form-control" name="description">{{ old('description',$event->description ?? '') }}</textarea>
            </div>
        </div>
        <hr>
        <h5>Ranks and Fees</h5> 
		
		<div class="row g-2 fw-semibold text-body-secondary border-bottom pb-2 mb-2">
    <div class="col-md-4">
        <label class="form-label">Rank</label>
    </div>
    <div class="col-md-3">
        <label class="form-label">Fee Amount  ({{ currency_symbol() }})</label>
    </div>
    <div class="col-md-3">
        <label class="form-label">Payment Required</label>
    </div>
    <div class="col-md-2">
        <label class="form-label">Sort No.</label>
    </div>
</div>
			@foreach($ranks as $rank) 
			@php $eventRank = $selected->get($rank->id); @endphp
        <div class="row g-2 align-items-center border-bottom py-2">
            <div class="col-md-4">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="ranks[{{ $loop->index }}][rank_id]" value="{{ $rank->id }}" id="rank{{ $rank->id }}" {{ $eventRank ? 'checked' : '' }}>
                    <label class="form-check-label" for="rank{{ $rank->id }}">{{ $rank->title }}</label>
                </div>
            </div>
            <div class="col-md-3">
                <input class="form-control input-float-number-only" name="ranks[{{ $loop->index }}][fee_amount]" placeholder="Fee" value="{{ old('ranks.'.$loop->index.'.fee_amount',$eventRank->fee_amount ?? 0) }}">
            </div>
            <div class="col-md-3">
                <input type="hidden" name="ranks[{{ $loop->index }}][payment_required]" value="0">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" name="ranks[{{ $loop->index }}][payment_required]" value="1" @checked(
    old(
        'ranks.'.$loop->index.'.payment_required',
        isset($event)
            ? ($eventRank?->payment_required ?? 1)
            : 1
    )
)>
                    <label class="form-check-label">Required</label>
                </div>
            </div>
            <div class="col-md-2">
                <input class="form-control  input-integer-number-only" name="ranks[{{ $loop->index }}][sort_no]" value="{{ old('ranks.'.$loop->index.'.sort_no',$eventRank->sort_no ?? $loop->index) }}" placeholder="Sort Number">
            </div>
        </div>
        @endforeach
        <div class="mt-4 mb-3 border-top pt-3 d-flex">
    <input type="hidden" name="status" value="0">

    <div class="form-check form-switch">
        <input
            class="form-check-input"
            type="checkbox"
            name="status"
            value="1"
            {{ old('status', $event->status ?? 1) ? 'checked' : '' }}
        >

        <label class="form-label form-check-label">
            Publish
        </label>
    </div>
</div>
        <div class="mt-4">
            
			<div class="d-flex gap-2">
				<button type="submit" class="btn btn-primary">
					{{ isset($event) ? 'Update' : 'Save' }}
				</button>

				<a href="{{ route('admin.rank-testing-events.index') }}"
				   class="btn btn-secondary">
					Back
				</a>
			</div>
        </div>
    </div>
</div>

@push('scripts')	

<script src="{{ asset('admin_assets/vendors/flatpickr/flatpickr.min.js') }}"></script>
<script>
	
 $(document).ready(function () {
	 
	 flatpickr(
		".datetimepicker",
		{
			disableMobile: true,
			dateFormat: "Y-m-d",
			minDate: "today"
		}
	);

     

    });
	
</script>

@endpush