@extends('layouts.master')

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

@section('content')
<div class="container">
    <h1>Edit Event</h1>

     @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

    <form action="{{ route('update-event', encrypt($event->id)) }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
            <label for="lists_id" class="form-label">List</label>
            <select id="lists_id" name="lists_id" class="form-control" required>
                @foreach($lists as $list)
                    <option value="{{ $list->id }}" {{ $event->lists_id == $list->id ? 'selected' : '' }}>{{ $list->title }}</option>
                @endforeach
            </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>{{ $event->description }}</textarea>
            
        </div>



        <div class="form-group">
            <label for="short_title" class="form-label">Short Title</label>
            <input type="text" id="short_title" name="short_title" class="form-control" value="{{ $event->short_title }}" required>
        </div>
        <div class="form-group">
            <label for="price" class="form-label">Price</label>
            <input type="text" id="price" name="price" class="form-control" value="{{ $event->price }}" required>
        </div>
        <div class="form-group">
            <label for="imageURL">Image</label>
            <input type="file" id="imageURL" name="imageURL" class="form-control">
            @if($event->imageURL)
                <img src="{{ $event->imageURL }}" alt="Event Image" style="width: 100px; margin-top: 10px;">
            @endif
        </div>
        <button type="submit" class="btn btn-primary">Update</button>
    </form>
</div>
@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>