@extends('layout.master')

@section('title', 'Senarai Pengguna Sistem')

@section('content')

<div class="page-header">
    <h5 class="page-title">Senarai Pengguna Sistem</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 Sistem</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"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal Kemaskini Pengguna Sistem -->
<div class="modal fade" id="the-modal" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Kemaskini Maklumat Pengguna Sistem</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">
                <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="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">
                        <label for="ic" class="col-sm-3 col-form-label">ID Pengguna : </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="ic" name="ic" value="" data-maska="######-##-####" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="inputEmail" class="col-sm-3 col-form-label">E-mel : </label>
                        <div class="col-sm-9">
                            <input type="email" class="form-control" id="email" name="email" value="" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="no_tel" class="col-sm-3 col-form-label">No. Telefon : </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="no_tel" name="no_tel" value="" data-maska="60 ##########" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label">Tempat Bertugas : </label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="user-category-dropdown" aria-label="Default select example" name="user_category" value="" required>
                                <option value="1">IPJPSM</option>
                                <option value="2">JPN</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3 div-negeri-daerah">
                        <label class="col-sm-3 col-form-label">Negeri : </label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="negeri-dropdown" aria-label="Default select example" name="negeri_id" value="">
                                @foreach (\App\Models\Negeri::select('id', 'name')->get() as $value)
                                <option value="{{ $value->id }}">
                                    {{ $value->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3 div-negeri-daerah">
                        <label class="col-sm-3 col-form-label">Daerah : </label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="daerah-dropdown" aria-label="Default select example" name="daerah_hutan_id" value="">
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label">Bahagian : </label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="bahagian-dropdown" aria-label="Default select example" name="bahagian_id" value="" required>
                                @foreach (\App\Models\Bahagian::select('id', 'name')->get() as $value)
                                    <option value="{{ $value->id }}">{{ $value->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label">Seksyen / Unit : </label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="unit-dropdown" aria-label="Default select example" name="unit_id" value="" required>
                                @foreach (\App\Models\Unit::select('id', 'name')->get() as $value)
                                    <option value="{{ $value->id }}">{{ $value->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label">Jawatan : </label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="jawatan-dropdown" aria-label="Default select example" name="jawatan_id" value="" required>
                                @foreach (\App\Models\Jawatan::select('id', 'name')->get() as $value)
                                    <option value="{{ $value->id }}">{{ $value->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @role('Pentadbir Utama', 'Pentadbir')
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label">Status : </label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="status-dropdown" aria-label="Default select example" name="status" value="" required>
                                <option value="1">AKTIF</option>
                                <option value="0">TIDAK AKTIF</option>
                                <option value="2">BERPINDAH NEGERI</option>
                            </select>
                        </div>
                    </div>
                    @endrole
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary mx-1" type="submit" id="btn-save">Kemaskini</button>
                    <a class="btn btn-outline-danger mx-1" data-bs-dismiss="modal">Batal</a>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('js')
<script>
    $(document).ready( function () {
     
        const dataTable = $('#the-table').DataTable({
            ...datatables_config,
            scrollX: true,
            fixedColumns: {
                left: 3,
            },
            processing: true,
            // serverSide: true,
            ajax: {
                url : "{{ route('pengurusan_pengguna.senarai_pengguna_sistem') }}",
                data: {
                    type : "{{ request()->type }}"
                }, 
                error: (e) => console.log(e), 
            },
            buttons: [
                {
                    extend: 'selected',
                    text: '<i class="fa fa-trash me-2"></i> Padam Pilihan',
                    action: function (e, dt, node, config) {
                        fDeleteMultiplePenggunaSistem();
                    }
                },
               {
                    extend: 'pdf',
                    className: 'btn btn-danger',
                    text: '<i class="fa fa-file-pdf me-2"></i> PDF',
                    title: '',
                    filename: 'Senarai Pengguna',
                    exportOptions: {
                            columns: '.export-pdf',
                    },
                    orientation: 'landscape',
                    pageSize: 'A4',  
                    customize: function (doc) {
                        doc.defaultStyle.fontSize = 6;
                        doc.styles.tableHeader.fontSize = 6;
                    }
               },
               {
                   extend: 'csv',
                   className: 'btn btn-success',
                   text: '<i class="fa fa-file-csv me-2"></i> CSV',
                   filename: 'Senarai Pengguna',
                   exportOptions: {
                        columns: '.export-csv',
                   }
               },
            ],
            columns: [
                { data: null, title: '', width: '1%' },
                { title: 'Bil', data: 'DT_RowIndex', width: '1%', orderable: false, searchable: false, className: 'text-center export-csv export-pdf' },
                { title: 'Nama', data: 'name', className: 'export-csv export-pdf' },
                { title: 'Peranan', data: 'role_name', className: 'export-csv export-pdf' },
                { title: 'ID Pengguna', data: 'ic' , className: 'export-csv export-pdf' },
                { title: 'E-mel', data: 'email' , className: 'export-csv export-pdf' },
                { title: 'No. Telefon', data: 'no_tel' , className: 'export-csv export-pdf' },
                { title: 'Tempat Bertugas', data: 'user_category', className: 'export-csv export-pdf' },
                { title: 'Negeri', data: 'negeri_name', className: 'export-csv export-pdf' },
                { title: 'Daerah / Jajahan Hutan', data: 'daerah_name', className: 'export-csv export-pdf' },
                { title: 'Bahagian', data: 'bahagian_name', className: 'export-csv export-pdf' },
                { title: 'Seksyen / Unit', data: 'unit_name', className: 'export-csv export-pdf' },
                { title: 'Jawatan', data: 'jawatan_name', className: 'export-csv export-pdf' },
                { title: 'Tarikh Didaftarkan', data: 'created_at_2', className: 'export-csv export-pdf' },
                { title: 'Status', data: 'status', className: 'text-center export-csv export-pdf' },
                { title: 'Masa Penggunaan Terakhir', data: 'last_login', className: 'export-csv export-pdf' },
                { title: 'Disahkan Pada', data: 'disahkan_pada', className: 'export-csv export-pdf' },
                { title: 'Tindakan', data: 'action', className: 'text-center', orderable: false },
            ],
            order: [[1, 'asc']]
        });

        @if(!has_role('Pentadbir'))
            dataTable.column(13).visible(false);
            dataTable.column(14).visible(false);
        @endif
    });

    function get_daerah(get_negeri_id, get_daerah_hutan_id)
    {
        $.ajax({
            url: "{{ route('fetch_daerah') }}",
            type: "POST",
            data: {
                negeri_id: get_negeri_id,
                _token: '{{ csrf_token() }}'
            },
            dataType: 'json',
            success: (result) => {
                let html = "";
                for (let i = 0; i < result.daerah.length; i++) {
                    const value = result.daerah[i];

                    html += `<option value="${value.id}" ${(value.id == get_daerah_hutan_id) ? 'selected' : ''}>${value.name}</option>`;
                }

                document.querySelector('#daerah-dropdown').innerHTML = html;
            }
        });
    }
         
    function edit_func(id){
        $.ajax({
            type:"POST",
            url: "{{ route('pengurusan_pengguna.senarai_pengguna_sistem.edit') }}",
            data: { id: id },
            dataType: 'json',
            success: function(result){
                $('.is-invalid').removeClass('is-invalid');
                $('.invalid-feedback').remove();

                $('#the-modal').modal('show');
                $('#id').val(result.id);
                $('#name').val(result.name);
                $('#ic').val(result.ic);
                $('#email').val(result.email);
                $('#no_tel').val(result.no_tel);
                $('#user-category-dropdown').val(result.user_category).trigger('change');
                $('#role-dropdown').val(result.role_id).trigger('change');
                $('#status-dropdown').val(result.status).trigger('change');

                $('#negeri-dropdown').val(result.negeri_id).trigger('change');
                get_daerah(result.negeri_id, result.daerah_hutan_id);

                $('#bahagian-dropdown').val(result.bahagian_id).trigger('change');
                $('#unit-dropdown').val(result.unit_id).trigger('change');
                $('#jawatan-dropdown').val(result.jawatan_id).trigger('change');

                if(result.user_category == 1) {
                    $('.div-negeri-daerah').hide();
                } else {
                    $('.div-negeri-daerah').show();
                }
            }
        });
    }  

    $('#negeri-dropdown').on('change', function () {
        var negeri_id = this.value;
        
        get_daerah(negeri_id, "");
    });
    
    function padamUser(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 fDeleteMultiplePenggunaSistem() {
        
        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);
                }
            });
        });
    }

    function hantarPeringatan(id, name) {
        sConfirm(
            null,
            "question",
            "HANTAR PERINGATAN",
            "Adakah anda ingin menghantar peringatan tidak aktif kepada <b>" + name + "</b>?",
            "Hantar",
            function() {
                $.ajax({
                    type: "POST",
                    url: "{{ route('pengurusan_pengguna.send_email') }}",
                    data: { id: id },
                    dataType: 'json',
                    success: function(result) {
                        $('#the-table').DataTable().draw(false);
                        sSuccess('Berjaya menghantar peringatan kepada pengguna sistem');
                    },
                    error: function() {
                        sFail('Gagal menghantar peringatan. Sila cuba lagi.');
                    }
                });
            }
        );
    }
     
    $('#modal-form').submit(function(e) {
        e.preventDefault();

        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').remove();

        let formData = new FormData(this);
        $.ajax({
            type:'POST',
            url: "{{ route('pengurusan_pengguna.senarai_pengguna_sistem_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);
                
                sSuccess('Maklumat Pengguna Sistem berjaya dikemaskini');
            },
            error: function(data){
                console.log(data);
                $("#btn-save").html('Simpan').attr("disabled", false);

                if (data.status === 422) {
                    let errors = data.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        let input = $('#' + key);
                        if (input.length) {
                            input.addClass('is-invalid');
                            input.after('<div class="invalid-feedback">' + value[0] + '</div>');
                        }
                    });
                } else {
                    sFail('Gagal mengemaskini maklumat pengguna sistem. Sila pastikan maklumat diisi dengan betul.');
                }
            }
        });
    });

    $('#user-category-dropdown').change(function(){
        var category = $(this).val();
        if (category == 1) {
            $('.div-negeri-daerah').hide();
        } else {
            $('.div-negeri-daerah').show();
        }

        $('#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();
                }
            }
        });
    });
</script>
@endsection