@extends('layout.master')

@section('title', 'Senarai Pengguna Dalam Permohonan')

@section('content')

<div class="page-header">
    <h5 class="page-title">Senarai Pengguna Dalam Permohonan</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('laman_utama') }}">Laman Utama</a></li>
            <li class="breadcrumb-item">Pengurusan Pengguna</li>
            <li class="breadcrumb-item active">Senarai Pengguna Dalam Permohonan</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover nowrap w-100" id="the-table">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Bil</th>
                                    <th>Nama</th>
                                    <th>Peranan</th>
                                    <th>ID Pengguna</th>
                                    <th>E-mel</th>
                                    <th>No. Telefon</th>
                                    <th>Tempat Bertugas</th>
                                    <th>Negeri</th>
                                    <th>Daerah/Jajahan Hutan</th>
                                    <th>Bahagian</th>
                                    <th>Seksyen/Unit</th>
                                    <th>Jawatan</th>
                                    <th>Tindakan</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal Kelulusan Pendaftaran Baharu -->
<div class="modal fade" id="the-modal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Kelulusan Pendaftaran Baharu</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" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="id" id="id">

                    <div class="row mb-3">
                        <label for="name" class="col-sm-3 col-form-label">Nama : </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="name" name="name" value="" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="user_category" class="col-sm-3 col-form-label">Tempat Bertugas : </label>
                        <div class="col-sm-9">
                            <p id="user_category" name="user_category"></p>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="negeri" class="col-sm-3 col-form-label">Negeri : </label>
                        <div class="col-sm-9">
                            <p id="negeri" name="negeri"></p>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="inputText" class="col-sm-3 col-form-label">Peranan : </label>
                        <div class="col-sm-9">
                            <select id="role-dropdown" class="form-select select-2" name="role_id" value="">
                                @if (Auth::user()->role_id == 1)
                                    @foreach (\App\Models\Role::get() as $value)
                                    <option value="{{ $value->id }}">
                                        {{ $value->name }}
                                    </option>
                                    @endforeach
                                @else
                                    @foreach (\App\Models\Role::where('id', '!=', 1)->get() as $value)
                                    <option value="{{ $value->id }}">
                                        {{ $value->name }}
                                    </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3" id="kelulusan_form">
                        <label class="col-sm-3 col-form-label">Kelulusan <span class="required-field" style="color: red; font-size: 0.8em;">*</span></label>
                        <div class="col-sm-9">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="kelulusan" id="kelulusan1" value="1" checked>
                                <label class="form-check-label" for="kelulusan1"> Lulus </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="kelulusan" id="kelulusan2" value="2">
                                <label class="form-check-label" for="kelulusan2"> Tidak Lulus </label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3" id="ulasan_form" style="display:none;">
                        <label for="ulasan" class="col-sm-3 col-form-label"></label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="ulasan" name="ulasan" value="" placeholder="Sila nyatakan ulasan bagi penolakan pendaftaran">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary mx-1" type="submit" id="btn-save">Simpan</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">
    $('input[type=radio]').change(function(){
        if ($(this).attr("id") == "kelulusan2") {
            $('#ulasan_form').show();
        } else {
            $('#ulasan_form').hide();
        }
    });

    $(document).ready( function () {
     
        $('#the-table').DataTable({
            ...datatables_config,
            scrollX: true,
            fixedColumns: {
                left: 3,
            },
            processing: true,
            // serverSide: true,
            ajax: "{{ route('pengurusan_pengguna.senarai_pengguna_dalam_permohonan') }}",
            buttons: [
                {
                    extend: 'selected',
                    text: '<i class="fa fa-trash me-2"></i> Padam Pilihan',
                    action: function (e, dt, node, config) {
                        fDeleteMultiplePenggunaPermohonan();
                    }
                },
               {
                   extend: 'pdf',
                   className: 'btn btn-danger',
                   text: '<i class="fa fa-file-pdf me-2"></i> PDF',
                   exportOptions: {
                       columns: [0,1,2,3]
                   }
               },
               {
                   extend: 'csv',
                   className: 'btn btn-success',
                   text: '<i class="fa fa-file-csv me-2"></i> CSV',
                   exportOptions: {
                       columns: [0,1,2,3]
                   }
               },
               {
                   extend: 'excel',
               }
            ],
            columns: [
                { data: null, title: '', width: '1%' },
                { data: 'DT_RowIndex', name: 'DT_RowIndex', width: '1%', orderable: false, searchable: false, className: 'text-center' },
                { data: 'name', name: 'name' },
                { data: 'role_name', name: 'role_name' },
                { data: 'ic', name: 'ic' },
                { data: 'email', name: 'email' },
                { data: 'no_tel', name: 'no_tel' },
                { data: 'user_category', name: 'user_category' },
                { data: 'regeri_name', name: 'regeri_name' },
                { data: 'daerah_name', name: 'daerah_name' },
                { data: 'bahagian_name', name: 'bahagian_name' },
                { data: 'unit_name', name: 'unit_name' },
                { data: 'jawatan_name', name: 'jawatan_name' },
                { data: 'action', name: 'action', className: 'text-center', orderable: false },
            ],
            order: [[1, 'asc']]
        });
    });
         
    function edit_func(id){
        $.ajax({
            type:"POST",
            url: "{{ route('pengurusan_pengguna.senarai_pengguna_dalam_permohonan_edit') }}",
            data: { id: id },
            dataType: 'json',
            success: function(result) {
                $('#modal-form').trigger("reset");
                $('#ulasan_form').hide();
                $('#the-modal').modal('show');
                $('#id').val(result.id);
                $('#name').val(result.name);
                $('#user_category').text(result.user_category == 1 ? 'IPJPSM' : 'JPN');

                var category = result.user_category;
                $('#role-dropdown option').each(function() {
                    var role_id = parseInt($(this).val());
                    if (category == 1) {
                        if ([1, 2, 4].includes(role_id)) {
                            $(this).prop('disabled', false).show();
                        } else {
                            $(this).prop('disabled', true).hide();
                        }
                    } else if (category == 2) {
                        if ([3, 4].includes(role_id)) {
                            $(this).prop('disabled', false).show();
                        } else {
                            $(this).prop('disabled', true).hide();
                        }
                    }
                });

                $('#negeri').text(result.negeris ? result.negeris.name : '-');
                $('#role-dropdown').val(result.role_id).trigger('change');
                $('#ulasan').val(result.kelulusan.ulasan);

                if(result.kelulusan.kelulusan == 2) {
                    $("#kelulusan2").prop("checked", true);
                    $('#ulasan_form').show();
                }
                else 
                    $("#kelulusan1").prop("checked", true);
            }
        });
    }

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

    function fDeleteMultiplePenggunaPermohonan() {
        
        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.senarai_pengguna_delete_multiple') }}",
                data: { 
                    ids: selectedIds,
                    _token: '{{ csrf_token() }}' 
                },
                dataType: 'json',
                success: function(result){
                    $('#the-table').DataTable().ajax.reload(null, false);
                    sSuccess(result.result);
                }
            });
        });
    }
     
    $('#modal-form').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type:'POST',
            url: "{{ route('pengurusan_pengguna.senarai_pengguna_dalam_permohonan_store')}}",
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            success: (data) => {
                $("#the-modal").modal('hide');
                $('#the-table').DataTable().ajax.reload(null, false);
                $("#btn-save").html('Simpan').attr("disabled", false);

                var swalText = 'Permohonan Ditolak';

                if(data.data.kelulusan == 1) {
                    swalText = 'Pengguna Baharu Telah Dikemaskini Ke Dalam Sistem';
                }

                sSuccess(swalText);
            },
            error: function(data){
                console.log(data);
            }
        });
    });
</script>
@endsection