@extends('admin.layouts.main')

@section('title', 'Admin - Add Event') 

@section('content')
<div class="container">
    <div class="page-inner">
        <div class="page-header d-flex align-items-center justify-content-between">
            <div>
                <div class="d-flex align-items-center">
                    <h3 class="fw-bold mb-3">Events</h3>
                    <ul class="breadcrumbs mb-3 ml-3 d-flex align-items-center">
                        <li class="nav-home"><a href="#"><i class="icon-home"></i></a></li>
                        <li class="separator"><i class="icon-arrow-right"></i></li>
                        <li class="nav-item"><a href="#">Events</a></li>
                        <li class="separator">
                            <i class="icon-arrow-right"></i>
                        </li>
                        <li class="nav-item">
                            <a href="#">Update</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form class="saveData" action="{{ route('events.update',$event->id) }}" returnurl="{{ route('events.index') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <label for="title" class="form-label">Event Title<sup>*</sup></label>
                                                    <input type="text" class="form-control" name="event" placeholder="Enter Title" value="{{ $event->event }}">
                                                    <div class="event_error errorClass"></div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label for="title" class="form-label">Start Date<sup>*</sup></label>
                                                    <input type="date" class="form-control" name="start_date" placeholder="Enter Title" value="{{ $event->start_date }}">
                                                    <div class="start_date_error errorClass"></div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label for="title" class="form-label">End Date<sup>*</sup></label>
                                                    <input type="date" class="form-control" name="end_date" placeholder="Enter Title" value="{{ $event->end_date }}">
                                                    <div class="end_date_error errorClass"></div>
                                                </div>
                                            </div>      
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <label for="brief" class="form-label">Brief Excerpt<sup>*</sup></label>
                                                    <textarea class="form-control" name="brief">{{ $event->brief }}</textarea>
                                                    <div class="brief_error errorClass"></div>
                                                </div>
                                            </div>                                      
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <label for="description" class="form-label">Description<sup>*</sup></label>
                                                    <textarea class="form-control summernote" name="description">{{ $event->description }}</textarea>
                                                    <div class="description_error errorClass"></div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="meta_title" class="form-label">Meta Title</label>
                                                    <textarea class="form-control" name="meta_title">{{ $event->meta_title }}</textarea>
                                                    <div class="meta_title_error errorClass"></div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label for="meta_description" class="form-label">Meta Description</label>
                                                    <textarea class="form-control" name="meta_description">{{ $event->meta_description }}</textarea>
                                                    <div class="meta_description_error errorClass"></div>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label for="keywords" class="form-label">Keywords</label>
                                                    <textarea class="form-control" name="keywords">{{ $event->keywords }}</textarea>
                                                    <div class="keywords_error errorClass"></div>
                                                </div>
                                            </div> 
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-12 mb-3">
                                                    <label for="featured_image" class="form-label">Featured Image<sup>*</sup></label>
                                                    <input type="file" class="form-control" name="featured_image" onchange="previewImage(event)">
                                                    <div class="featured_image_error errorClass"></div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <div class="featured_image_preview">
                                                        <img id="imagePreview" src="{{ asset($event->featured_image)}}" alt="Featured Image" />
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label for="gallery" class="form-label">Gallery</label>
                                                    <input type="file" class="form-control" name="gallery[]" onchange="galleryImage(event)" multiple>
                                                    <div class="gallery_error errorClass"></div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <div class="gallery_image_preview">
                                                        @if(json_decode($event->gallery))
                                                        <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
                                                            <div class="carousel-inner" id="galleryPreviewContainer">
                                                            @foreach(json_decode($event->gallery) as $key => $image)
                                                                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                                                    <img src="{{ asset($image) }}" class="d-block w-100" alt="Gallery Image">
                                                                </div>
                                                            @endforeach
                                                            </div>
                                                            <!-- Carousel Controls -->
                                                            <a class="carousel-control-prev" href="#galleryCarousel" role="button" data-bs-slide="prev">
                                                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                                <span class="visually-hidden">Previous</span>
                                                            </a>
                                                            <a class="carousel-control-next" href="#galleryCarousel" role="button" data-bs-slide="next">
                                                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                <span class="visually-hidden">Next</span>
                                                            </a>
                                                        </div>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-md-12 mb-3">
                                                    <label for="status" class="form-label">Status</label>
                                                    <select class="form-control" name="status">
                                                        <option value="1" selected>Published</option>
                                                        <option value="2">Draft</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-secondary">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Include Summernote -->
<link href="{{ asset('admin/css/summernote-bs5.min.css') }}" rel="stylesheet">
<script src="{{ asset('admin/js/plugin/summernote/summernote-bs5.min.js') }}"></script>
<script src="{{ asset('admin/js/plugin/select2/select2.full.min.js') }}"></script>

<script>
    $(document).ready(function() {
        $('.summernote').summernote({
            placeholder: 'Write your content here...',
            tabsize: 2,
            height: 400,
            toolbar: [
                // customize the toolbar
                ['style', ['bold', 'italic', 'underline', 'clear']], // basic styles
                ['fontsize', ['fontsize']], // allow only font size change
                ['color', ['color']], // text color
                ['para', ['ul', 'ol', 'paragraph']], // paragraph formatting
                ['insert', ['link', 'picture', 'video']], // insert media
                ['view', ['fullscreen', 'codeview', 'help']] // view options
            ],
            fontNames: [], // disable font family options
        });
    });

    function previewImage(event) {
        const reader = new FileReader();
        reader.onload = function() {
            const preview = document.getElementById('imagePreview');
            preview.src = reader.result;
            preview.style.display = 'block';
        };
        reader.readAsDataURL(event.target.files[0]);
    }

    function galleryImage(event) {
        var files = event.target.files;
        var previewContainer = document.getElementById('galleryPreviewContainer');
        previewContainer.innerHTML = ''; // Clear previous images

        if (files.length > 0) {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var reader = new FileReader();

                reader.onload = function(e) {
                    var isActive = previewContainer.children.length === 0 ? 'active' : '';

                    var carouselItem = `
                        <div class="carousel-item ${isActive}">
                            <img src="${e.target.result}" class="d-block w-100" alt="Gallery Image">
                        </div>
                    `;
                    previewContainer.innerHTML += carouselItem;
                };

                reader.readAsDataURL(file);
            }
        }
    }


</script>

@endsection