@extends('layout.master')

@section('title', 'Tetapan Galeri')

@push('css')
<style type="text/css">
    .remove {
        color: #FF0000;
        vertical-align: middle;
        cursor: pointer;
    }

    .remove-badge {
        cursor: pointer;
        padding: 0.35em 0.5em;
        font-size: 0.75em;
        border-radius: 50%;
        transform: translate(25%, -25%);
    }

    .img-preview-container {
        position: relative;
        display: inline-block;
        margin: 5px;
    }

</style>
@endpush


@section('content')
<div class="page-header">
    <h5 class="page-title">Tetapan Galeri</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Laman Utama</a></li>
            <li class="breadcrumb-item">Pengurusan Web</li>
            <li class="breadcrumb-item active">Tetapan Galeri</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">

                    <div class="d-flex justify-content-end">
                        <a class="btn btn-primary" onClick="add()" href="javascript:void(0)"><i class="fa fa-plus me-2"></i> Tambah Galeri</a>
                    </div>
                    
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover nowrap w-100" id="the-table">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Bil</th>
                                    <th>Tahun</th>
                                    <th>Nama Galeri</th>
                                    <th>Paparan Thumbnail</th>
                                    <th>Dimuat Naik Oleh</th>
                                    <th>Tarikh Dimuat Naik</th>
                                    <th>Tindakan</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal Tambah Galeri -->
<div class="modal fade" id="the-modal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header">
                <h5 class="modal-title fw-bold" id="modal-title">Tambah Galeri</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <form action="javascript:void(0)" id="modal-form" name="modal-form" class="form-horizontal" method="POST" enctype="multipart/form-data" novalidate>
                    <input type="hidden" name="id" id="id" required>

                    <div class="row mb-4">
                        <label for="year" class="col-sm-4 col-form-label fw-semibold">Tahun <span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            <select class="form-select select-2" name="year" id="year" required>
                                @for($i=date('Y') + 15; $i>=2010; $i--)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>
                    
                    <div class="row mb-4">
                        <label for="name" class="col-sm-4 col-form-label fw-semibold">Nama Galeri <span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="name" name="name" placeholder="Masukkan nama galeri..." required>
                        </div>
                    </div>
                    
                    <div class="row mb-4">
                        <label for="thumbnail" class="col-sm-4 col-form-label fw-semibold">Paparan Thumbnail <span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            <input type="file" class="form-control" id="thumbnail" name="thumbnail" accept="image/png, image/jpg, image/jpeg">
                            <div class="form-text">Format: PNG, JPG, JPEG.</div>
                            <!-- Immediate preview container for thumbnail -->
                            <div id="thumbnail-preview" class="mt-2 d-none">
                                <img src="" alt="Thumbnail preview" class="img-thumbnail" style="max-height: 120px;">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-4">
                        <label for="doc_path" class="col-sm-4 col-form-label fw-semibold">Gambar Galeri <span class="text-danger">*</span></label>
                        <div class="col-sm-8">
                            <input type="file" class="form-control custom-file" id="doc_path" name="doc_path[]" accept="image/png, image/jpg, image/jpeg" required multiple>
                            <div class="form-text">Boleh pilih lebih dari satu gambar. (MAX 100MB sahaja)</div>
                        </div>
                    </div>
                    
                    <!-- Previews output -->
                    <div class="row mb-3">
                        <div class="col-sm-12">
                            <div id="doc-path-list" class="d-flex flex-wrap gap-2 justify-content-center"></div>
                            <div id="doc-path-edit" class="d-flex flex-wrap gap-2 justify-content-center"></div>
                        </div>
                    </div>
                </form>
            </div>
            
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-danger px-3" data-bs-dismiss="modal">Batal</button>
                <button class="btn btn-primary px-4" type="submit" form="modal-form" id="submit-button">Muat Naik</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Preview Gambar -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content" style="background-color: transparent; border: none;">
            <div class="modal-body text-center p-0">
                <img id="previewImage" src="" style="max-width: 100%; max-height: 80vh; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.5);">
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script type="text/javascript">

    $("#thumbnail").on("change", function() {
        const file = this.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function(event) {
                $('#thumbnail-preview').removeClass('d-none');
                $('#thumbnail-preview img').attr('src', event.target.result);
            }
            reader.readAsDataURL(file);
        } else {
            $('#thumbnail-preview').addClass('d-none');
            $('#thumbnail-preview img').attr('src', '');
        }
    });

    let dt = new DataTransfer();

    $("#doc_path").on("change", function() {
        dt = new DataTransfer();
        let input = document.getElementById('doc_path');
        let sizeMB = 100; 

        if (input.files.length > 0) {
            for (let i = 0; i < input.files.length; i++) {
                if(input.files[i].size > (sizeMB * 1024 * 1024)) {
                    Swal.fire('Ralat Size Imej', "Size imej " + input.files[i].name + " melebihi " + sizeMB + "MB", 'error');
                    input.value = "";
                    $('#doc-path-list').html('');
                    dt = new DataTransfer();
                    return;
                }
                dt.items.add(input.files[i]);
            }
        }

        renderPreviews();
    });

    function renderPreviews() {
        let output = $('#doc-path-list');
        output.empty();
        
        for (let i = 0; i < dt.files.length; i++) {
            let file = dt.files[i];
            let reader = new FileReader();
            reader.onload = function(event) {
                let html = `
                    <div class="img-preview-container border rounded p-1 mb-2 position-relative bg-white shadow-sm" style="width: 110px; height: 110px;">
                        <img src="${event.target.result}" class="img-thumbnail border-0 p-0 w-100 h-100" style="object-fit: cover;">
                        <span class="remove-new position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger remove-badge" data-index="${i}"><i class="fa fa-times" style="color: white; font-size: 10px;"></i></span>
                    </div>
                `;
                output.append(html);
            }
            reader.readAsDataURL(file);
        }
    }

    $(document).on('click', '.remove-new', function() {
        let index = $(this).data('index');
        let input = document.getElementById('doc_path');
        
        let newDt = new DataTransfer();
        for (let i = 0; i < dt.files.length; i++) {
            if (i !== index) {
                newDt.items.add(dt.files[i]);
            }
        }
        dt = newDt;
        input.files = dt.files;
        renderPreviews();
    });

    $(document).ready( function () {
        $('#the-table').DataTable({
            ...datatables_config,
            scrollX: true,
            processing: true,
            serverSide: true,
            ajax: {
                url : "{{ route('pengurusan_web.galeri') }}",
                data: {
                    type : "{{ request()->type }}"
                }, 
            },
            layout: {
                top2End: null //Untuk hide button pdf/csv
            },
            columns: [
                { data: null, title: '', width: '1%' },
                { data: 'DT_RowIndex', name: 'DT_RowIndex', width: '1%', className: 'text-center', orderable: false, searchable: false },
                { data: 'year', name: 'year', width: '1%',  className: 'text-center' },
                { data: 'name', name: 'name', render:DataTable.render.ellipsis() },
                { data: 'thumbnail', name: 'thumbnail' },
                { data: 'user_id', name: 'user_id' },
                { data: 'created_at', name: 'created_at' },
                { data: 'action', name: 'action', className: 'text-center', orderable: false },
            ],
            order: [[2, 'desc']]
        });
    });
     
    function add(){
        $('#modal-form').trigger("reset");
        $('#doc-path-list').empty();
        $('#doc-path-edit').empty();
        $('#thumbnail-preview').addClass('d-none');
        $('#thumbnail-preview img').attr('src', '');
        $('#modal-title').html("Tambah Galeri");
        $('#submit-button').html("Muat Naik");
        $('#the-modal').modal('show');
        $('#id').val('');
        dt = new DataTransfer();
    }  
         
    function edit_func(id){
        $.ajax({
            type:"POST",
            url: "{{ route('pengurusan_web.galeri_edit') }}",
            data: { id: id },
            dataType: 'json',
            success: function(result){
                $('#modal-form').trigger("reset");
                $('#doc-path-list').empty();
                $('#doc-path-edit').empty();
                $('#thumbnail-preview').addClass('d-none');
                $('#thumbnail-preview img').attr('src', '');
                $('#modal-title').html("Kemaskini Galeri");
                $('#submit-button').html("Kemaskini");
                $('#the-modal').modal('show');
                $('#id').val(result.id);
                $('#year').val(result.year).trigger('change');
                $('#name').val(result.name);
                dt = new DataTransfer();

                if (result.thumbnail) {
                    if (!result.thumbnail.includes('<img')) {
                        $('#thumbnail-preview').removeClass('d-none');
                        $('#thumbnail-preview img').attr('src', '{{ asset("storage") }}/' + result.thumbnail);
                    }
                }

                var output = $('#doc-path-edit');
                var html = "";
                var input = result.galeri_doc_path;
                
                if (input && input.length > 0) {
                    for (var i = 0; i < input.length; ++i) {
                        var fullPath = '{{ asset("storage") }}/' + input[i].doc_path;
                        html += `
                            <div class="pip img-preview-container border rounded p-1 mb-2 position-relative bg-white shadow-sm" title="${input[i].ori_name}" style="width: 110px; height: 110px;">
                                <img src="${fullPath}" class="img-thumbnail border-0 p-0 w-100 h-100" style="object-fit: cover;">
                                <span class="remove position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger remove-badge"><i class="fa fa-times" style="color: white; font-size: 10px;"></i></span>
                                <input type="hidden" name="doc_path_edit[]" value="${input[i].id}">
                            </div>
                        `;
                    }
                }
                output.html(html);

                $(".remove").click(function() {
                    $(this).closest(".pip").remove();
                });
            }
        });
    }  

    function padamGaleri(id, name) {
        sPadam(null, name, function() {
            $.ajax({
                type: "POST",
                url: "{{ route('pengurusan_web.galeri_delete') }}",
                data: { id : id },
                dataType: 'json',
                success: function(result) {
                    $('#the-table').DataTable().draw(false);
                    sSuccess('Galeri Telah Berjaya Dipadam');
                },
                error: function(data) {
                    sFail('Gagal memadam galeri. Sila cuba lagi.');
                }
            });
        });
    }
     
    $('#modal-form').submit(function(e) {
        e.preventDefault();
        
        var formData = new FormData(this);
        
        Swal.fire({
            title: 'Memuat naik...',
            text: 'Sila tunggu sebentar.',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            type:'POST',
            url: "{{ route('pengurusan_web.galeri_store')}}",
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            success: (data) => {
                $("#the-modal").modal('hide');
                $('#the-table').DataTable().draw(false);
                $("#submit-button").html('Muat Naik');
                $("#submit-button").attr("disabled", false);

                sSuccess('Galeri Telah Berjaya Ditambah/Dikemaskini');
            },
            error: function(data){
                sFail('Gagal memuat naik galeri. Sila cuba lagi.');
            }
        });
    });

    function previewImage(url) {
        $('#previewImage').attr('src', url);
        $('#imagePreviewModal').modal('show');
    }
</script>
@endsection