@extends('layout.master')

@section('title', 'Maklum Balas')

@section('content')

<div class="page-header">
    <h5 class="page-title">Permohonan / Makluman {{ request()->type == 'selesai' ? 'Selesai' : '' }}</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Laman Utama</a></li>
            <li class="breadcrumb-item">Pengurusan Data</li>
            <li class="breadcrumb-item active">Permohonan / Makluman {{ request()->type == 'selesai' ? 'Selesai' : '' }}</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-between align-items-center mb-2">
                        @role('Pentadbir', 'Pentadbir Negeri')
                            <div class="d-flex" style="gap: 1rem;">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="filterBy" id="radio1"  {{ (request()->type == 'selesai') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="radio1">
                                        Permohonan / Makluman Selesai
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="filterBy" id="radio2"  {{ (request()->type == 'selesai') ? '' : 'checked' }}>
                                    <label class="form-check-label" for="radio2">
                                        Permohonan / Makluman Dibuka
                                    </label>
                                </div>
                            </div>
                        @endrole

                        <a class="btn btn-primary" onClick="add()" href="javascript:void(0)"><i class="fa-solid fa-plus me-2"></i>Tambah Permohonan / Makluman</a>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover nowrap w-100" id="the-table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal Tambah Permohonan / Makluman -->
<div class="modal fade" id="the-modal" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="modal-title">Tambah Permohonan / Makluman</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="javascript:void(0)" id="modal-form" name="modal-form" class="form-horizontal needs-validation modal-form" method="POST" enctype="multipart/form-data" novalidate>
                <div class="modal-body">
                    <div class="row mb-3">
                        <label for="role_id" class="col-sm-4 col-form-label">Penerima Permohonan / Makluman</label>
                        <div class="col-sm-8">
                            <select class="form-select select-2" name="role_id" aria-label="Default select example">
                                <option value="" selected disabled>--- Sila Pilih ---</option>
                                @role('Pentadbir Negeri', 'Pengguna')
                                <option value="2">Pentadbir</option>
                                @endrole
                                @role('Pentadbir', 'Pengguna')
                                <option value="3">Pentadbir Negeri</option>
                                @endrole
                            </select>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="kategori_id" class="col-sm-4 col-form-label">Kategori</label>
                        <div class="col-sm-8">
                            <select class="form-select select-2" name="kategori_id" aria-label="Default select example"></select>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    @role('Pentadbir')
                    <div class="row mb-3">
                        <label for="negeri_id" class="col-sm-4 col-form-label">Negeri</label>
                        <div class="col-sm-8">
                            <select class="form-select select-2" name="negeri_id[]" aria-label="Default select example" multiple="multiple">
                                @foreach ($negeris as $negeri)
                                <option value="{{ $negeri->id }}">{{ $negeri->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @role_else
                    <input type="hidden" name="negeri_id[]" value="{{ auth()->user()->negeri_id }}">
                    @endrole
                    <div class="row mb-3">
                        <label for="subjek" class="col-sm-4 col-form-label">Subjek</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="subjek" value="" required>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="komen" class="col-sm-4 col-form-label">Komen</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="komen" value="" required>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="lampiran" class="col-sm-4 col-form-label">Lampiran</label>
                        <div class="col-sm-8">
                            <input class="form-control" type="file" name="lampiran" accept=".zip,.rar,.7z">
                            <small class="text-muted">Format diterima .zip .rar .7z (maksimum saiz 10MB)</small>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary mx-1" type="submit" id="submit-button">Hantar</button>
                    <a class="btn btn-outline-danger mx-1" data-bs-dismiss="modal">Batal</a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Respons Maklum Balas -->
<div class="modal fade" id="the-modal-respons" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="modal-title">Respons Maklum Balas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="javascript:void(0)" id="modal-form-respons" name="modal-form-respons" class="form-horizontal modal-form" method="POST" enctype="multipart/form-data" novalidate>
                <div class="modal-body">
                    <input type="hidden" name="id" id="id" required>

                    <div class="row mb-3">
                        <label for="kategori_id" class="col-sm-4 col-form-label">Kategori</label>
                        <div class="col-sm-8">
                            <select class="form-select select-2" id="kategori-id-dropdown" name="kategori_id" value="" aria-label="Default select example" disabled>
                                @foreach($kategoris as $kategori)
                                <option value="{{ $kategori->id }}">{{ $kategori->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @role('Pentadbir')
                    <div class="row mb-3">
                        <label for="negeri_id" class="col-sm-4 col-form-label">Negeri</label>
                        <div class="col-sm-8">
                            <select class="form-select select-2" id="negeri-id-dropdown" name="negeri_id[]" aria-label="Default select example" multiple="multiple">
                                @foreach ($negeris as $negeri)
                                <option value="{{ $negeri->id }}">{{ $negeri->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @endrole
                    <div class="row mb-3">
                        <label for="subjek" class="col-sm-4 col-form-label">Subjek</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="subjek" name="subjek" value="" disabled>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="komen" class="col-sm-4 col-form-label">Komen</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="komen" name="komen" value="" disabled>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="respons" class="col-sm-4 col-form-label">Respons</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" style="height: 100px" id="respons" name="respons" value="" required></textarea>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="lampiran" class="col-sm-4 col-form-label">Lampiran</label>
                        <div class="col-sm-8">
                            <div id="lampiran-container">
                                <!-- File will be displayed here -->
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="status_id" class="col-sm-4 col-form-label">Status</label>
                        <div class="col-sm-8">
                            <select class="form-select select-2" id="status-id-dropdown" name="status_id" aria-label="">
                                <option value="1">Selesai</option>
                                <option value="2">Dibuka</option>
                            </select>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary mx-1" type="submit" id="send-button">Hantar</button>
                    <a class="btn btn-outline-danger mx-1" data-bs-dismiss="modal">Batal</a>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

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

    $(document).ready( function () {

        console.log("-=-=- "); 

        $('#the-table').DataTable({
            ...datatables_config,
            scrollX: true,
            processing: true,
            serverSide: true,
            ajax: {
                url : "{{ route('pengurusan_pengguna.maklum_balas.datatables') }}",
                data: {
                    type : "{{ request()->type }}"
                }, 
                error: function (xhr, error, code) {
                    console.log(xhr, code);
                }
            },
            buttons: [
                {
                    extend: 'selected',
                    text: '<i class="fa fa-trash me-2"></i> Padam Pilihan',
                    action: function (e, dt, node, config) {
                        fDeleteMultipleMaklumBalas();
                    }
                },
               {
                    extend: 'pdf',
                    className: 'btn btn-danger',
                    text: '<i class="fa fa-file-pdf me-2"></i> PDF',
                    title: '',
                    filename: 'Senarai Maklum Balas',
                    exportOptions: {
                        columns: '.export-pdf',
                    }
               },
               {
                    extend: 'csv',
                    className: 'btn btn-success',
                    text: '<i class="fa fa-file-csv me-2"></i> CSV',
                    filename: 'Senarai Maklum Balas',
                    exportOptions: {
                        columns: '.export-csv',
                   }
               },
               {
                    extend: 'excel',
               }
            ],
            columns: [
                { data: null, title: '', width: '1%' },
                { 
                    title: 'Bil', 
                    data: 'DT_RowIndex', 
                    width: '1%',
                    className: 'text-center export-pdf export-csv',
                    orderable: false, 
                    searchable: false 
                },
                { 
                    title: 'Kategori', 
                    data: 'kategori.name',
                    className: 'export-pdf export-csv',
                    render: (data, type, row) => {
                        return `${row.kategori?.name ?? '-'}`;
                    }
                },
                { 
                    title: 'Subjek', 
                    data: 'subjek',
                    className: 'export-pdf export-csv',
                },
                { 
                    title: 'Komen', 
                    data: 'komen',
                    className: 'text-center export-pdf export-csv',
                    render: function ( data, type, row ) {
                        return data ? `<span style="white-space:normal">${data}</span>` : '-';
                    } 
                },
                { 
                    title: 'Respons', 
                    data: 'respons',
                    className: "text-center export-pdf export-csv",
                    render: function ( data, type, row ) {
                        return data ? `<span style="white-space:normal">${data}</span>` : '-';
                    }
                },
                { 
                    title: 'Dimuat Naik Oleh', 
                    data: 'users.name',
                    className: "export-pdf export-csv",
                    render: (data, type, row) => {
                        return `${row.users?.name ?? '-'}`;
                    }
                },
                { 
                    title: 'Negeri',
                    className: 'export-pdf export-csv',
                    data: 'negeri_names',
                },
                { 
                    title: 'Tarikh Dimuat Naik',
                    className: 'export-pdf export-csv',
                    data: 'created_at',
                    name: 'created_at',
                },
                { 
                    title: 'Tindakan',
                    data: 'action', 
                    className: 'text-center',
                    orderable: false,
                },
            ],
            order: [[8, 'desc']],
        });
    });
     
    function add(){
        $('#modal-form').trigger("reset");
        $(".error-text").html('');
        $(".is-invalid").removeClass("is-invalid");
        $('#the-modal').modal('show');
        $('#id').val('');
    }
         
    function edit_func(id){
        $.ajax({
            type:"POST",
            url: "{{ route('pengurusan_pengguna.maklum_balas_edit') }}",
            data: { id: id },
            dataType: 'json',
            success: function(result){
                $('#modal-form-respons').trigger("reset");
                $(".error-text").html('');
                $(".is-invalid").removeClass("is-invalid");
                
                $('#the-modal-respons').modal('show');
                $('#the-modal-respons #modal-title').text('Respons Maklum Balas');
                $('#respons').prop('disabled', false);
                $('#status-id-dropdown').prop('disabled', false);
                $('#send-button').show();

                $('#id').val(result.id);
                $('#subjek').val(result.subjek);
                $('#komen').val(result.komen);
                $('#respons').val(result.respons);
                $('#status_id').val(result.status_id);

                if(result.file_path) {
                    const fileName = result.file_path.split('/').pop();
                    $('#lampiran-container').html(`
                        <a href="${result.file_path}" class="file-link" download>
                            <i class="fas fa-file-archive"></i> ${fileName}
                        </a>
                    `);
                } else {
                    $('#lampiran-container').html('<span class="text-muted">Tiada lampiran</span>');
                }

                $('#kategori-id-dropdown').val(result.kategori_id).trigger('change');
                $('#negeri-id-dropdown').val(result.negeri_id).trigger('change');
                $('#status-id-dropdown').val(result.status_id).trigger('change');
            }
        });
    }

    function view(id){
        $.ajax({
            type:"POST",
            url: "{{ route('pengurusan_pengguna.maklum_balas_edit') }}",
            data: { id: id },
            dataType: 'json',
            success: function(result){
                $('#modal-form-respons').trigger("reset");
                $(".error-text").html('');
                $(".is-invalid").removeClass("is-invalid");
                
                $('#the-modal-respons').modal('show');
                $('#the-modal-respons #modal-title').text('Papar Maklum Balas');
                $('#respons').prop('disabled', true);
                $('#status-id-dropdown').prop('disabled', true);
                $('#send-button').hide();

                $('#id').val(result.id);
                $('#subjek').val(result.subjek);
                $('#komen').val(result.komen);
                $('#respons').val(result.respons);
                $('#status_id').val(result.status_id);

                if(result.file_path) {
                    const fileName = result.file_path.split('/').pop();
                    $('#lampiran-container').html(`
                        <a href="${result.file_path}" class="file-link" download>
                            <i class="fas fa-file-archive"></i> ${fileName}
                        </a>
                    `);
                } else {
                    $('#lampiran-container').html('<span class="text-muted">Tiada lampiran</span>');
                }

                $('#kategori-id-dropdown').val(result.kategori_id).trigger('change');
                $('#negeri-id-dropdown').val(result.negeri_id).trigger('change');
                $('#status-id-dropdown').val(result.status_id).trigger('change');
            }
        });
    }

    // Function to unserialize PHP serialized string
    function unserialize(serializedString) {

        let gg = JSON.parse(serializedString.replace(/a:\d+:{|}|i:\d+;|s:\d+:"(.*?)";/g, "$1"));
        console.log(gg)
        return gg;
    }

    $('.modal-form').submit(function(e) {
        e.preventDefault();
        let formData = new FormData(this);
        console.log(formData);
        $.ajax({
            type:'POST',
            url: "{{ route('pengurusan_pengguna.maklum_balas_add')}}",
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            success: (data) => {
                $("#the-modal").modal('hide');
                $("#the-modal-respons").modal('hide');
                $('#the-table').DataTable().ajax.reload(null, false);
                $("#submit-button").html('Hantar').attr("disabled", false);

                let swalText = 'Permohonan/Makluman baru berjaya ditambah';
                if(data.updateOrCreate == 'update') {
                    swalText = 'Permohonan/Makluman baru berjaya dikemaskini';
                }

                sSuccess(swalText);
            },
            error: function(reject){
                $(".error-text").html('');
                $(".is-invalid").removeClass("is-invalid");
                $("#submit-button").html('Hantar').attr("disabled", false);

                $.each(reject.responseJSON.errors, function (key, value) {
                    
                    var element = $("#" + key);
                    if (element.length === 0) {
                        element = $('[name="' + key + '"]');
                    }

                    element.addClass("is-invalid");
                    
                    let errorSpan = element.closest('.col-sm-8, .col-sm-9, .form-group').find(".error-text");
                    if (errorSpan.length === 0) {
                        errorSpan = element.nextAll(".error-text").first();
                    }

                    let multiError = Array.isArray(value) ? value.join('<br>') : value;
                    errorSpan.html(multiError);
                    
                });
            }
        });
    });

    $('input[name="lampiran"]').on('change', function() {
        const file = this.files[0];
        if (file) {
            const maxSize = 10 * 1024 * 1024; // 10MB limit in bytes
            if (file.size > maxSize) {
                let errorSpan = $(this).closest('.col-sm-8').find('.error-text');
                errorSpan.html('Saiz lampiran melebihi had maksimum 10MB.');
                $(this).addClass('is-invalid');
                this.value = ''; // Reset the input
            } else {
                let errorSpan = $(this).closest('.col-sm-8').find('.error-text');
                errorSpan.html('');
                $(this).removeClass('is-invalid');
            }
        }
    });

    function padamMaklumBalas(id, name) {
        sPadam(null, name, function() {
            $.ajax({
                type: "POST",
                url: "{{ route('pengurusan_pengguna.maklum_balas_delete') }}",
                data: { id : id },
                dataType: 'json',
                success: function(result) {
                    $('#the-table').DataTable().ajax.reload(null, false);
                    sSuccess('Maklum Balas Telah Berjaya Dipadam');
                },
                error: function(data) {
                    sFail('Gagal memadam maklum balas. Sila cuba lagi.');
                }
            });
        });
    }

    function fDeleteMultipleMaklumBalas() {
        
        let selectedData = $('#the-table').DataTable().rows({ selected: true }).data().toArray();
        
        if (selectedData.length === 0) {
            alert("Sila pilih sekurang-kurangnya satu rekod untuk dipadam.");
            return;
        }

        let selectedIds = selectedData.map(row => row.id); 

        sPadam(null, selectedIds.length + " rekod ini?", function () {
            $.ajax({
                type: "POST",
                url: "{{ route('pengurusan_pengguna.maklum_balas_delete_multiple') }}",
                data: { 
                    ids: selectedIds,
                    _token: '{{ csrf_token() }}' 
                },
                dataType: 'json',
                success: function(result){
                    $('#the-table').DataTable().ajax.reload(null, false);
                    sSuccess(result.result);
                }
            });
        });
    }

    const kategoris = @json($kategoris); 

    $('[name="role_id"]').on('change', function() {
        const value = this.value;

        let newKategoris = kategoris;
        if (value == 2) { // pentadbir
            newKategoris = kategoris.filter(x => x.id == 1 || x.id == 2 || x.id == 4);
        } else if (value == 3) { // pentadbir snegeri
            newKategoris = kategoris.filter(x => x.id == 3 || x.id == 4);
        }

        let html = `<option value="" selected disabled>--- Sila Pilih ---</option>`;
        for (let i = 0; i < newKategoris.length; i++) {
            html += `<option value="${newKategoris[i].id}">${newKategoris[i].name}</option>`;
        }
        document.querySelector('[name="kategori_id"]').innerHTML = html;
    })

    $('#radio1').on('change', () => {
        window.location.href = "{{ route('pengurusan_pengguna.maklum_balas', ['type' => 'selesai']) }}";
    });

    $('#radio2').on('change', () => {
        window.location.href = "{{ route('pengurusan_pengguna.maklum_balas') }}";
    });

</script>
@endsection