@extends('layouts.admin')
@section('content')
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row">
                <div class="col-12 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">New Film Festival</h4>
                            <form class="forms-sample" action="{{ route('admin.filmfestival.store') }}" method="POST" id="filmfestival-form" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-xl-12">
                                        <div class="form-group">
                                            <label for="name">Festival Name</label>
                                            <input type="text" class="form-control" id="name" placeholder="Name" name="name" required>
                                            @error('name')
                                                <span class="text-danger">{{$message}}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="logo">Logo</label>
                                            <input type="file" name="logo" class="dropify" id="logo" accept="image/*">
                                            @error('logo')
                                                <span class="text-danger">{{$message}}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="banner">Banner</label>
                                            <input type="file" name="banner" class="dropify" id="banner" accept="image/*">
                                        </div>
                                    </div>

                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="name">Event Date</label>
                                            <input type="date" class="form-control" id="event_date" placeholder="Event Date" name="event_date">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="price">Price</label>
                                            <input type="number" class="form-control" id="price" placeholder="Price" name="price">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="opening_date">Opening Date</label>
                                            <input type="date" class="form-control" id="opening_date" placeholder="Opening Date" name="opening_date">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="last_date">End Date</label>
                                            <input type="date" class="form-control" id="last_date" placeholder="Last Date" name="last_date">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="organizer_type">Organizer Type</label>
                                            <input type="text" class="form-control" id="organizer_type" placeholder="Organizer Type" name="organizer_type">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="organizer_name">Organizer Name</label>
                                            <input type="text" class="form-control" id="organizer_name" placeholder="Organizer Name" name="organizer_name">
                                        </div>
                                    </div>


                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="running_year">Running Year</label>
                                            <input type="text" class="form-control" id="running_year" placeholder="Running Year" name="running_year">
                                        </div>
                                    </div>

                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="email">Email</label>
                                            <input type="email" class="form-control" id="email" placeholder="Email" name="email">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="address">Address</label>
                                            <input type="text" class="form-control" id="address" placeholder="Address" name="address">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="city">City</label>
                                            <input type="text" class="form-control" id="city" placeholder="City" name="city">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="state">State</label>
                                            <input type="text" class="form-control" id="state" placeholder="State" name="state">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="address">Country</label>
                                            <select name="country_id" id="country_id" class="form-control">
                                                <option value="">Select Country</option>
                                                @foreach ($country as $co)
                                                    <option value="{{ $co->id }}">{{ $co->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="website">Website</label>
                                            <input type="text" class="form-control" id="website" placeholder="https://" name="website">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="facebook">Facebook</label>
                                            <input type="text" class="form-control" id="facebook" placeholder="https://" name="facebook">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="twitter">Twitter</label>
                                            <input type="text" class="form-control" id="twitter" placeholder="https://" name="twitter">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="instagram">Instagram</label>
                                            <input type="text" class="form-control" id="instagram" placeholder="https://" name="instagram">
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="event_type">Event Type</label>
                                            <input type="text" class="form-control" id="event_type" placeholder="Event Type" name="event_type">
                                        </div>
                                    </div>

                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="desciption">Description</label>
                                            <textarea type="text" class="form-control" id="desciption" name="description"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="awards">Awards</label>
                                            <textarea type="text" class="form-control" id="awards" name="awards"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-xl-6">
                                        <div class="form-group">
                                            <label for="rules">Rules</label>
                                            <textarea type="text" class="form-control" id="rules" name="rules"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-5 text-center">
                                    <button type="submit" class="btn btn-primary mr-2">Submit</button>
                                    <a href="{{ route('admin.filmfestival.index') }}" class="btn btn-light">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    {{-- <script>
        $("#filmfestival-form").validate({
            rules: {
                name: "required",
                logo: {
                    required: 'Please select a Logo',
                    accept: 'Please select a valid Logo'
                }
            },
            messages: {
                name: "Please enter Name",
                Logo: {
                    required: true,
                    accept: "jpg,png,jpeg"
                }
            },
            errorPlacement: function(error, element) {
                error.insertAfter(element);
            },
            submitHandler: function(form) {
                form.submit();
            }
        });
    </script> --}}
    <script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
    <script>
        ClassicEditor.create(document.querySelector('#desciption')).catch(error => {
            console.error("error1",error);
        });
        ClassicEditor.create(document.querySelector('#awards')).catch(error => {
            console.error("error2",error);
        });
        ClassicEditor.create(document.querySelector('#rules')).catch(error => {
            console.error("error3",error);
        });
    </script>
@endsection