@extends('layouts.master')

@push('head-css')
    <style>
        .dropify-wrapper, .dropify-preview, .dropify-render img {
            background-color: var(--sidebar-bg) !important;
        }

        #carousel-image-gallery .card .img-holder {
            height: 150px;
            overflow: hidden;
        }

        #carousel-image-gallery .card .img-holder img {
            height: 100%;
            object-fit: cover;
            object-position: top;
        }

        .note-group-select-from-files {
            display: none;
        }
        .select2-container .select2-selection--single {
            height: 39px;
        }
        .select2-container--default .select2-selection--single {
            background-color: #fff;
            border: 1px solid #d2d1d1;
            border-radius: 4px;
        }


        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #444;
            line-height: 37px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 26px;
            position: absolute;
            top: 5px;
            right: 1px;
            width: 20px;
        }
    </style>
@endpush

@section('content')

    <div class="row">
        <div class="col-12 ">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                          
                                <div id="front-theme">
                                    <section class="mt-3 mb-3">
                                        <h6>@lang('modules.theme.subheadings.carouselImages')</h6>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <form id="theme-carousel-form">
                                                    @csrf
                                                    <div class="form-group">
                                                        <div class="card">
                                                            <div class="card-body">
                                                                <input type="file" id="carousel-images" name="images[]"
                                                                       accept=".png,.jpg,.jpeg" class="dropify"
                                                                       data-allowed-formats="landscape"
                                                                       multiple
                                                                />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        <h6 class="text-danger">@lang('modules.theme.recommendedResolutionNote')</h6>
                                        <div id="carousel-image-gallery" class="row">
                                            @include('partials.carousel_images')
                                        </div>
                                    </section>
                                </div>
                           
                        </div>
                    </div>
                    <!-- /.tab-content -->
                </div><!-- /.card-body -->
            </div>
            <!-- /.nav-tabs-custom -->
        </div>
    </div>
@endsection

@push('footer-js')
    <script>

         $('.dropify').dropify({
            messages: {
                default: '@lang("app.dragDrop")',
                replace: '@lang("app.dragDropReplace")',
                remove: '@lang("app.remove")',
                error: '@lang('app.largeFile')'
            }
        });

        $('#carousel-images').change(function (e) {
            $.easyAjax({
                url: '{{route('admin.front-theme-settings.store')}}',
                container: '#theme-carousel-form',
                type: "POST",
                file: true,
                success: function (response) {
                    $('#carousel-image-gallery').html(response.view);
                }
            });
        });

        $('body').on('click', '.delete-carousel-row', function () {
            var id = $(this).attr('id');
            swal({
                icon: "warning",
                buttons: ["@lang('app.cancel')", "@lang('app.ok')"],
                dangerMode: true,
                title: "@lang('errors.areYouSure')",
                text: "@lang('errors.deleteWarning')",
            })
                .then((willDelete) => {
                    if (willDelete) {
                        var url = "{{ route('admin.front-theme-settings.destroy',':id') }}";
                        url = url.replace(':id', id);

                        var token = "{{ csrf_token() }}";

                        $.easyAjax({
                            type: 'POST',
                            url: url,
                            data: {'_token': token, '_method': 'DELETE'},
                            success: function (response) {
                                if (response.status == "success") {
                                    $.unblockUI();
                                    $('#carousel-image-gallery').html(response.view);
                                }
                            }
                        });
                    }
                });
        });

    </script>
    
@endpush