@extends('layouts.app')

@section('styles')
    <style>
        .form-section {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }

        .form-header {
            border-bottom: 2px solid #f3f4f6;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .form-full-width {
            grid-column: span 2;
        }

        .input-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 1.5rem;
        }

        .input-group label {
            display: block;
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: #4b5563;
        }

        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            transition: border-color 0.15s ease-in-out;
            font-size: 1rem;
            color: #374151;
            margin-top: 0.5rem;
        }

        .form-control:focus {
            border-color: #3b82f6;
            outline: none;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
        }

        .btn-primary {
            background-color: #3b82f6;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            border: none;
            font-weight: 500;
            transition: background-color 0.15s ease-in-out;
        }

        .btn-primary:hover {
            background-color: #2563eb;
        }

        .btn-secondary {
            background-color: #9ca3af;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            border: none;
            font-weight: 500;
            margin-right: 1rem;
            transition: background-color 0.15s ease-in-out;
        }

        .btn-secondary:hover {
            background-color: #6b7280;
        }
    </style>
@endsection

@section('content')
    <div class="container mt-5">
        <div class="form-section">
            <div class="form-header">
                <h2 class="h4">Edit Event</h2>
                <p class="text-muted">Update the event details and settings below</p>
            </div>

            <form action="{{ route('event.update-event', ['event' => $event->id]) }}" method="POST">
                @csrf
                @method('POST')
                <input type="hidden" name="event_id" value="{{ $event->id }}">

                <div class="mb-3">
                    <label for="event_name" class="form-label">Event Name*</label>
                    <input type="text" id="event_name" name="event_name"
                        value="{{ old('event_name', $event->event_name) }}"
                        class="form-control @error('event_name') is-invalid @enderror"
                        placeholder="Enter event name">
                    @error('event_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="event_category_id" class="form-label">Event Category*</label>
                    <select id="event_category_id" name="event_category_id"
                        class="form-control @error('event_category_id') is-invalid @enderror">
                        <option value="">Select a category</option>
                        @foreach ($categories as $category)
                            <option value="{{ $category->id }}"
                                {{ old('event_category_id', $event->event_category_id) == $category->id ? 'selected' : '' }}>
                                {{ $category->category_name }}
                            </option>
                        @endforeach
                    </select>
                    @error('event_category_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="event_date" class="form-label">Event Date*</label>
                    <input type="date" id="event_date" name="event_date"
                        value="{{ old('event_date', $event->event_date) }}"
                        class="form-control @error('event_date') is-invalid @enderror">
                    @error('event_date')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="event_time" class="form-label">Event Time*</label>
                    <input type="time" id="event_time" name="event_time"
                        value="{{ old('event_time', $event->event_time) }}"
                        class="form-control @error('event_time') is-invalid @enderror">
                    @error('event_time')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="event_venue" class="form-label">Event Venue*</label>
                    <input type="text" id="event_venue" name="event_venue"
                        value="{{ old('event_venue', $event->event_venue) }}"
                        class="form-control @error('event_venue') is-invalid @enderror"
                        placeholder="Enter venue location">
                    @error('event_venue')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="event_description" class="form-label">Event Description</label>
                    <textarea id="event_description" name="event_description" rows="4"
                        class="form-control @error('event_description') is-invalid @enderror"
                        placeholder="Provide a detailed description of the event">{{ old('event_description', $event->event_description) }}</textarea>
                    @error('event_description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            tinymce.init({
                selector: '#event_description',
                plugins: 'lists link image table code help wordcount',
                toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                menubar: false,
                height: 200,
            });
        });
    </script>

@endsection