@extends('admin.layouts.app')
@section('title') Admin Dashboard
@endsection
@section('section')

    <div class="container">
        <h2>Create Banner</h2>
        <a href="{{route('sliders.list')}}"> <button type="button" class="btn btn-primary btn-sm float-right mb-5">
                Back
            </button>
        </a>
        <form method="post" action="{{ route('sliders.add') }}" enctype="multipart/form-data">
            @csrf

            <div class="form-group">
                <label for="slug">Slug:</label>
                <select name="slug" class="form-control" required>
                    <option value="Home">Home</option>
                    <option value="Shows">Shows</option>
                    <option value="Classes">Classes</option>
                    <option value="Rentals">Rentals</option>
                    <option value="Faqs">Faqs</option>
                    <option value="Gallery">Gallery</option>
                    <option value="Reviews">Reviews</option>
                    <option value="Contact">Contact</option>
                    <option value="Donate">Donate</option>

                </select>
            </div>
            <div class="form-group pt-4">
                <div class="card border-dark">
                    <h5 class="card-header bg-dark text-white">Slider Image
                        <button type="button" class="btn btn-sm btn-outline-light float-right addImage">
                            <i class="la la-fw la-plus"></i>Add More Image
                        </button>
                    </h5>
                    <div class="card-body">
                        <div class="row addedField ml-5">

                            <div class="card shadow"
                                 style="width:300px;margin-right:20px;margin-bottom:15px;">
                                <div class="image-upload">
                                    <div class="avatar-preview">
                                        <img src="{{ asset('admin/dist/img/placeholder.png') }}"
                                             class=" card-img-top profilePicPreview"
                                             id="productFirstGalleryImagePreview"
                                             style="height:200px;">
                                    </div>
                                    <div class="card-body">
                                        <div class="avatar-edit my-2">
                                            <label for="productFirstGalleryImageInput"
                                                   class=" btn btn-success btn-lg w-100">@lang('Upload Image')</label>

                                        </div>
                                        <input type="file" class="profilePicUpload"
                                               name="product_gallery_images[]"
                                               id="productFirstGalleryImageInput"
                                               accept=".png, .jpg, .jpeg, .webp"style="display:none;">

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>


            <div class="text-center mt-5">

                <input type="submit" value="Submit" id="submit_btn" class="btn btn-primary w-50 mb-5">
            </div>
        </form>
    </div>
@endsection
@section('script')

<script>
    $('.addImage').on('click', function () {
        var randomId = Math.floor(Math.random() * 10000);




        var html = `
              <div class ="image-data">
         <div class="card shadow" style="width:300px;margin-right:20px;margin-bottom:15px;">
            <div class="image-upload">
                <div class="avatar-preview">
                    <img src="{{asset('admin/dist/img/placeholder.png')}}" class=" card-img-top profilePicPreview" id="profile-pic-show-${randomId}" style="height:200px;">
                </div>
                <div class="card-body">
                    <div class="avatar-edit my-2">
                        <label for="file-uploads-${randomId}" class=" btn btn-success btn-lg w-100">@lang('Upload Image')</label>
                        <button class="btn btn-danger btn-lg removeBtn w-100" type="button">
                            @lang("Remove Image")
        </button>
    </div>
    <input type="file" class="profilePicUpload" name="add_images[]" id="file-uploads-${randomId}" data-id="${randomId}" accept=".png, .jpg, .jpeg"style="display:none;">

                </div>
            </div>
            </div>
        </div>`;


        $('.addedField').append(html);

        //NEW FILE UPLOAD WORK

        $(`#file-uploads-${randomId}`).on('change', function () {
            var input = this;
            var previewId = `#profile-pic-show-${randomId}`;

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $(previewId).attr('src', e.target.result);
                    // Set the data URL in the hidden input for form submission
                    $(`#cropped-image-${randomId}`).val(e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        });

        $(document).on('click', '.removeBtn', function () {
            $(this).closest('div.image-data').remove();
        });

    });
</script>
@endsection