@extends('layouts.master')

<link rel="stylesheet" href="{{ asset('css/trumbowyg.min.css') }}">

@section('content')
<div class="container">
    <h1>Create Event</h1>
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

     @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
    
    <form action="{{ route('save-event') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
            <label for="city">City</label>
            <select id="city" name="city" class="form-control">
                <option value="">Select City</option>
                @foreach($cities as $city)
                    <option value="{{ $city->city }}">{{ $city->city }}</option>
                @endforeach
            </select>
        </div>

        <div class="form-group">
            <label for="list_id">List</label>
            <select id="list_id" name="lists_id" class="form-control">
                <option value="">Select List</option>
                <!-- Options will be dynamically populated based on selected city -->
            </select>
        </div>



        <div class="form-group">
            
            <label for="description" class="form-label">Description</label>
            <textarea class="form-control trumbowyg-editor" id="description" name="description" rows="5" required>{{ old('description') }}</textarea>
            
        </div>


        <div class="form-group">
            <label for="short_title">Short Title</label>
            <input type="text" id="short_title" name="short_title" class="form-control">
        </div>

        <div class="form-group">
            <label for="price">Price</label>
            <input type="text" id="price" name="price" class="form-control">
        </div>


        <div class="form-group">
            <label for="imageURL">Image</label>
            <input type="file" id="imageURL" name="imageURL" class="form-control" required>
        </div>


        <button type="submit" class="btn btn-primary">Save Event</button>
    </form>
</div>

<script>
    document.getElementById('city').addEventListener('change', function() {
        var city = this.value;
        var listDropdown = document.getElementById('list_id');
        listDropdown.innerHTML = '<option value="">Select List</option>'; // Clear previous options

        if (city) {
            fetch(`/getListsByCity/${city}`)
                .then(response => response.json())
                .then(data => {
                    data.forEach(list => {
                        var option = document.createElement('option');
                        option.value = list.id;
                        option.text = list.title;
                        listDropdown.appendChild(option);
                    });
                })
                .catch(error => console.error('Error fetching lists:', error));
        }
    });
</script>
@endsection
    <script src="{{ asset('js/jquery-3.7.1.min.js') }}"></script>  
    <script src="{{ asset('js/trumbowyg.min.js') }}"></script>
    <script>
        $.trumbowyg.svgPath = '/css/icons.svg';
    </script>

    <script>
        $('#description').trumbowyg({
            btns: [['strong', 'em',], ['insertImage']],
            autogrow: true
        });
    </script>
    <script>
        $(document).ready(function() {
            $.noConflict();
            $('#description').trumbowyg();
        });
    </script>