@extends('app')
@section('title_header', 'Senarai Berita')
@section('header', 'Senarai Berita')
@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-ajk-create">CREATE</button>
            </div>
            <div class="card-body">
                <table id="table_data" 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>

    <!-- Modal: Create Berita -->
    <div class="modal fade" id="modal-ajk-create" tabindex="-1" role="dialog" aria-labelledby="modalCreateLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <form id="form-create-berita" enctype="multipart/form-data">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalCreateLabel">Tambah Berita</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="photo">Gambar</label>
                            <input type="file" class="form-control" name="photo" id="photo">
                        </div>
                        <div class="form-group">
                            <label for="tajuk">Tajuk</label>
                            <input type="text" class="form-control" name="tajuk" id="tajuk" required>
                        </div>
                        <div class="form-group">
                            <label for="perenggan">Perenggan</label>
                            <textarea class="form-control" name="perenggan" id="perenggan" rows="4" required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="acara_awal">Acara Awal</label>
                            <input type="time" class="form-control" name="acara_awal" id="acara_awal">
                        </div>
                        <div class="form-group">
                            <label for="acara_akhir">Acara Akhir</label>
                            <input type="time" class="form-control" name="acara_akhir" id="acara_akhir">
                        </div>
                        <div class="form-group">
                            <label for="mesjid_id">Masjid</label>
                            <select class="form-control" name="mesjid_id" id="mesjid_id" required>
                                <!-- Masjid option will be loaded dynamically or statically here -->
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal: Update Berita -->
    <div class="modal fade" id="modal-ajk-update" tabindex="-1" role="dialog" aria-labelledby="modalUpdateLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <form id="form-update-berita" enctype="multipart/form-data">
                <input type="hidden" name="id" id="update_id">
                <div class="modal-content">
                    <div class="modal-header bg-success">
                        <h5 class="modal-title" id="modalUpdateLabel">Kemaskini Berita</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="update_photo">Gambar</label>
                            <input type="file" class="form-control" name="photo" id="update_photo">
                        </div>
                        <div class="form-group">
                            <label for="update_tajuk">Tajuk</label>
                            <input type="text" class="form-control" name="tajuk" id="update_tajuk" required>
                        </div>
                        <div class="form-group">
                            <label for="update_perenggan">Perenggan</label>
                            <textarea class="form-control" name="perenggan" id="update_perenggan" rows="4" required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="update_acara_awal">Acara Awal</label>
                            <input type="time" class="form-control" name="acara_awal" id="update_acara_awal">
                        </div>
                        <div class="form-group">
                            <label for="update_acara_akhir">Acara Akhir</label>
                            <input type="time" class="form-control" name="acara_akhir" id="update_acara_akhir">
                        </div>

                        <div class="form-group">
                            <label for="update_mesjid_id">Masjid</label>
                            <select class="form-control" name="mesjid_id" id="update_mesjid_id" required>
                                <!-- Masjid option will be loaded dynamically or statically here -->
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Save Changes</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection
@push('scripts')
    <script>
        const dataTableAjk = $("#table_data").DataTable({
            processing: true,
            serverSide: false,
            responsive: true,
            lengthChange: false,
            autoWidth: false,
            ajax: {
                url: "/api/berita",
                type: "GET",
                headers: {
                    Authorization: "Bearer " + token
                },
                dataSrc: function(json) {
                    if (json.success && json.data !== undefined) {
                        return json.data;
                    }
                    toastr.error(json.message || 'Gagal memuat data berita.');
                    return [];
                },
                error: function(xhr) {
                    const msg = xhr.responseJSON?.message || 'Terjadi kesalahan saat memuat data.';
                    toastr.error(msg);
                }
            },
            columns: [{
                    data: null,
                    render: (data, type, row, meta) => meta.row + 1
                },
                {
                    data: "photo",
                    render: (data) => `<img src="${data}" width="50" class="img-thumbnail" />`
                },
                {
                    data: "tajuk"
                },
                {
                    data: "perenggan",
                    render: (data) => data.slice(0, 50) + '...'
                },
                {
                    data: "masjid.nama_mesjid"
                },
                {
                    data: "status",
                    render: (data) => data === 'cooming' ?
                        '<span class="badge badge-warning">Coming</span>' :
                        '<span class="badge badge-success">Published</span>'
                },
                {
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        return `
                        <button class="btn btn-sm btn-success edit-ajk-btn"
                                data-toggle="modal"
                                data-target="#modal-ajk-update"
                                data-row='${JSON.stringify(row)}'>
                            <i class="fas fa-pen"></i>
                        </button>
                        <button class="btn btn-sm btn-danger delete-ajk-btn" data-id="${row.id}">
                            <i class="fas fa-trash"></i>
                        </button>
                    `;
                    }
                }
            ]
        });

        // Load masjid dropdown
        function loadMasjidDropdown() {
            $.ajax({
                url: "/api/masjid",
                type: "GET",
                headers: {
                    "Authorization": "Bearer " + token
                },
                success: function(res) {
                    if (res.success) {
                        let options = res.data.map(m => `<option value="${m.id}">${m.nama_mesjid}</option>`);
                        $('#mesjid_id, #update_mesjid_id').html(options.join(''));
                    }
                },
                error: function() {
                    toastr.error('Gagal memuat daftar masjid.');
                }
            });
        }

        // On document ready
        $(document).ready(function() {
            loadMasjidDropdown();
        });

        // CREATE FORM SUBMIT
        $('#form-create-berita').on('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);

            $.ajax({
                url: '/api/berita/store',
                type: 'POST',
                headers: {
                    "Authorization": 'Bearer ' + token,
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                data: formData,
                contentType: false,
                processData: false,
                success: function(res) {
                    toastr.success(res.message);
                    $('#modal-ajk-create').modal('hide');
                    $('#form-create-berita')[0].reset();
                    dataTableAjk.ajax.reload();
                },
                error: function(err) {
                    let msg = err.responseJSON?.message || 'Gagal menyimpan berita.';
                    toastr.error(msg);
                }
            });
        });

        // EDIT BUTTON - FILL MODAL
        $(document).on('click', '.edit-ajk-btn', function() {
            const data = $(this).data('row');

            $('#update_id').val(data.id);
            $('#update_tajuk').val(data.tajuk);
            $('#update_perenggan').val(data.perenggan);
            $('#update_mesjid_id').val(data.mesjid_id);
            $('#update_acara_awal').val(data.acara_awal ? data.acara_awal.substring(0, 5) : '');
            $('#update_acara_akhir').val(data.acara_akhir ? data.acara_akhir.substring(0, 5) : '');

            // Optional: preview gambar lama
            if (data.photo) {
                $('#update_photo_preview').remove(); // remove existing preview
                $('#update_photo').after(
                    `<img id="update_photo_preview" src="${data.photo}" class="mt-2 img-thumbnail" width="100">`
                );
            }
        });

        // UPDATE FORM SUBMIT
        $('#form-update-berita').on('submit', function(e) {
            e.preventDefault();
            const id = $('#update_id').val();
            const formData = new FormData(this);

            $.ajax({
                url: `/api/berita/update/${id}`,
                type: 'POST',
                headers: {
                    "Authorization": 'Bearer ' + token,
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                data: formData,
                contentType: false,
                processData: false,
                success: function(res) {
                    toastr.success(res.message);
                    $('#modal-ajk-update').modal('hide');
                    dataTableAjk.ajax.reload();
                },
                error: function(err) {
                    let msg = err.responseJSON?.message || 'Gagal mengemas kini berita.';
                    toastr.error(msg);
                }
            });
        });
    </script>
@endpush