@extends('admin.layouts.app')
@section('content')
<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Add new Event</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.events.update', $event->id) }}" method="post" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group row mb-3">
                        <div class="col-2">
                            <img id="avatar_preview" src="{{ asset($event->image->path ?? 'images/default.png') }}" alt="Image Preview" class="img-thumbnail ms-3" style="max-width: 150px;">
                        </div>
                        <div class="col align-self-center">
                            <label for="image" class="form-label">ُEvent image <small class="text-danger">*</small></label>
                            <div class="input-group">
                                <input type="file" class="form-control @error('image') is-invalid @enderror" id="image" name="image" accept="image/*" style="display: none;" onchange="previewImage(event)">
                                <label class="btn rounded-pill btn-label-primary waves-effect" for="image" id="image_label">Choose File</label>
                                @error('image')
                                <span class="text-danger" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="name" class="form-label">Event name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name" id="name" value="{{ old('name', $event->name) }}" required />
                            @error('name')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="description" class="form-label">Event Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" name="description" id="description" rows="4" required>{{ old('description', $event->description) }}</textarea>
                            @error('description')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="event_type_id" class="form-label">Event Type <span class="text-danger">*</span></label>
                            <select class="selectpicker w-100 @error('event_type_id') is-invalid @enderror" data-style="btn-default" name="event_type_id" id="event_type_id" required>
                                <option value="">Select Event Type</option>
                                @foreach(\App\Models\EventType::all() as $type)
                                <option value="{{ $type->id }}" {{ old('event_type_id', $event->event_type_id) == $type->id ? 'selected' : '' }}>{{ $type->type }}</option>
                                @endforeach
                            </select>
                            @error('event_type_id')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="required_skills" class="form-label">Required Skills <span class="text-danger">*</span></label>
                            <select class="select2 w-100 @error('required_skills') is-invalid @enderror" name="required_skills[]" id="required_skills" multiple required>
                                <option value="">Select Required Skills</option>
                                @foreach(\App\Models\Skill::all() as $skill)
                                <option value="{{ $skill->id }}" {{ collect(old('required_skills', $event->required_skills))->contains("id", $skill->id) ? 'selected' : '' }}>{{ $skill->name }}</option>
                                @endforeach
                            </select>
                            @error('required_skills')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="start_date" class="form-label">Start Date <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('start_date') is-invalid @enderror" name="start_date" id="start_date" value="{{ old('start_date', $event->start_date) }}" required />
                            @error('start_date')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="end_date" class="form-label">End Date <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('end_date') is-invalid @enderror" name="end_date" id="end_date" value="{{ old('end_date', $event->end_date) }}" required />
                            @error('end_date')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="start_time" class="form-label">Start Time <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('start_time') is-invalid @enderror" name="start_time" id="start_time" value="{{ old('start_time', $event->start_time) }}" required />
                            @error('start_time')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="end_time" class="form-label">End Time <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('end_time') is-invalid @enderror" name="end_time" id="end_time" value="{{ old('end_time', $event->end_time) }}" required />
                            @error('end_time')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="country_id" class="form-label">Country <span class="text-danger">*</span></label>
                            <select class="select2 w-100 @error('country_id') is-invalid @enderror" name="country_id" id="country_id" required>
                                <option value="">Select Country</option>
                                @foreach(\App\Models\Country::all() as $country)
                                <option value="{{ $country->id }}" {{ old('country_id', $event->country_id) == $country->id ? 'selected' : '' }}>{{ $country->name }}</option>
                                @endforeach
                            </select>
                            @error('country_id')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="city_id" class="form-label">City <span class="text-danger">*</span></label>
                            <select class="select2 w-100 @error('city_id') is-invalid @enderror" name="city_id" id="city_id" required>
                                <option value="">Select City</option>
                                @foreach(\App\Models\City::all() as $city)
                                <option value="{{ $city->id }}" {{ old('city_id', $event->city_id) == $city->id ? 'selected' : '' }}>{{ $city->name }}</option>
                                @endforeach
                            </select>
                            @error('city_id')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="address" class="form-label">Address <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('address') is-invalid @enderror" name="address" id="address" value="{{ old('address', $event->address) }}" required />
                            @error('address')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="number_of_staff_needed" class="form-label">Number of Staff Needed <span class="text-danger">*</span></label>
                            <input type="number" class="form-control @error('number_of_staff_needed') is-invalid @enderror" name="number_of_staff_needed" id="number_of_staff_needed" value="{{ old('number_of_staff_needed', $event->number_of_staff_needed) }}" required />
                            @error('number_of_staff_needed')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="hourly_rate" class="form-label">Hourly Rate <span class="text-danger">*</span></label>
                            <input type="number" class="form-control @error('hourly_rate') is-invalid @enderror" name="hourly_rate" id="hourly_rate" value="{{ old('hourly_rate', $event->hourly_rate) }}" required step="0.01" min="0">
                            @error('hourly_rate')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div class="col">
                            <label for="uniform_requirements" class="form-label">Uniform Requirements</label>
                            <textarea class="form-control @error('uniform_requirements') is-invalid @enderror" name="uniform_requirements" id="uniform_requirements" rows="3">{{ old('uniform_requirements', $event->uniform_requirements) }}</textarea>
                            @error('uniform_requirements')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col">
                            <label for="additional_info" class="form-label">Additional Information</label>
                            <textarea class="form-control @error('additional_info') is-invalid @enderror" name="additional_info" id="additional_info" rows="3">{{ old('additional_info', $event->additional_info) }}</textarea>
                            @error('additional_info')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row mb-3">
                        <div the="col">
                            <button type="submit" class="btn btn-primary" onclick="loadingBtn(this)">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    var startDate = document.querySelector("#start_date");
    var endDate = document.querySelector("#end_date");
    startDate.flatpickr({
        monthSelectorType: 'static'
    });
    endDate.flatpickr({
        monthSelectorType: 'static'
    });

    var startTime = document.querySelector("#start_time");
    var endTime = document.querySelector("#end_time");

    startTime.flatpickr({
        enableTime: true
        , noCalendar: true
        , dateFormat: "H:i"
        , time_24hr: true
    });

    endTime.flatpickr({
        enableTime: true
        , noCalendar: true
        , dateFormat: "H:i"
        , time_24hr: true
    });

</script>


<script>
    function previewImage(event) {
        var reader = new FileReader();
        reader.onload = function() {
            var output = document.getElementById('avatar_preview');
            output.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);
    }

</script>
@endsection