@extends('admin.master_layout')
@section('title')
    <title>{{ __('Property Slider') }}</title>
@endsection
@section('admin-content')
    <div class="main-content">
        <section class="section">
            <x-admin.breadcrumb title="{{ __('Property Slider') }}" :list="[
                __('Dashboard') => route('admin.dashboard'),
                __('Edit Property') => route('admin.property.edit', ['property' => $property->id, 'code' => allLanguages()->first()->code]),
                __('Property Slider') => '#',
            ]" />

            <div class="section-body">
                <div class="mt-4 row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between">
                                <x-admin.form-title :text="__('Update Slider')" />
                                <div>
                                    <x-admin.back-button :href="route('admin.property.edit', ['property' => $property->id,'code' => allLanguages()->first()->code])" />
                                </div>
                            </div>
                            <div class="card-body">
                                <form id="dropzoneForm" method="post"
                                    action="{{ route('admin.upload-property-slider', $property->id) }}"
                                    enctype="multipart/form-data" class="dropzone">
                                    @csrf
                                    @method('PUT')
                                </form>
                                <div class="mt-3 text-center">
                                    @adminCan('property.slider.upload')
                                    <button type="button" class="btn btn-success" id="submit-all"><i
                                            class="fas fa-upload"></i>
                                        {{ __('Upload All') }}
                                    </button>
                                    @endadminCan
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <x-admin.form-title :text="__('Slider Images')" />
                            </div>
                            <div class="card-body">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>{{ __('SN') }}</th>
                                            <th>{{ __('Preview') }}</th>
                                            <th class="text-center">{{ __('Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($slider_images as $item)
                                            <tr>
                                                <td>{{ $loop->index + 1 }}</td>
                                                <td>
                                                    @if ($item->image)
                                                        <img class="img-thumbnail" src="{{ asset($item->image) }}" alt="" height="100px" width="100px">
                                                    @endif
                                                </td>

                                                <td class="text-center">
                                                    @adminCan('property.slider.delete')
                                                    <div>
                                                        <x-admin.delete-button :id="$item->id " onclick="deleteData" />
                                                    </div>
                                                    @endadminCan
                                                </td>
                                            </tr>
                                        @empty
                                            <x-empty-table :name="__('Slider Image')" route="admin.property.index" create="no"
                                                :message="__('No data found!')" colspan="4">
                                            </x-empty-table>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <x-admin.delete-modal />
@endsection


@push('css')
<link rel="stylesheet" href="{{ asset('backend/dropzone/dropzone.min.css') }}">
    <style>
        .dropzone {
            background: white;
            border-radius: 5px;
            border: 2px dashed rgb(0, 135, 247);
            border-image: none;
            max-width: 805px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>

@endpush


@push('js')
<script src="{{ asset('backend/dropzone/dropzone.min.js') }}"></script>

<script type="text/javascript">


    function deleteData(id) {
        $("#deleteForm").attr("action", "{{ url('/admin/delete-property-slider/') }}" + "/" + id);
    }

    Dropzone.options.dropzoneForm = {
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 10,
        thumbnailHeight: 200,
        thumbnailWidth: 200,
        maxFilesize: 3,
        filesizeBase: 1000,
        addRemoveLinks: true,
        renameFile: function(file) {
            var dt = new Date();
            var time = dt.getTime();
            return time + file.name;
        },
        acceptedFiles: ".jpeg,.jpg,.png,.gif,.webp",
        init: function() {
            myDropzone = this;
            $('#submit-all').on('click', function(e) {
                e.preventDefault();
                myDropzone.processQueue();
            });

            this.on("complete", function() {
                if (this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0) {
                    var _this = this;
                    _this.removeAllFiles();
                }
            });
        },
        success: function(file, response) {
            window.location.href = response.url;
            toastr.success(response.message, 'Success');
        },
    };
</script>
@endpush