@extends('app')
@section('title_header', 'Senarai Masjid')
@section('header', 'Senarai 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-responsive">
                    <thead>
                        <tr class="text-sm">
                            <th>#</th>
                            <th>Nama Mesjid</th>
                            <th>Address</th>
                            <th>Daerah</th>
                            {{-- <th>Lokasi</th> --}}
                            <th>Tabungan</th>
                            <th>Acara</th>
                            <th>No. Telp</th>
                            <th>AJK Masjid</th>
                            <th>Email Mesjid</th>
                            <th>Tahun Buka</th>
                            <th>Capacity</th>
                            <th>Status</th>
                            <th>Shalat Jumaat</th>
                            <th>Latitude</th>
                            <th>Longitude</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <!-- Combined Modal for Create/Edit -->
    <div class="modal fade" id="modal-create">
        <div class="modal-dialog modal-lg">
            <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="masjidForm">
                    <input type="hidden" id="masjid_id" name="masjid_id" value="">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="nama_mesjid" class="form-label">Nama Masjid</label>
                                    <input type="text" id="nama_mesjid" name="nama_mesjid" class="form-control" required
                                        placeholder="Nama Masjid">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="daerah" class="form-label">Daerah</label>
                                    <input type="text" id="daerah" name="daerah" class="form-control" required
                                        placeholder="Daerah">
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="address" class="form-label">Alamat</label>
                            <textarea name="address" class="form-control" id="address" rows="2"></textarea>
                        </div>

                        <div class="form-group row">
                            <label for="longitude" class="col-sm-12 col-form-label">Lokasi</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="latitude" placeholder="Latitude"
                                    name="latitude" required>
                            </div>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="longitude" placeholder="Longitude"
                                    name="longitude" required>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="tahun_buka" class="form-label">Tahun Buka</label>
                                    <input type="date" class="form-control" placeholder="Tahun Pembukaan"
                                        name="tahun_buka" id="tahun_buka" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="capacity" class="form-label">Kapasitas</label>
                                    <div class="input-group">
                                        <input type="number" id="capacity" name="capacity" class="form-control" required
                                            placeholder="Kapasitas">
                                        <div class="input-group-append">
                                            <span class="input-group-text">Jemaah</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="no_telp" class="form-label">No. Telepon</label>
                                    <input type="number" id="no_telp" name="no_telp" class="form-control" required
                                        placeholder="Nomor Telepon">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="email_mesjid" class="form-label">Email Masjid</label>
                                    <input type="email" id="email_mesjid" name="email_mesjid" class="form-control"
                                        required placeholder="Email Masjid">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="code" class="form-label">Kode Masjid</label>
                                    <input type="text" id="code" name="code" class="form-control" required
                                        placeholder="Silakan masukkan kode masjid">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="status" class="form-label">Status:</label>
                                    <select class="form-control" id="status" name="status" required>
                                        <option value="1">Aktif</option>
                                        <option value="0">Tidak Aktif</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="acara" class="form-label">Acara</label>
                                    <input type="text" id="acara" name="acara" class="form-control"
                                        placeholder="Contoh: Maulid, Kajian, dll.">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="ajk_masjid" class="form-label">AJK Masjid</label>
                                    <div>
                                        <select style="width: 100%" class="select-ajk" name="ajk_masjid[]"
                                            id="ajk_masjid" multiple="multiple">
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="is_prayer_jumaah">Apakah ini shalat jumaat?</label>
                                    <select name="is_prayer_jumaah" id="is_prayer_jumaah" class="form-control">
                                        <option disabled selected>-- Pilih jawaban --</option>
                                        <option value="1">Ya</option>
                                        <option value="0">Tidak</option>
                                    </select>
                                </div>
                            </div>
                        </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="saveMasjidBtn">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // Inisialisasi Select2 dan Toastr
        const initializePlugins = () => {
            $('.select-ajk').select2();
            toastr.options = {
                closeButton: true,
                debug: false,
                newestOnTop: false,
                progressBar: true,
                positionClass: 'toast-top-right',
                preventDuplicates: false,
                onclick: null,
                showDuration: 300,
                hideDuration: 1000,
                timeOut: 5000,
                extendedTimeOut: 1000,
                showEasing: 'swing',
                hideEasing: 'linear',
                showMethod: 'fadeIn',
                hideMethod: 'fadeOut'
            };
        };

        // Konfigurasi DataTable
        const initializeDataTable = () => {
            const dataTable = $('#table_data').DataTable({
                processing: true,
                serverSide: true,
                responsive: false,
                lengthChange: true,
                autoWidth: false,
                ajax: {
                    url: '/api/masjid',
                    type: 'GET',
                    headers: { Authorization: `Bearer ${token}` },
                    data: (d) => {
                        const urlParams = new URLSearchParams(window.location.search);
                        const status = urlParams.get('status');
                        if (status) d.status = status;
                    },
                    error: (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: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        render: (data, type, row, meta) => meta.row + meta.settings._iDisplayStart + 1,
                        orderable: false,
                        searchable: false
                    },
                    { data: 'nama_mesjid', name: 'nama_mesjid' },
                    { data: 'address', name: 'address' },
                    { data: 'daerah', name: 'daerah' },
                    { data: 'tabungan', name: 'tabungan', render: (data) => data ?? 0 },
                    { data: 'acara', name: 'acara', defaultContent: '-' },
                    { data: 'no_telp', name: 'no_telp' },
                    {
                        data: 'ajk_masjid',
                        name: 'ajk_masjid',
                        render: (data) => Array.isArray(data) && data.length > 0
                            ? data.map(ajk => ajk.nama_ajk).join(', ')
                            : '-',
                        orderable: false,
                        searchable: false
                    },
                    { data: 'email_mesjid', name: 'email_mesjid' },
                    {
                        data: 'tahun_buka',
                        name: 'tahun_buka',
                        render: (data) => data ? new Date(data).toLocaleDateString('id-ID') : '-'
                    },
                    { data: 'capacity', name: 'capacity' },
                    {
                        data: 'status',
                        name: 'status',
                        render: (data) => data
                            ? '<span class="badge badge-success">Aktif</span>'
                            : '<span class="badge badge-danger">Tidak Aktif</span>'
                    },
                    {
                        data: 'is_prayer_jumaah',
                        name: 'is_prayer_jumaah',
                        render: (data) => parseInt(data) === 1
                            ? '<span class="text-success">Betul</span>'
                            : '<span class="text-danger">Tidak</span>'
                    },
                    { data: 'latitude', name: 'latitude' },
                    { data: 'longitude', name: 'longitude' },
                    {
                        data: 'action',
                        name: 'action',
                        render: (data, type, { id }) => `
                            <button class="btn btn-sm btn-success edit-btn rounded-md shadow-sm mr-1" data-id="${id}"><i class="fas fa-pen"></i></button>
                            <button class="btn btn-sm btn-danger delete-btn rounded-md shadow-sm" data-id="${id}"><i class="fas fa-trash"></i></button>
                        `,
                        orderable: false,
                        searchable: false
                    }
                ],
                buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
            });

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

        // Fetch data AJK untuk Select2
        const fetchAjkData = (selectElement, selectedIds = []) => {
            $.ajax({
                url: '/api/masjid/ajk',
                type: 'GET',
                headers: { Authorization: `Bearer ${token}` },
                success: ({ success, data }) => {
                    if (success && Array.isArray(data)) {
                        selectElement.empty();
                        data.forEach(({ id, nama_ajk, jabatan }) => {
                            selectElement.append(new Option(`${nama_ajk} (${jabatan || '-'})`, id));
                        });
                        if (selectedIds.length) selectElement.val(selectedIds).trigger('change');
                        else selectElement.trigger('change');
                    } else {
                        toastr.warning('Tidak ada data AJK ditemukan.');
                    }
                },
                error: (xhr) => {
                    toastr.error('Gagal mengambil data AJK dari server.');
                    console.error(xhr.responseText);
                }
            });
        };

        // Reset form untuk create mode
        const resetFormForCreate = () => {
            $('#masjidForm')[0].reset();
            $('#masjid_id').val('');
            $('#title').text('Tambah');
            $('#acara').val('');
            $('#is_prayer_jumaah').val('');
            
            // Reset Select2
            $('.select-ajk').select2('destroy').empty();
            $('.select-ajk').select2();
            fetchAjkData($('.select-ajk'));
        };

        // Populate form untuk edit mode
        const populateFormForEdit = (masjidData) => {
            const masjid = Array.isArray(masjidData) ? masjidData[0] : masjidData;
            
            $('#masjid_id').val(masjid.id);
            $('#title').text('Edit');
            $('#nama_mesjid').val(masjid.nama_mesjid);
            $('#daerah').val(masjid.daerah);
            $('#address').val(masjid.address);
            $('#longitude').val(masjid.longitude);
            $('#latitude').val(masjid.latitude);
            $('#tahun_buka').val(
                masjid.tahun_buka ? new Date(masjid.tahun_buka).toISOString().split('T')[0] : ''
            );
            $('#capacity').val(masjid.capacity);
            $('#no_telp').val(masjid.no_telp);
            $('#email_mesjid').val(masjid.email_mesjid);
            $('#code').val(masjid.code);
            $('#status').val(masjid.status ? 1 : 0);
            $('#acara').val(masjid.acara);
            $('#is_prayer_jumaah').val(masjid.is_prayer_jumaah?.toString() ?? '');

            // Reset dan populate Select2 untuk AJK
            $('.select-ajk').select2('destroy').empty();
            $('.select-ajk').select2();
            fetchAjkData($('.select-ajk'), masjid.ajk_masjid?.map(ajk => ajk.id) || []);
        };

        // Handle CREATE button click
        const handleCreateButton = () => {
            $('button[data-target="#modal-create"]').on('click', () => {
                resetFormForCreate();
            });
        };

        // Handle EDIT button click
        const handleEditButton = () => {
            $('#table_data').on('click', '.edit-btn', function () {
                const id = $(this).data('id');
                console.log('Edit button clicked, ID:', id);
                
                if (!id || isNaN(id)) {
                    toastr.error('Invalid mosque ID.', 'Error');
                    return;
                }

                $('#modal-create').modal('show');

                $.ajax({
                    url: '/api/masjid',
                    type: 'GET',
                    data: { id_masjid: id },
                    headers: { Authorization: `Bearer ${token}` },
                    success: ({ success, data }) => {
                        console.log('API Response:', data);
                        if (success && data) {
                            const masjid = Array.isArray(data) ? data[0] : data;
                            if (!masjid.id) {
                                toastr.error('Mosque ID not found in response.', 'Error');
                                $('#modal-create').modal('hide');
                                return;
                            }
                            populateFormForEdit(data);
                        } else {
                            toastr.error(data.message || 'Failed to fetch mosque data.', 'Error');
                            $('#modal-create').modal('hide');
                        }
                    },
                    error: (xhr) => {
                        toastr.error('Error fetching mosque data.', 'Error');
                        console.error(xhr.responseText);
                        $('#modal-create').modal('hide');
                    }
                });
            });
        };

        // Handle DELETE button
        const handleDeleteButton = (dataTable) => {
            $('#table_data').on('click', '.delete-btn', function () {
                const id = $(this).data('id');
                if (confirm('Are you sure you want to delete this mosque? This action cannot be undone.')) {
                    $.ajax({
                        url: `/api/masjid/destroy/${id}`,
                        type: 'DELETE',
                        headers: {
                            Authorization: `Bearer ${token}`,
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: ({ success, message }) => {
                            if (success) {
                                toastr.success(message || 'Mosque deleted successfully.', 'Success');
                                dataTable.ajax.reload();
                            } else {
                                toastr.error(message || 'Failed to delete mosque.', 'Failed');
                            }
                        },
                        error: (xhr) => {
                            toastr.error('An error occurred while deleting the mosque.', 'Error');
                            console.error(xhr.responseText);
                        }
                    });
                }
            });
        };

        // Handle form submission (Create/Update)
        const handleFormSubmission = (dataTable) => {
            $('#masjidForm').on('submit', function(e) {
                e.preventDefault();
                
                const masjidId = $('#masjid_id').val();
                const isEdit = masjidId && masjidId.trim() !== '';
                const formData = $(this).serialize();
                
                const url = isEdit ? `/api/masjid/update/${masjidId}` : '/api/masjid/store';
                const method = 'POST';
                const successMessage = isEdit ? 'Mosque data updated successfully.' : 'Data masjid berhasil ditambahkan.';
                
                console.log('Form submission:', { isEdit, masjidId, url });
                
                $.ajax({
                    url: url,
                    method: method,
                    data: formData,
                    headers: {
                        Authorization: `Bearer ${token}`,
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    success: ({ success, message }) => {
                        if (success) {
                            toastr.success(message || successMessage, 'Sukses');
                            $('#modal-create').modal('hide');
                            dataTable.ajax.reload();
                        } else {
                            toastr.error(message || 'Gagal menyimpan data.', 'Gagal');
                        }
                    },
                    error: ({ status, responseJSON }) => {
                        if (status === 422 && responseJSON.errors) {
                            const messages = Object.values(responseJSON.errors).flat().join('<br>');
                            toastr.error(messages, 'Validasi Gagal');
                        } else if (status === 404) {
                            toastr.error('Mosque not found.', 'Error');
                        } else {
                            toastr.error(responseJSON?.message || 'Terjadi kesalahan saat menyimpan data.', 'Error');
                            console.error(responseJSON);
                        }
                    }
                });
            });
        };

        // Inisialisasi aplikasi
        $(document).ready(() => {
            initializePlugins();
            const dataTable = initializeDataTable();
            handleCreateButton();
            handleEditButton();
            handleDeleteButton(dataTable);
            handleFormSubmission(dataTable);
        });
    </script>
@endpush