@props(['event' => new \App\Models\Event()])

<!--begin::Card-->
<div class="card">
    <!--begin::Card header-->
    <div class="card-header">
        <!--begin::Card title-->
        <div class="card-title">
            <h4>Event Details</h4>
        </div>
        <!--begin::Card title-->
    </div>
    <!--end::Card header-->

    <!--begin::Card body-->
    <div class="card-body py-4">
        <!--begin::Row-->
        <div class="row mb-2">
            <!--begin::Label-->
            <label for="name" class="col-lg-3 col-form-label fw-semibold fs-6 text-gray-600 required">Event Name</label>
            <!--end::Label-->
            <!--begin::Col-->
            <div class="col-lg-8">
                <input type="text" class="form-control form-control-sm" name="name" id="name" value="{{ old('name', $event->name) }}">
                @error('name')
                    <span class="text-sm text-danger">
                        {{ $message }}
                    </span>
                @enderror
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
        <!--begin::Row-->
        <div class="row mb-2">
            <!--begin::Label-->
            <label for="event_datetime" class="col-lg-3 col-form-label fw-semibold fs-6 text-gray-600">Time & Date</label>
            <!--end::Label-->
            <!--begin::Col-->
            <div class="col-lg-8">
                <!--begin::Input group-->
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                    <input type="text" class="form-control form-control-sm flatpickr-time text-start" placeholder="DD/MM/YYYY, HH:MM" name="event_datetime" id="event_datetime"
                        value="{{ old('event_datetime', $event->event_datetime ? $event->event_datetime->format('d/m/Y, H:i A') : null) }}">
                </div>
                <!--end::Input group-->
                @error('event_datetime')
                    <span class="text-sm text-danger">
                        {{ $message }}
                    </span>
                @enderror
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
        <!--begin::Row-->
        <div class="row mb-2">
            <!--begin::Label-->
            <label for="venue" class="col-lg-3 col-form-label fw-semibold fs-6 text-gray-600">Venue</label>
            <!--end::Label-->
            <!--begin::Col-->
            <div class="col-lg-8">
                <input type="text" class="form-control form-control-sm" name="venue" id="venue" value="{{ old('venue', $event->venue) }}">
                @error('venue')
                    <span class="text-sm text-danger">
                        {{ $message }}
                    </span>
                @enderror
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
        <!--begin::Row-->
        <div class="row mb-2">
            <!--begin::Label-->
            <label for="state_id" class="col-lg-3 col-form-label fw-semibold fs-6 text-gray-600">State</label>
            <!--end::Label-->
            <!--begin::Col-->
            <div class="col-lg-8">
                <select name="state_id" id="state_id" class="form-select select2" data-placeholder="Select State">
                    <option></option>
                    @foreach (\App\Models\State::all() as $state)
                        <option value="{{ $state->id }}" @selected(old('state_id', $event->state_id) == $state->id)>{{ $state->name }}</option>
                    @endforeach
                </select>
                @error('state_id')
                    <span class="text-sm text-danger">
                        {{ $message }}
                    </span>
                @enderror
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
        <!--begin::Row-->
        <div class="row mb-2">
            <!--begin::Label-->
            <label for="agenda" class="col-lg-3 col-form-label fw-semibold fs-6 text-gray-600">Agenda</label>
            <!--end::Label-->
            <!--begin::Col-->
            <div class="col-lg-8">
                <textarea class="form-control form-control-sm" name="agenda" id="agenda" rows="3" placeholder="Write your agenda">{{ old('agenda', $event->agenda) }}</textarea>
                @error('agenda')
                    <span class="text-sm text-danger">
                        {{ $message }}
                    </span>
                @enderror
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
        <!--begin::Row-->
        <div class="row mb-2">
            <!--begin::Label-->
            <label for="max_participants" class="col-lg-3 col-form-label fw-semibold fs-6 text-gray-600">Max No. of Participants</label>
            <!--end::Label-->
            <!--begin::Col-->
            <div class="col-lg-8">
                <input type="number" class="form-control form-control-sm" name="max_participants" id="max_participants" value="{{ old('max_participants', $event->max_participants) }}">
                @error('max_participants')
                    <span class="text-sm text-danger">
                        {{ $message }}
                    </span>
                @enderror
            </div>
            <!--end::Col-->
        </div>
        <!--end::Row-->
        <div class="form-group form-group-sm row">
            <label for="thumbnail_image" class="col-lg-3 col-form-label fw-semibold fs-6 text-gray-600">Thumbnail Image</label>
            <div class="col-lg-7 col-sm-8 align-items-center py-2">
                <div class="dropzone w-100 w-md-400px" id="thumbnailImage">
                    <!--begin::Message-->
                    <div class="dz-message needsclick">
                        <i class="ki-duotone ki-file-up fs-3x text-primary"><span class="path1"></span><span class="path2"></span></i>
                        <!--begin::Info-->
                        <div class="ms-4">
                            <h3 class="fs-5 fw-bold text-gray-900 mb-1">Drop files here or click to upload.</h3>
                            <span class="fs-7 fw-semibold text-gray-500">Upload file</span>
                        </div>
                        <!--end::Info-->
                    </div>
                </div>

                <!-- Image Preview Section -->
                <div class="mt-5">
                    @if ($event->thumbnail_image != null)
                        <img src="{{ asset('storage/' . $event->thumbnail_image) }}" alt="" class="img-fluid" style="max-height: 80px; width: auto;">
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!--end::Card body-->
</div>
<!--end::Card-->
<div class="d-flex justify-content-end pt-5">
    <button class="btn btn-success btn-sm w-75px">Save</button>
</div>

@push('scripts')
    <script>
        var thumbnailImageDropzone = new Dropzone("#thumbnailImage", {
            url: "{{ route('event-management.events.store-media') }}",
            paramName: "file",
            maxFiles: 1,
            maxFilesize: 10,
            addRemoveLinks: true,
            acceptedFiles: 'image/*',
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            success: function(file, response) {
                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'thumbnail_image';
                input.value = response.name;

                $('#thumbnailImage').closest('form').append(input);
            }
        });
    </script>
@endpush