@extends('layouts.dashboard')

@section('title', 'Kelola Homepage Special Section')
@section('main')
@push('style')
        <!-- Tambah DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet" />
@endpush
<div class="pcoded-inner-content">
    <!-- Main-body start -->
    <div class="main-body">
        <div class="page-wrapper">
            <!-- Page-body start -->
            <div class="page-body">
                <!-- Hover table card start -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                        <h4>@yield('title')</h4>
                        <span>Silakan kelola data <code>@yield('title')</code> sesuai kebutuhan bisnis Anda</span>
                        </div>
                        <div>
                            <button id="createBtn" class="btn btn-success btn-sm" onclick="getModal('createModal')">
                                <i class="bi bi-plus me-2"></i>Tambah
                            </button>
                        </div>
                    </div>
                    <div class="card-block table-border-style">
                        <div class="table-responsive">
                            <table id="tbl_list" class="table table-hover">
                                <thead>
                                    <tr>
                                        <th width="5%">No</th>
                                        <th width="10%">Foto</th>
                                        <th>Menu</th>
                                        <th>Judul</th>
                                        <th>Sub Judul</th>
                                        <th>Deskripsi</th>
                                        <th width="15%">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 
@include('admin.homepage.home-special.create')
<!-- Modal Cropper (Bootstrap 4) -->
<div class="modal fade" id="cropperModal" tabindex="-1" role="dialog" aria-labelledby="cropperModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cropperModalLabel">Potong Gambar</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Tutup">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="margin: 0.5rem 1rem 0.5rem 0; overflow: hidden;">
                <img id="modal-image-preview" class="img-fluid" style="max-height: 360px; max-width: 100%; height: auto;" />
            </div>
            <div class="modal-footer">
                <button type="button" id="crop-modal-button" class="btn btn-success">Crop Gambar</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
<script>
    $(document).ready(function () {
        datatableCall('tbl_list', '{{ route('dashboard.home-specials.index') }}', [{
            data: 'DT_RowIndex',
            name: 'DT_RowIndex'
        },
        {
            data: 'image',
            name: 'image'
        },
        {
            data: 'tab_title',
            name: 'tab_title'
        },
        {
            data: 'title',
            name: 'title'
        },
        {
            data: 'subtitle',
            name: 'subtitle'
        },
        {
            data: 'description',
            name: 'description'
        },
        {
            data: 'action',
            name: 'action',
        },
        ]);

        $("#saveData").submit(function(e) {
            setButtonLoadingState("#saveData .btn.btn-primary", true);
            e.preventDefault();
            const kode = $("#saveData #id").val();
            let url = "{{ route('dashboard.home-specials.store') }}";
            const data = new FormData(this);

            if (kode !== "") {
                data.append("_method", "PUT");
                url = `/dashboard/home-specials/${kode}`;
            }

            const successCallback = function(response) {
                // $('#saveData #image').parent().find(".dropify-clear").trigger('click');
                setButtonLoadingState("#saveData .btn.btn-primary", false);
                handleSuccess(response, "tbl_list", "createModal");
            };

            const errorCallback = function(error) {
                setButtonLoadingState("#saveData .btn.btn-primary", false);
                handleError(error, 'dataTableId', 'modalId');
                handleValidationErrors(error, "saveData", ["tab_title", "title", "subtitle", "description", "image"]);
            };
            
            ajaxCall(url, "POST", data, successCallback, errorCallback);
        });

        cropperImage({
            inputSelectors: ['#image'],
            previewTarget: {
                '#image': 'previewImage',
            },
            ratio: {
                '#image': 1
            }
        });
    });
</script>
@endpush