@extends('layouts.front_app')
@section('content')
    <!-- Main Hero Section -->
    <section class="inner-page">
        <div class="container">
            <h2 class="heading">Events</h2>
        </div>
    </section>
    <!-- ! Main Hero Section -->

    <!-- Upcoming Show Section -->
    <section class="form-section">
        <div class="container">
            <div class="submissionForm">
                <h2 class="heading text-center text-dark mb-4">Event Information</h2>
                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif
                <form id="showForm"  action="{{ route('customer.event.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <label>Preferred Contact *</label>
                            <input type="text" class="form-control" name="preferred_contact"
                                   placeholder="Preferred Contact" required>
                            @error('preferred_contact')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Email / Cell Phone *</label>
                            <input type="text" class="form-control" name="email_or_cellphone"
                                   placeholder="Email / Cell Phone" required>
                            @error('email_or_cellphone')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Event Name *</label>
                            <input type="text" class="form-control" name="event_name" placeholder="Event Name" required>
                            @error('event_name')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="">What's Your Vibe? *</label>
                            <select name="vibe[]" class="form-control" id="vibeSelect" required multiple>
                                <option value="">Choose Vibe</option>
                                @foreach($vibe as $vibes)
                                    <option value="{{ $vibes->id }}">{{ $vibes->name }}</option>
                                @endforeach
                            </select>

                            @error('vibe')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-12">
                            <label for="">Organizer Name *</label>
                            <input type="text" class="form-control" name="organizer_name" placeholder="Organizer Name"
                                   required>
                            @error('organizer_name')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-12">
                            <label for="">Price Per Ticket *</label>
                            <input type="number" class="form-control" name="price" placeholder="Price"
                                   required>
                            @error('price')
                            <div class="text-danger">{{ price }}</div>
                            @enderror
                        </div>

                        <!-- Event Location Fields -->
                        <div class="col-md-12">
                            <h2 class="heading text-center text-dark mb-4">Event Location</h2>
                        </div>
                        <div class="col-md-6">
                            <label for="">Venue Listing : *</label>
                            <input type="text" class="form-control" name="venue_listing" placeholder="" required>
                            @error('venue_listing')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label for="">City : *</label>
                            <input type="text" class="form-control" name="city" placeholder="" required>
                            @error('city')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="">State/Province : *</label>
                            <input type="text" class="form-control" name="state" placeholder="" required>
                            @error('state')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="">Zip/PostalCode : *</label>
                            <input type="text" class="form-control" name="zip" placeholder="" required>
                            @error('zip')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="">Location : *</label>
                            <input type="text" class="form-control" name="location" placeholder="" required>
                            @error('location')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="">Address 1 : *</label>
                            <input type="text" class="form-control" name="address1" placeholder="" required>
                            @error('address1')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-12">
                            <label for="">Address 2 :</label>
                            <input type="text" class="form-control" name="address2" placeholder="" >
                            @error('address2')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Event Date Fields -->
                        <div class="col-md-12">
                            <h2 class="heading text-center text-dark mb-4">Event Date</h2>
                        </div>
                        <div class="col-md-6">
                            <label for="start_date">Start Date: *</label>
                            <input type="date" class="form-control" id="start_date" name="start_date" value="{{ old('start_date') }}" required>
                            <div class="text-danger" id="start_date_error"></div>
                            @error('start_date')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="">Doors : *</label>
                            <input type="time" class="form-control" name="time" placeholder="" required>
                            @error('time')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                            <div class="col-md-6">
                                <label for="start_time">Show Time: *</label>
                                <input type="time" class="form-control" id="start_time" name="start_time" value="{{ old('start_time') }}" required>
                                @error('start_time')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label for="end_date">End Date: *</label>
                                <input type="date" class="form-control" id="end_date" name="end_date" value="{{ old('end_date') }}" required>
                                <div class="text-danger" id="end_date_error"></div>
                                @error('end_date')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                            </div>

                        <div class="col-md-12">
                            <label for="third_party_link">Ticket link *</label>
                            <input type="text" class="form-control" name="third_party_link" id="third_party_link">
                            @error('third_party_link')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12">
                            <label for="map_location">Map Location *</label>
                            <textarea class="form-control" name="map_location" id="map_location" style="height: 200px; max-height: 200px !important;" >{{ old('map_location') }}</textarea>
                        </div>

                        <div class="col-md-12">
                            <h2 class="heading text-center text-dark mb-4">Image Gallery</h2>
                        </div>
                        <div class="col-md-12">
                            <label for="">Image:</label>
                            <div class="file-info">
                                Media Support .jpg, .jpeg and.gif files: required minimum file size,
                                470 x 311 pixels (72 dpi).
                            </div>
                            <div class="full-page"></div>
                            <div class="file">
                                <span>Drag and Drop Files here</span>
                                <p class="text-dark">or use the "Browse" button below to find a file to add</p>
                                <input type="file" name="image"/>
                                <div class="btn themeBtn uploadBtn">Browse</div>
                            </div>
                            @error('image')
                            <div class="text-danger">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-12 text-center">
                        <button type="submit" class="btn themeBtn dark">Add Event</button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- ! Upcoming Show Section -->
@endsection
@push('event_script')
    <script>
        $(document).ready(function() {
            $('#vibeSelect').select2({
                maximumSelectionLength: 3 // Limit the maximum number of selections to 3
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('showForm');
            const startDateInput = document.getElementById('start_date');
            const endDateInput = document.getElementById('end_date');
            const startDateError = document.getElementById('start_date_error');
            const endDateError = document.getElementById('end_date_error');

            form.addEventListener('submit', function (event) {
                let startDate = new Date(startDateInput.value);
                let endDate = new Date(endDateInput.value);

                // Clear previous error messages
                startDateError.textContent = '';
                endDateError.textContent = '';

                if (endDate < startDate) {
                    event.preventDefault();
                    endDateError.textContent = 'End date must be a date after or equal to the start date.';
                }
            });

            startDateInput.addEventListener('change', function () {
                validateDates();
            });

            endDateInput.addEventListener('change', function () {
                validateDates();
            });

            function validateDates() {
                let startDate = new Date(startDateInput.value);
                let endDate = new Date(endDateInput.value);

                // Clear previous error messages
                startDateError.textContent = '';
                endDateError.textContent = '';

                if (endDate < startDate) {
                    endDateError.textContent = 'End date must be a date after or equal to the start date.';
                }
            }
        });
    </script>

@endpush