@extends('admin.admin_master')
@section('content-header', $page_header)
@section('content')

    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">Album</li>
                        </ol>
                    </div>
                    <div class="col-sm-6">
                        <span class="float-right"><a href="{{ route($link . '.index') }}"
                                class="btn btn-sm btn-fill btn-warning">{!! VIEWLIST_ICON !!}</a></span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="card card-primary">
                <div class="card-body">
                    <form method="POST" action="{{ route($link . '.store') }}" enctype="multipart/form-data" multiple>
                        <div class="row">
                            {{ csrf_field() }}
                            <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label" for="title_en">Title</label>
                                    <input type="text" class="form-control" id="title_en" name="title_en"
                                        value="{{ old('title_en') }}" required>
                                    @if ($errors->has('title_en'))
                                        <span class="help-block text-danger">
                                            <p class="text-danger">{{ $errors->first('title_en') }} </p>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="title_np">Title Nepali</label>
                                    <input type="text" class="form-control" id="title_np" name="title_np"
                                        value="{{ old('title_np') }}" required>
                                    @if ($errors->has('title_np'))
                                        <span class="help-block text-danger">
                                            <p class="text-danger">{{ $errors->first('title_np') }} </p>
                                        </span>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label for="gallery_images">Gallery Images</label>
                                    <div class="input-group">
                                        <input id="gallery_thumbnail" class="form-control" type="text"
                                            name="gallery_images[]" readonly required>
                                        <span class="input-group-btn">
                                            <a id="lfm_gallery" data-input="gallery_thumbnail" data-preview="holder_gallery"
                                                class="btn btn-primary">
                                                <i class="fa fa-picture-o"></i> Choose Gallery Images
                                            </a>
                                        </span>
                                    </div>
                                    <div id="holder_gallery" style="margin-top:15px;"></div>
                                    <div id="selected_gallery_images"></div>
                                    <!-- This is where selected images will be displayed -->
                                </div>

                                <div class="form-group">
                                    <label class="control-label" for="description_en">Description English</label>
                                    <textarea id="my-editor" class="tinymce" name="description_en" placeholder="Place some text here" required>{{ old('description_en') }}</textarea>
                                    @if ($errors->has('description_en'))
                                        <span class="help-block text-danger">
                                            <p class="text-danger">{{ $errors->first('description_en') }} </p>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="description_np">Description English</label>
                                    <textarea id="my-editor" class="tinymce" name="description_np" placeholder="Place some text here" required>{{ old('description_np') }}</textarea>
                                    @if ($errors->has('description_np'))
                                        <span class="help-block text-danger">
                                            <p class="text-danger">{{ $errors->first('description_np') }} </p>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                                <div class="form-group">
                                    <label class="control-label">Featured Image</label>
                                    <div id="holder" style="margin-top:15px;max-height:100px;"></div>
                                    <input id="thumbnail" class="form-control" type="text" name="image" readonly><br>
                                    <span class="input-group-btn">
                                        <a data-type="image" id="lfm-image" data-input="thumbnail" data-preview="holder"
                                            class="btn btn-info btn-sm fancy">
                                            <i class="fa fa-picture-o"></i> insert image
                                        </a>
                                        <a id="remove_image" class="btn btn-danger btn-sm fancy" onclick="removeImage()">
                                            <i class="fa fa-picture-o"></i> remove image
                                        </a>
                                    </span>
                                </div>
                                <div class="form-group">
                                    <label class="control-label" for="eventdate">Event Date<span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control datepicker" id="eventdate"
                                        name="eventdate" value="{{ old('eventdate') }}" autocomplete="off">
                                    @if ($errors->has('eventdate'))
                                        <span class="text-danger">
                                            <strong>{{ $errors->first('eventdate') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-group">
                                    <label for="status">Status</label>
                                    <select name="status" id="statusid" class="form-control">
                                        <option value="1">{!! PUBLISH !!}</option>
                                        <option value="0">{!! UNPUBLISH !!}</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <button type="submit" value="Submit" id="submit"
                                        class="btn btn-success btn-fill btn-sm "
                                        formnovalidate="formnovalidate">Submit</button>
                                    <button type="reset" class="btn btn-danger btn-fill btn-sm  resetbtn">Clear</button>
                                    <!-- <a href="{{ route('album.index') }}" class="btn btn-default btn-md">Back</a> -->
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
    @push('script')
        <script type="text/javascript">
            $('#lfm_gallery').filemanager('image', {
                multiple: true
            });

            // Handle the selection of multiple images
            $(document).on('change', '#gallery_thumbnail', function() {
                const imagePaths = $(this).val().split(',');
                let htmlContent = '';

                // Display selected images in the preview section and store paths in hidden inputs
                imagePaths.forEach(function(image, index) {
                    htmlContent += `
            <div class="form-group">
                <input type="hidden" name="gallery_images[]" value="${image}">
                <img src="${image}" style="margin-top:15px;max-height:100px;">
            </div>`;
                });
                $('#selected_gallery_images').html(htmlContent); // Change to the correct div ID
            });

            $('.datepicker').daterangepicker({
            singleDatePicker: true,
            showWeekNumbers: true,
            autoApply: true,
            showDropdowns: true,
            opens: "left",
            locale: {
                format: 'YYYY-MM-DD'
            }
        });

        </script>
    @endpush
@endsection