@extends('layouts.backoffice.index', ['title' => 'Kategori Katalog'])

@section('main')
    <section class="section">
        <div class="card shadow">
            <div class="card-header">
                <div class="clearfix w-100">
                    <div class="float-left">
                        <h5><b>Kategori Katalog</b></h5>
                    </div>
                    <div class="float-right">
                        <a href="" data-toggle="modal" data-target="#modal-add" class="btn btn-primary"><i
                                class="fa fa-plus"></i> Tambah Data</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col">No</th>
                                <th scope="col">Nama</th>
                                <th scope="col">Gambar</th>
                                <th scope="col">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($categories as $category)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $category->name }}</td>
                                    <td><img src="{{ asset('storage/' . $category->image_path) }}"
                                            style="width: 300px; height: auto;" class=""></td>
                                    <td>
                                        <a href="#" data-toggle="modal" data-target="#modal-edit"
                                            class="btn btn-warning btn-edit" data-id="{{ $category->id }}"
                                            data-name="{{ $category->name }}"
                                            data-image="{{ asset('storage') }}/{{ $category->image_path }}">
                                            <i class="fa fa-edit"></i> Edit
                                        </a>

                                        <button type="button" class="btn btn-danger btn-delete" data-toggle="modal"
                                            data-target="#modal-delete" data-id="{{ $category->id }}"><i
                                                class="fa fa-trash"></i> Hapus</button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="modal-delete">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body bg-warning">
                    <div class="alert alert-warning alert-has-icon p-0">
                        <div class="alert-icon"><i class="fa fa-trash"></i></div>
                        <div class="alert-body">
                            <div class="alert-title">Konfirmasi Hapus Data</div>
                            Apakah anda yakin ingin menghapus data ini ? <br> data yang sudah dihapus tidak dapat
                            dikembalikan
                        </div>
                    </div>
                </div>
                <form method="POST" id="form-delete">
                    @method('DELETE')
                    @csrf
                    <div class="modal-footer">
                        <div class="row">
                            <div class="col-md-6">
                                <button type="button" class="btn btn-danger btn-block" data-dismiss="modal"><i
                                        class="fa fa-times"></i> Batal Hapus</button>
                            </div>
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-success btn-block"><i class="fa fa-check"></i> Hapus
                                    Data</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <form method="POST" action="{{ route('backoffice.category.catalog.store') }}" enctype="multipart/form-data"
        class="modal fade" id="modal-add">

        @csrf
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white pb-4">
                    <h5 class="modal-title">Tambah Data</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="">Nama <span class="text-danger"><b>*</b></span></label>
                        <input type="text" name="name" class="form-control" required>
                        <input type="text" name="status" hidden>
                    </div>
                    <div class="form-group">
                        <label><b>Gambar</b> <span class="text-danger">*</span></label><br>
                        <small>Ukuran yang direkomendasikan 1920 x 1080 px atau gambar dengan format landscape</small><br>
                        <div class="upload-area">
                            <input type="file" id="image-add" name="image" class="upload-input" accept="image/*" required>
                            <div class="upload-message">
                                <i class="fas fa-cloud-upload-alt fa-3x text-primary"></i>
                                <p class="mt-2 mb-0">Klik atau tarik foto ke sini</p>
                                <small class="text-muted">Format: jpg, png, jpeg</small>
                            </div>
                        </div>
                        <div id="preview-image-add" class="mt-3">
                        </div>
                        <small class="text-muted d-block mt-1">Foto ini akan tampil pada sampul kategori</small>
                    </div>

                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <button type="button" class="btn btn-danger mb-3 btn-block" data-dismiss="modal"><i
                                    class="fa fa-times"></i> Batal</button>
                        </div>
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-success mb-3 btn-block" id="btn-add-submit"><i
                                    class="fa fa-save"></i>
                                Simpan</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="modal fade" id="modal-edit">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <form method="POST" id="form-edit" enctype="multipart/form-data">
                    @method('PUT')
                    @csrf
                    <div class="modal-header bg-primary text-white pb-4">
                        <h5 class="modal-title">Edit Data</h5>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="form-group">
                            <label>Nama <span class="text-danger">*</span></label></label>
                            <input type="text" class="form-control" name="name" id="edit-name" required>
                        </div>
                        <div class="form-group">
                            <label><b> Gambar </b> <span class="text-danger">*</span></label></label>
                            <small>Ukuran yang direkomendasikan 1920 x 1080 px atau gambar dengan format landscape</small><br>
                            <div class="preview-single-image mb-2" id="preview-image-edit">
                            </div>
                            <div class="upload-area">
                                <input type="file" id="image-edit" name="image" class="upload-input"
                                    accept="image/*">
                                <div class="upload-message">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-primary"></i>
                                    <p class="mt-2 mb-0">Ganti Gambar</p>
                                </div>
                            </div>
                            <small class="text-muted d-block mt-1">Foto ini akan tampil pada sampul kategori</small>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger btn-block" data-dismiss="modal">
                            <i class="fa fa-times"></i> Batal
                        </button>
                        <button type="submit" class="btn btn-success btn-block mt-0" id="btn-edit-submit">
                            <i class="fa fa-save"></i> Simpan
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.bootstrap4.min.css">
    <style>
        /* Styling Preview Image */
        .preview-single-image img {
            max-width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }


        .gallery-img {
            width: 100%;
            height: 200px;
            /* ubah sesuai kebutuhan */
            overflow: hidden;
        }

        .gallery-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: 5px;
            /* opsional */
        }
    </style>
    <style>
        /* Styling Custom Input File agar terlihat seperti Dropzone */
        .upload-area {
            position: relative;
            width: 100%;
            min-height: 150px;
            border: 2px dashed #6777ef;
            /* Warna primary theme */
            border-radius: 10px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: all 0.3s ease;
            overflow: hidden;
            cursor: pointer;
        }

        .upload-area:hover {
            background-color: #eef0ff;
            border-color: #4c59d6;
        }

        /* Sembunyikan input file asli tapi buat memenuhi area agar bisa diklik */
        .upload-input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 10;
        }

        .upload-message {
            z-index: 1;
            pointer-events: none;
            /* Agar klik tembus ke input */
        }

        /* Styling Preview Image */
        .preview-single img {
            max-width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .preview-gallery-item {
            position: relative;
            margin-bottom: 15px;
        }

        .preview-gallery-item img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #ddd;
        }

        .fade-in {
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>
@endpush

@push('scripts')
    <!-- DATATABLES JS -->
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/responsive.bootstrap4.min.js"></script>

    {{-- CKEDITOR --}}
    <script src="https://cdn.ckeditor.com/ckeditor5/41.2.0/classic/ckeditor.js"></script>

    <script>
        function handleFileSelect(event, previewId, isMultiple = false) {
            const files = event.target.files;
            const previewContainer = document.getElementById(previewId);

            previewContainer.innerHTML = '';

            if (files.length === 0) return;

            if (isMultiple) {
                Array.from(files).forEach(file => {
                    if (file.type.match('image.*')) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const colDiv = document.createElement('div');
                            colDiv.className = 'col-4 preview-gallery-item fade-in';
                            colDiv.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
                            previewContainer.appendChild(colDiv);
                        }
                        reader.readAsDataURL(file);
                    }
                });
            } else {
                const file = files[0];
                if (file.type.match('image.*')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const div = document.createElement('div');
                        div.className = 'preview-single fade-in';
                        div.innerHTML = `<img src="${e.target.result}" alt="Preview image">`;
                        previewContainer.appendChild(div);
                    }
                    reader.readAsDataURL(file);
                }
            }
        }


        document.getElementById('image-add').addEventListener('change', function(e) {
            handleFileSelect(e, 'preview-image-add', false);
        });

        document.getElementById('image-edit').addEventListener('change', function(e) {
            handleFileSelect(e, 'preview-image-edit', false);
        });
    </script>

    <script>
        $(document).on('click', '.btn-delete', function() {
            let id = $(this).data('id');
            let url = "{{ route('backoffice.category.catalog.destroy', ':id') }}";
            url = url.replace(':id', id);
            $('#form-delete').attr('action', url);
        });
        $(document).on('click', '.btn-edit', function() {
            let id = $(this).data('id');
            let name = $(this).data('name');
            let image = $(this).data('image');
            $('#preview-image-edit').html(`
            <div class='preview-single-image fade-in'>
                <img src="${image}">
                </div>
            `);
            let url = "{{ route('backoffice.category.catalog.update', ':id') }}";
            url = url.replace(':id', id);

            $('#form-edit').attr('action', url);
            $('#edit-name').val(name);
        });
    </script>


    <script>
        // ============================
        // DATATABLE
        // ============================
        ClassicEditor
        $(function() {
            $(".table").DataTable({
                responsive: true,
                autoWidth: false,
                pageLength: 10,
                language: {
                    "lengthMenu": "Tampilkan _MENU_ data",
                    "zeroRecords": "Tidak ada data",
                    "info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    "infoEmpty": "Tidak ada data tersedia",
                    "search": "Cari:",
                    "paginate": {
                        "previous": "Sebelumnya",
                        "next": "Selanjutnya"
                    }
                }
            });
        });
    </script>
@endpush