@extends('app')
@section('title_header', 'Gambar Masjid')
@section('header', 'Gambar Masjid')
@push('styles')
@endpush
@section('content')
    <section>
        <div class="card card-outline card-info">
            <div class="card-header">
                <button type="button" class="btn btn-info btn-sm float-right" data-toggle="modal"
                    data-target="#modal-create">CREATE</button>
            </div>
            <div class="card-body">
                <table id="table_data" class="table table-bordered table-striped table-sm">
                    <thead>
                        <tr class="text-sm">
                            <th style="width: 14px">#</th>
                            <th>Image</th>
                            <th>Masjid</th>
                            <th>Category</th>
                            <th style="width: 100px">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </section>
    <div class="modal fade" id="modal-create">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold"><span id="title"></span> Masjid</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="createImageMasjidForm">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="input-masjid" class="form-label">Masjid</label>
                            <select name="id_masjid" id="input-masjid" class="form-control">

                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="input-category" class="form-label">Category</label>
                            <select name="category" id="input-category" class="form-control">
                                <option selected>Pilih kategori</option>
                                <option value="primary">Primary</option>
                                <option value="galeri">Galeri</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="input-image" class="form-label">Image</label>
                            <input type="file" name="image" id="input-image" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="saveImageMasjidBtn">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modal-update">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold"><span id="title"></span> Masjid</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updateImageMasjidForm"> {{-- Changed ID for update form --}}
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="update-masjid" class="form-label">Masjid</label> {{-- Ensure label matches ID --}}
                            <select name="id_masjid" id="update-masjid" class="form-control">

                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="update-category" class="form-label">Category</label> {{-- Ensure label matches ID --}}
                            <select name="category" id="update-category" class="form-control">
                                <option selected>Pilih kategori</option>
                                <option value="primary">Primary</option>
                                <option value="galeri">Galeri</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="update-image" class="form-label">Image</label> {{-- Changed ID for update image input --}}
                            <input type="file" name="image" id="update-image" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="saveImageMasjidBtn">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            const dataTable = $("#table_data").DataTable({
                "processing": true,
                "serverSide": false,
                "responsive": true,
                "lengthChange": true,
                "autoWidth": false,
                "ajax": {
                    "url": "/api/masjid/image",
                    "type": "GET",
                    "headers": {
                        "Authorization": "Bearer " + token
                    },
                    "dataSrc": function(json) {
                        if (json.success && json.data) {
                            return json.data;
                        } else {
                            toastr.error(json.message || 'Terjadi kesalahan saat memuat data masjid.',
                                'Gagal Memuat Data');
                            console.error("API Error (DataTable):", json.message);
                            return [];
                        }
                    },
                    "error": function(xhr, error, thrown) {
                        toastr.error(
                            'Tidak dapat terhubung ke server atau terjadi kesalahan lain. Silakan coba lagi.',
                            'Gagal Memuat Data');
                        console.error("AJAX Error (DataTable):", thrown, xhr);
                    }
                },
                "columns": [{
                        "data": null,
                        "render": function(data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    {
                        "data": "link",
                        "render": function(data, type, row) {
                            return `<img src="${data}" alt="Image" width="50" height="auto" />`;
                        }
                    },
                    {
                        "data": "masjid.nama_mesjid"
                    },
                    {
                        "data": "category"
                    },
                    {
                        "data": null,
                        "render": function(data, type, row) {
                            return `
                                <button class="btn btn-sm btn-success edit-btn rounded-md shadow-sm mr-1" data-id="${row.id}"><i class="fas fa-pen"></i> EDIT</button>
                                <button class="btn btn-sm btn-danger delete-btn rounded-md shadow-sm" data-id="${row.id}"><i class="fas fa-trash"></i> DELETE</button>
                            `;
                        },
                        "orderable": false,
                        "searchable": false
                    }
                ],

                "buttons": ["copy", "csv", "excel", "pdf", "print"]
            });

            dataTable.buttons().container().appendTo('#table_data_wrapper .col-md-6:eq(0)');

            // Function to load Masjid options into a specified select element
            function loadMasjidOptions(selectElementId) {
                $.ajax({
                    url: "/api/masjid",
                    type: "GET",
                    headers: {
                        "Authorization": "Bearer " + token
                    },
                    success: function(response) {
                        if (response.success && response.data) {
                            let options = `<option value="">Pilih Masjid</option>`;
                            response.data.forEach(masjid => {
                                options +=
                                    `<option value="${masjid.id}">${masjid.nama_mesjid}</option>`;
                            });
                            $(selectElementId).html(options);
                        } else {
                            toastr.warning("Gagal memuat daftar masjid.");
                        }
                    },
                    error: function() {
                        toastr.error("Terjadi kesalahan saat mengambil data masjid.");
                    }
                });
            }

            $('#table_data').on('click', '.delete-btn', function() {
                const id = $(this).data('id');

                if (confirm('Yakin ingin menghapus gambar ini?')) {
                    $.ajax({
                        url: `/api/masjid/image/${id}`,
                        type: 'DELETE',
                        headers: {
                            "Authorization": "Bearer " + token,
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            toastr.success("Image berhasil dihapus.");
                            $("#table_data").DataTable().ajax.reload();
                        },
                        error: function(xhr) {
                            toastr.error("Gagal menghapus image.");
                            console.error(xhr.responseText);
                        }
                    });
                }
            });

            $('#table_data').on('click', '.edit-btn', function() {
                const id = $(this).data('id');
                $('#modal-update').modal('show');

                // Load Masjid options specifically for the update modal's select element
                loadMasjidOptions("#update-masjid");

                $.ajax({
                    url: `/api/masjid/image?id_image_masjid=${id}`,
                    type: "GET",
                    headers: {
                        "Authorization": "Bearer " + token
                    },
                    success: function(response) {
                        if (response.success && response.data) {
                            const data = response.data;
                            // Set the selected value for masjid dropdown
                            $('#modal-update #update-masjid').val(data.id_masjid);
                            $('#modal-update #update-category').val(data.category);
                            $('#modal-update').data('id', id);
                        } else {
                            toastr.error("Gagal memuat data.");
                        }
                    },
                    error: function(xhr) {
                        toastr.error("Terjadi kesalahan saat mengambil data.");
                    }
                });
            });

            // Handle Update
            $('#updateImageMasjidForm').on('submit', function(e) { // Changed form ID here
                e.preventDefault();

                const form = this;
                const formData = new FormData(form);
                const id = $('#modal-update').data('id'); // Get the ID from modal data

                // You might need to append a method for PUT/PATCH if your backend expects it
                // formData.append('_method', 'PUT'); // or 'PATCH'

                $.ajax({
                    url: `/api/masjid/image/update/${id}`, // Ensure your API route handles PUT/POST for update
                    type: "POST", // Can be PUT/PATCH if your backend supports it, otherwise POST with _method
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        "Authorization": "Bearer " + token,
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success("Image berhasil diperbarui.");
                            $('#modal-update').modal('hide');
                            form.reset();
                            $("#table_data").DataTable().ajax.reload();
                        } else {
                            toastr.error(response.message || "Gagal memperbarui image.");
                        }
                    },
                    error: function(xhr) {
                        const res = xhr.responseJSON;
                        if (res && res.errors) {
                            let errors = Object.values(res.errors).flat().join('<br>');
                            toastr.error(errors);
                        } else {
                            toastr.error("Gagal memperbarui data. Coba lagi.");
                        }
                    }
                });
            });

            $('#modal-create').on('shown.bs.modal', function() {
                loadMasjidOptions("#input-masjid"); // Call with the specific ID for create modal
            });

            $('#createImageMasjidForm').on('submit', function(e) {
                e.preventDefault();

                const form = this;
                const formData = new FormData(form);

                $.ajax({
                    url: "/api/masjid/image/store",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        "Authorization": "Bearer " + token,
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success("Image berhasil ditambahkan.");
                            $('#modal-create').modal('hide');
                            $('#createImageMasjidForm')[0].reset();
                            $("#table_data").DataTable().ajax.reload();
                        } else {
                            toastr.error(response.message || "Gagal menambahkan image.");
                        }
                    },
                    error: function(xhr) {
                        const res = xhr.responseJSON;
                        if (res && res.errors) {
                            let errors = Object.values(res.errors).flat().join('<br>');
                            toastr.error(errors);
                        } else {
                            toastr.error("Gagal menyimpan data. Coba lagi.");
                        }
                    }
                });
            });
        });
    </script>
@endpush