@extends('app') {{-- Ensure 'app' is your correct base layout --}}
@section('title_header', 'Ajk Masjid')
@section('header', 'Ajk Masjid')
@push('styles')
    {{-- Add any specific styles for this page here if needed --}}
@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-ajk-create">CREATE</button>
            </div>
            <div class="card-body">
                <table id="table_data_ajk" class="table table-bordered table-striped">
                    <thead>
                        <tr class="text-sm">
                            <th>#</th>
                            <th>Photo</th>
                            <th>AJK Name</th>
                            <th>Department</th>
                            <th>Masjid Name</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    {{-- Modals for Create and Update AJK --}}
    <div class="modal fade" id="modal-ajk-create">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold">Create AJK</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="createAjkForm" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="create-nama_ajk" class="form-label">AJK Name</label>
                            <input type="text" name="nama_ajk" id="create-nama_ajk" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label for="create-jabatan" class="form-label">Department</label>
                            <select name="jabatan_id" id="create-jabatan" class="form-control" required>
                                {{-- Options will be loaded via AJAX --}}
                            </select>
                        </div>
                        {{-- Added Masjid Select --}}
                        <div class="mb-3">
                            <label for="create-mesjid" class="form-label">Masjid</label>
                            <select name="mesjid_id" id="create-mesjid" class="form-control" required>
                                {{-- Options will be loaded via AJAX --}}
                            </select>
                        </div>
                        {{-- End Added Masjid Select --}}
                        <div class="mb-3">
                            <label for="create-photo" class="form-label">Photo</label>
                            <input type="file" name="photo" id="create-photo" class="form-control" accept="image/png, image/jpeg, image/jpg" required>
                        </div>
                        <div class="mb-3">
                            <label for="create-status" class="form-label">Status</label>
                            <select name="status" id="create-status" class="form-control" required>
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </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="saveAjkBtn">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-ajk-update">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bold">Update AJK</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updateAjkForm" enctype="multipart/form-data">
                    <input type="hidden" id="update-ajk-id" name="id">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="update-nama_ajk" class="form-label">AJK Name</label>
                            <input type="text" name="nama_ajk" id="update-nama_ajk" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label for="update-jabatan" class="form-label">Department</label>
                            <select name="jabatan_id" id="update-jabatan" class="form-control" required>
                                {{-- Options will be loaded via AJAX --}}
                            </select>
                        </div>
                        {{-- Added Masjid Select --}}
                        <div class="mb-3">
                            <label for="update-mesjid" class="form-label">Masjid</label>
                            <select name="mesjid_id" id="update-mesjid" class="form-control" required>
                                {{-- Options will be loaded via AJAX --}}
                            </select>
                        </div>
                        {{-- End Added Masjid Select --}}
                        <div class="mb-3">
                            <label for="update-photo" class="form-label">Photo</label>
                            <input type="file" name="photo" id="update-photo" class="form-control" accept="image/png, image/jpeg, image/jpg">
                            <small class="text-muted">Leave blank to keep current photo.</small>
                            <div class="mt-2" id="current-photo-preview"></div>
                        </div>
                        <div class="mb-3">
                            <label for="update-status" class="form-label">Status</label>
                            <select name="status" id="update-status" class="form-control" required>
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </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="updateAjkBtn">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        const dataTableAjk = $("#table_data_ajk").DataTable({
            "processing": true,
            "serverSide": false,
            "responsive": true,
            "lengthChange": true,
            "autoWidth": false,
            "ajax": {
                "url": "/api/masjid/ajk",
                "type": "GET",
                "headers": {
                    "Authorization": "Bearer " + token // Menggunakan token yang sudah didefinisikan di root layout
                },
                "dataSrc": function(json) {
                    if (json.success && json.data) {
                        return json.data;
                    } else {
                        toastr.error(json.message || 'Failed to load AJK data.', 'Data Load Error');
                        console.error("API Error (DataTable):", json.message);
                        return [];
                    }
                },
                "error": function(xhr, error, thrown) {
                    let errorMessage = 'Could not connect to the server or another error occurred. Please try again.';
                    if (xhr.status === 401) {
                        errorMessage = 'Unauthorized. Please log in again.';
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    toastr.error(errorMessage, 'Data Load Error');
                    console.error("AJAX Error (DataTable):", thrown, xhr);
                }
            },
            "columns": [{
                    "data": null,
                    "render": function(data, type, row, meta) {
                        return meta.row + 1;
                    }
                },
                {
                    "data": "photo",
                    "render": function(data, type, row) {
                        return `<img src="${data}" alt="AJK Photo" width="50" height="auto" class="img-thumbnail" />`;
                    }
                },
                {
                    "data": "nama_ajk"
                },
                {
                    "data": "jabatan"
                },
                {
                    "data": "masjid"
                },
                {
                    "data": "status",
                    "render": function(data, type, row) {
                        return data ? '<span class="badge badge-success">Active</span>' : '<span class="badge badge-danger">Inactive</span>';
                    }
                },
                {
                    "data": null,
                    "render": function(data, type, row) {
                        return `
                                <button class="btn btn-sm btn-success edit-ajk-btn rounded-md shadow-sm mr-1" data-id="${row.id}"><i class="fas fa-pen"></i></button>
                                <button class="btn btn-sm btn-danger delete-ajk-btn rounded-md shadow-sm" data-id="${row.id}"><i class="fas fa-trash"></i></button>
                            `;
                    },
                    "orderable": false,
                    "searchable": false
                }
            ],
            "buttons": ["copy", "csv", "excel", "pdf", "print"]
        });

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

        function loadJabatanOptions(selector, selectedId = null) {
            $.ajax({
                url: '/api/jawatan',
                type: 'GET',
                headers: { "Authorization": "Bearer " + token },
                success: function(response) {
                    if (response.success && response.data) {
                        let options = '<option value="">Select Department</option>';
                        response.data.forEach(jabatan => {
                            options += `<option value="${jabatan.id}" ${selectedId == jabatan.id ? 'selected' : ''}>${jabatan.jabatan}</option>`;
                        });
                        $(selector).html(options);
                    } else {
                        toastr.error(response.message || 'Failed to load departments.', 'Error');
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error('Error loading departments.', 'Error');
                    console.error("AJAX error loading departments:", error, xhr);
                }
            });
        }

        function loadMasjidOptions(selector, selectedId = null) {
            $.ajax({
                url: '/api/masjid',
                type: 'GET',
                headers: { "Authorization": "Bearer " + token },
                success: function(response) {
                    let masjids = [];

                    if (response.success && response.data) {
                        masjids = response.data;
                    } else if (response.data) {
                        masjids = response.data;
                    }

                    if (masjids.length > 0) {
                        let options = '<option value="">Select Masjid</option>';
                        masjids.forEach(masjid => {
                            options += `<option value="${masjid.id}" ${selectedId == masjid.id ? 'selected' : ''}>${masjid.nama_mesjid}</option>`;
                        });
                        $(selector).html(options);
                    } else {
                        toastr.warning('No masjids found.', 'Info');
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error('Error loading masjids.', 'Error');
                    console.error("AJAX error loading masjids:", error, xhr);
                }
            });
        }

        $('#modal-ajk-create').on('show.bs.modal', function () {
            loadJabatanOptions('#create-jabatan');
            loadMasjidOptions('#create-mesjid');
        });

        $('#createAjkForm').on('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);

            $.ajax({
                url: '/api/masjid/ajk/store',
                type: 'POST',
                headers: {
                    "Authorization": "Bearer " + token,
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message, 'Success');
                        $('#modal-ajk-create').modal('hide');
                        $('#createAjkForm')[0].reset();
                        dataTableAjk.ajax.reload();
                    } else {
                        toastr.error(response.message || 'Failed to add AJK data.', 'Error');
                        if (response.errors) {
                            $.each(response.errors, function(key, value) {
                                toastr.error(value[0], 'Validation Error');
                            });
                        }
                    }
                },
                error: function(xhr, status, error) {
                    let errorMessage = 'An error occurred while adding AJK data. Please try again.';
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(key, value) {
                            errorMessage = value[0];
                            toastr.error(errorMessage, 'Validation Error');
                        });
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    toastr.error(errorMessage, 'Error');
                    console.error("AJAX error (create):", error, xhr);
                }
            });
        });

        $('#table_data_ajk tbody').on('click', '.edit-ajk-btn', function() {
            const ajkId = $(this).data('id');
            $('#update-ajk-id').val(ajkId);

            $.ajax({
                url: `/api/masjid/ajk/${ajkId}`,
                type: 'GET',
                headers: {
                    "Authorization": "Bearer " + token
                },
                success: function(response) {
                    if (response.success && response.data) {
                        const ajk = response.data;
                        $('#update-nama_ajk').val(ajk.nama_ajk);
                        loadJabatanOptions('#update-jabatan', ajk.jabatan_id);
                        loadMasjidOptions('#update-mesjid', ajk.mesjid_id);
                        $('#update-status').val(ajk.status ? '1' : '0');

                        if (ajk.photo) {
                            $('#current-photo-preview').html(`<img src="${ajk.photo}" alt="Current Photo" width="100" class="img-thumbnail">`);
                        } else {
                            $('#current-photo-preview').html('');
                        }

                        $('#modal-ajk-update').modal('show');
                    } else {
                        toastr.error(response.message || 'Failed to load AJK details for editing.', 'Error');
                    }
                },
                error: function(xhr, status, error) {
                    let errorMessage = 'Failed to load AJK details. Please try again.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    toastr.error(errorMessage, 'Error');
                    console.error("AJAX error (edit load):", error, xhr);
                }
            });
        });

        $('#updateAjkForm').on('submit', function(e) {
            e.preventDefault();
            const ajkId = $('#update-ajk-id').val();
            const formData = new FormData(this);

            $.ajax({
                url: `/api/masjid/ajk/update/${ajkId}`,
                type: 'POST',
                headers: {
                    "Authorization": "Bearer " + token,
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message, 'Success');
                        $('#modal-ajk-update').modal('hide');
                        $('#updateAjkForm')[0].reset();
                        dataTableAjk.ajax.reload();
                    } else {
                        toastr.error(response.message || 'Failed to update AJK data.', 'Error');
                        if (response.errors) {
                            $.each(response.errors, function(key, value) {
                                toastr.error(value[0], 'Validation Error');
                            });
                        }
                    }
                },
                error: function(xhr, status, error) {
                    let errorMessage = 'An error occurred while updating AJK data. Please try again.';
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        $.each(xhr.responseJSON.errors, function(key, value) {
                            errorMessage = value[0];
                            toastr.error(errorMessage, 'Validation Error');
                        });
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    toastr.error(errorMessage, 'Error');
                    console.error("AJAX error (update):", error, xhr);
                }
            });
        });

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

            if (confirm('Are you sure you want to delete this AJK? This action cannot be undone.')) {
                $.ajax({
                    url: `/api/masjid/ajk/destroy/${ajkId}`,
                    type: 'DELETE',
                    headers: {
                        "Authorization": "Bearer " + token,
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message, 'Deleted!');
                            dataTableAjk.ajax.reload();
                        } else {
                            toastr.error(response.message || 'Failed to delete AJK data.', 'Error');
                        }
                    },
                    error: function(xhr, status, error) {
                        let errorMessage = 'An error occurred while deleting AJK data. Please try again.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        toastr.error(errorMessage, 'Error');
                        console.error("AJAX error (delete):", error, xhr);
                    }
                });
            } else {
                toastr.info('Deletion cancelled.', 'Info');
            }
        });
    </script>
@endpush