@extends('layouts.backoffice.index', ['title' => 'Galeri Foto'])

@section('main')
    <section class="section">
        <div class="card shadow">
            <div class="card-header">
                <div class="clearfix w-100">
                    <div class="float-left">
                        <h5><b>Galeri Foto</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="row">
                    <form method="POST" action="{{ route('backoffice.gallery.search') }}"
                        class="col-md-12 row align-items-center mb-3">
                        @csrf
                        <div class="col-md-5">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-search"></i></span>
                                </div>
                                <input type="text" name="search_param" class="form-control" placeholder="Cari Judul">
                            </div>
                        </div>
                        <div class="col-md-1 pl-0">
                            <button type="submit" class="btn btn-outline-primary"><i class="fa fa-search"></i> Cari</a>
                        </div>
                    </form>
                    @if (count($gallery) == 0)
                        <div class="col-md-12 form-group">
                            <div class="alert alert-warning text-center">
                                <h4>Data Tidak Ditemukan</h4>
                            </div>
                        </div>
                    @endif
                    @foreach ($gallery as $item)
                        <div class="col-md-4 col-sm-6">
                            <div class="card shadow-sm">
                                <div class="gallery-img" style="width: 100%; height: 200px; overflow: hidden;">
                                    <img src="{{ asset('storage/' . $item->thumbnail_image_path) }}" alt=""
                                        style="width: 100%; height: 100%; object-fit: cover;">
                                </div>
                                <div class="card-body p-3">
                                    <div class="gallery-title">
                                        <label>{{ $item->title ?? '' }}</label>
                                    </div>
                                    @if ($item->status == 'publish')
                                        <label class="badge badge-success">Publish</label>
                                    @else
                                        <label class="badge badge-danger">Draft</label>
                                    @endif
                                    <hr>
                                    <div class="">
                                        <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#modal-edit"
                                            data-thumbnail="{{ asset('storage/' . $item->thumbnail_image_path) }}"
                                            data-gallery-images="{{ json_encode($item->list_photos) }}"
                                            data-id="{{ $item->id }}" data-title="{{ $item->title }}"
                                            data-category-id="{{ $item->category_id }}" data-status="{{ $item->status }}"><i
                                                class="fas fa-edit"></i> Edit </button>
                                        <button class="btn btn-danger btn-sm" data-toggle="modal"
                                            data-target="#modal-delete" data-id="{{ $item->id }}"
                                            data-title="{{ $item->title }}"><i class="fas fa-trash"></i> Hapus </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach


                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="modal-add">
        <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>
                <form id="form-add" method="POST" action="{{ route('backoffice.gallery.store') }}"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="alert alert-primary">
                                <h6>Pemberitahuan :</h6>
                                <ul>
                                    <li>Ukuran gambar yang direkomendasikan adalah 1920 x 1080 px atau gambar dengan format
                                        landscape</li>
                                    <li>Masukan dengan tanda bintang merah wajib diisi / dipilih</li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="">Judul <span class="text-danger"><b>*</b></span></label>
                            <input type="text" class="form-control" name="title" required>
                        </div>
                        <div class="form-group p-0 mb-4">
                            <label class=" p-0 m-0 mb-2">Kategori <span class="text-danger"><b>*</b></span></label>
                            <select name="category_id" class="form-control" id="category-selector-add" required>
                                <option value="">Pilih Kategori</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><b>Thumbnail</b> <span class="text-danger">*</span></label>
                                    <div class="upload-area">
                                        <input type="file" id="thumbnail-add" name="thumbnail" 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-thumbnail-add" class="mt-3">
                                    </div>
                                    <small class="text-muted d-block mt-1">Foto ini akan tampil pertama (Cover)</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><b>Galeri foto</b> <span class="text-danger">*</span></label>
                                    <div class="upload-area">
                                        <input type="file" id="gallery-add" multiple name="gallery[]"
                                            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-gallery-add" class="mt-3 row">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Status <span class="text-danger"><b>*</b></span></label>
                            <div class="selectgroup w-100">
                                <label class="selectgroup-item">
                                    <input type="radio" name="status" value="2" class="selectgroup-input"
                                        required>
                                    <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-check"></i>
                                        Publish</span>
                                </label>
                                <label class="selectgroup-item">
                                    <input type="radio" name="status" value="1" class="selectgroup-input"
                                        checked="" required>
                                    <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-times"></i>
                                        Draft</span>
                                </label>
                            </div>
                            <small>Jika status <b>Publish</b> akan tampil dihalaman utama</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">
                                    <i class="fa fa-save"></i>
                                    Simpan
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-edit">
        <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">Edit Data</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form id="form-edit" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="edit-id" name="id">
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="alert alert-primary">
                                <h6>Pemberitahuan :</h6>
                                <ul>
                                    <li>Ukuran gambar yang direkomendasikan adalah 1920 x 1080 px atau gambar dengan format
                                        landscape</li>
                                    <li>Masukan dengan tanda bintang merah wajib diisi / dipilih</li>
                                </ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="">Judul <span class="text-danger"><b>*</b></span></label>
                            <input type="text" class="form-control" id="edit-title" name="title" required>
                        </div>
                        <div class="form-group p-0 mb-4">
                            <label class=" p-0 m-0 mb-2">Kategori <span class="text-danger"><b>*</b></span></label>
                            <select name="category_id" class="form-control" id="category-selector-edit" required>
                                <option value="">Pilih Kategori</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><b>Thumbnail</b> <span class="text-danger"><b>*</b></span></label>
                                    <div class="upload-area">
                                        <input type="file" id="thumbnail-edit" name="thumbnail" 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 Thumbnail</p>
                                        </div>
                                    </div>
                                    <div id="preview-thumbnail-edit" class="mt-3"></div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><b>Foto Galeri</b> <span class="text-danger"><b>*</b></span></label>
                                    <div class="upload-area">
                                        <input type="file" id="gallery-edit" multiple name="gallery[]"
                                            class="upload-input" accept="image/*" >
                                        <div class="upload-message">
                                            <i class="fas fa-images fa-3x text-info"></i>
                                            <p class="mt-2 mb-0">Ganti Foto</p>
                                        </div>
                                    </div>
                                    <div id="preview-gallery-edit" class="row mt-3"></div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Status <span class="text-danger"><b>*</b></span></label>
                            <div class="selectgroup w-100">
                                <label class="selectgroup-item">
                                    <input type="radio" name="status" value="2" id="edit-status-publish"
                                        class="selectgroup-input" required>
                                    <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-check"></i>
                                        Publish</span>
                                </label>
                                <label class="selectgroup-item">
                                    <input type="radio" name="status" value="1" id="edit-status-draft"
                                        class="selectgroup-input" required>
                                    <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-times"></i>
                                        Draft</span>
                                </label>
                            </div>
                            <small>Jika status <b>Publish</b> akan tampil dihalaman utama</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"><i class="fa fa-save"></i>
                                    Simpan</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-delete">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white pb-4">
                    <h5 class="modal-title">Hapus Data</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form id="form-delete" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="modal-body">
                        <p>Apakah Anda yakin ingin menghapus galeri <strong id="delete-title"></strong>?</p>
                        <p class="text-muted">Tindakan ini tidak dapat dibatalkan.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-danger">Hapus</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />

    <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')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
    <script>
        $(document).ready(function() {
            $('#modal-add').on('shown.bs.modal', function() {
                $('#category-selector-add').select2({
                    dropdownParent: $('#modal-add')
                });
            });
            $('#modal-edit').on('shown.bs.modal', function() {
                $('#category-selector-edit').select2({
                    dropdownParent: $('#modal-edit')
                });
            });
        });
    </script>
    <script>
        $('#modal-edit').on('show.bs.modal', function(e) {
            const button = $(e.relatedTarget);
            const id = button.data('id');
            const title = button.data('title');
            const status = button.data('status');
            const category_id = button.data('category-id');
            const thumbUrl = button.data('thumbnail');
            $('#preview-thumbnail-edit').html(`
            <div class='preview-single fade-in'>
        
                <img src="${thumbUrl}">
                </div>
            `);
            const galleryData = button.data('gallery-images'); // Ini otomatis jadi array of object karena jQuery
            const previewGallery = $('#preview-gallery-edit');

            // Kosongkan preview lama sebelum looping
            previewGallery.empty();

            if (galleryData && galleryData.length > 0) {
                galleryData.forEach(function(item) {
                    const imgPath = "{{ asset('storage') }}/" + item.photo;

                    const html = `
                <div class="col-4 preview-gallery-item fade-in">
                    <img src="${imgPath}">
                    </div>
            `;
                    previewGallery.append(html);
                });
            } else {
                previewGallery.html('<div class="col-12"><p class="text-muted">Tidak ada foto galeri.</p></div>');
            }
            $('#edit-id').val(id);
            $('#edit-title').val(title);
            $('#category-selector-edit').val(category_id).trigger('change');

            if (status === 'publish') {
                $('#edit-status-publish').prop('checked', true);
            } else {
                $('#edit-status-draft').prop('checked', true);
            }

            const baseUrl = "{{ route('backoffice.gallery.index') }}".replace('/gallery', '');
            const action = baseUrl + '/gallery/update/' + id;
            $('#form-edit').attr('action', action);
        });

        $('#modal-delete').on('show.bs.modal', function(e) {
            const button = $(e.relatedTarget);
            const id = button.data('id');
            const title = button.data('title');

            $('#delete-title').text(title);

            const baseUrl = "{{ route('backoffice.gallery.index') }}".replace('/gallery', '');
            const action = baseUrl + '/gallery/destroy/' + id;
            $('#form-delete').attr('action', action);
        });

        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 Thumbnail">`;
                        previewContainer.appendChild(div);
                    }
                    reader.readAsDataURL(file);
                }
            }
        }


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

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

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

        document.getElementById('gallery-edit').addEventListener('change', function(e) {
            handleFileSelect(e, 'preview-gallery-edit', true);
        });
    </script>
@endpush