@extends('panel.layouts.master')

@section('content')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Post-->
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <div class="card mb-5 mb-xl-10">
                <!--begin::Card header-->
                <div class="card-header border-0">
                    <!--begin::Card title-->
                    <div class="card-title m-0">
                        <h3 class="fw-bolder m-0">Slider</h3>
                    </div>
                    <!--end::Card title-->
                </div>
                <!--begin::Card header-->
                <!--begin::Content-->
                <div id="kt_account_profile_details" class="collapse show">
                    <!--begin::Card body-->
                    <div class="card-body border-top p-9">
                        <div class="d-flex flex-column gap-5 gap-md-7 m-10">
                            <!--begin::Form-->
                            <form class="form" action="#" method="post">
                                @csrf
                                <!--begin::Dropzone-->
                                <div class="dropzone" id="dropzone-upload"
                                    data-url="{{ route('admin.sliders.create') }}">
                                    <!--begin::Message-->
                                    <div class="dz-message needsclick">
                                        <i class="ki-duotone ki-file-up fs-3x text-primary"><span
                                                class="path1"></span><span class="path2"></span></i>

                                        <!--begin::Info-->
                                        <div class="ms-4">
                                            <h3 class="fs-5 fw-bold text-gray-900 mb-1">Görsel yüklemek için
                                                buraya tıklayın ve dosyayı sürükleyin.</h3>
                                            <span class="fs-7 fw-semibold text-gray-500">Tek seferde en fazla 10
                                                dosya yükleyebilirsiniz.</span>
                                        </div>
                                        <!--end::Info-->
                                    </div>
                                </div>
                                <!--end::Dropzone-->
                            </form>
                            <!--end::Form-->
                        </div>
                        <table class="table align-middle table-row-dashed fs-6 gy-5 basic-datatable" id="slider-table">
                            <thead>
                                <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                    <th class="min-w-125px text-center"></th>
                                    <th class="min-w-125px text-start">Görsel</th>
                                    <th class="min-w-125px text-center">İşlemler</th>
                                </tr>
                            </thead>
                            <tbody class="fw-semibold text-gray-600 draggable-zone" data-url="{{ route('admin.sliders.update_rank') }}">
                                @include('panel.sliders.partials.slider-table') <!-- Tablonun gövdesi burada yüklenecek -->
                            </tbody>
                        </table>
                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Content-->
            </div>

        </div>
        <!--end::Container-->
    </div>
    <!--end::Post-->
</div>

@endsection
@push('javascript')
<script src="{{ asset('panel/js/remove.js') }}"></script>
<script src="{{ asset('panel/js/drag-and-drop.js') }}"></script>
<script>
    var url = $('#dropzone-upload').data('url');
    var token = $('meta[name="csrf-token"]').attr('content');
    var myDropzone = new Dropzone("#dropzone-upload", {
        url: url,
        headers: {
            'X-CSRF-TOKEN': token
        },
        paramName: "file",
        maxFiles: 10,
        maxFilesize: 10, // MB
        addRemoveLinks: true,
        accept: function(file, done) {
            done();
        },
        init: function() {
            var dropzoneInstance = this;

            this.on("success", function(file, response) {
                // Yükleme işlemi başarılı olduğunda sayfayı yenile
                toastr.success('Resim başarıyla yüklendi.');
                setTimeout(() => {
                    location.reload();
                }, 1000); // 1 saniye bekleme (isteğe bağlı)
            });

            this.on("error", function(file, response) {
                file.previewElement.children[3].innerText = response.message || 'Bir hata oluştu';
                toastr.error(response.message || 'Yükleme sırasında bir hata oluştu');
            });
        }
    });
</script>
@endpush
@push('style')
@endpush