@php
use App\Models\Negeri;
@endphp

@extends('layout.master')

@section('title', 'Maklumat Dashboard e-GP PSOH')

@section('content')

<div class="page-header">
    <h5 class="page-title">Senarai Maklumat Negeri Bagi Dashboard e-GP-PSOH</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">Senarai Maklumat Negeri Bagi Dashboard e-GP-PSOH</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="row gx-3 gy-2">
                       
                        <div class="col-sm-3">
                            <label class="form-label">Pilih Negeri</label>
                            <select class="form-select select-2" aria-label="Default select example" id="filterNegeri" autocomplete="off">
                                <option value="" selected>Semua</option>
                                @foreach (Negeri::select('id', 'name')->get() as $value)
                                <option value="{{ $value->id }}">
                                    {{ $value->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-sm-3">
                            <label class="form-label">Pilih Tahun</label>
                            <select class="form-select select-2" aria-label="Default select example" id="filterTahun" autocomplete="off">
                                <option value="" selected>Semua</option>
                                @foreach (range(2023, now()->year) as $value)
                                <option value="{{ $value }}">
                                    {{ $value }}
                                </option>
                                @endforeach
                            </select>
                        </div>

                        @role('Pentadbir Negeri')
                        <div class="col-auto ms-auto">
                            <a class="btn btn-primary" onClick="add()" href="javascript:void(0)"><i class="fa fa-plus me-2"></i> Tambah Data</a>
                        </div>
                        @endrole
                    </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 Maklumat Negeri -->
<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"></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" novalidate>
                <div class="modal-body">
                    <input type="hidden" name="id" id="id" required>

                    <div class="row mb-3">
                        <label class="col-sm-4 col-form-label">Negeri</label>
                        <div class="col-sm-8">
                            <select class="form-select select-2" aria-label="Default select example" id="negeri_id" name="negeri_id" required>
                                @foreach (\App\Models\Negeri::all() as $value)
                                <option value="{{ $value->id }}">
                                    {{ $value->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-4 col-form-label">Tahun</label>
                        <div class="col-sm-8">
                            <select class="form-select select-2" aria-label="Default select example" id="tahun" name="tahun" required>
                                @foreach (range(2023, now()->year) as $value)
                                <option value="{{ $value}}">
                                    {{ $value }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="luas_negeri" class="col-sm-4 col-form-label">Keluasan Negeri (Hektar)</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="luas_negeri" name="luas_negeri" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="kawasan_hutan" class="col-sm-4 col-form-label">Kawasan Berhutan (Hektar)</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="kawasan_hutan" name="kawasan_hutan" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="kawasan_tidak_berhutan" class="col-sm-4 col-form-label">Kawasan Tidak Berhutan (Hektar)</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="kawasan_tidak_berhutan" name="kawasan_tidak_berhutan" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="hutan_simpan_kekal" class="col-sm-4 col-form-label">Hutan Simpanan Kekal (Hektar)</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="hutan_simpan_kekal" name="hutan_simpan_kekal" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="ladang_hutan" class="col-sm-4 col-form-label">Ladang Hutan (Hektar)</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="ladang_hutan" name="ladang_hutan" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="tanah_kerajaan" class="col-sm-4 col-form-label">Tanah Kerajaan (Hektar)</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="tanah_kerajaan" name="tanah_kerajaan" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="rizab_hidupan_liar" class="col-sm-4 col-form-label">Rizab Hidupan Liar (Hektar)</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="rizab_hidupan_liar" name="rizab_hidupan_liar" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="catuan_tebangan_tahunan" class="col-sm-4 col-form-label">Catuan Tebangan Tahunan (Hektar)<br><small class="text-muted">(untuk Hutan Simpanan Kekal)</small></label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="catuan_tebangan_tahunan" name="catuan_tebangan_tahunan" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary mx-1" type="submit" id="submit-button">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">
    let swalText = '';
    
    const table = $('#the-table').DataTable({
        ...datatables_config,
        scrollX: true,
        fixedColumns: {
            left: 3,
        },
        processing: true,
        // serverSide: true,
        ajax: {
            url : "{{ route('pengurusan.maklumat_dashboard_psoh') }}",
            data: (data) => {
                data.filterTahun = document.querySelector('#filterTahun').value;
                data.filterNegeri = document.querySelector('#filterNegeri').value;
            },
        },
        buttons: [
            {
                extend: 'selected',
                text: '<i class="fa fa-trash me-2"></i> Padam Pilihan',
                action: function (e, dt, node, config) {
                    fDeleteMultipleMaklumatDashboard();
                }
            },
            {
                extend: 'pdf',
                className: 'btn btn-danger',
                text: '<i class="fa fa-file-pdf me-2"></i> PDF',
                title: '',
                filename: 'Senarai Maklumat Dashboard e-GP-PSOH',
                exportOptions: {
                    columns: '.export-pdf',
                }
            },
            {
                extend: 'csv',
                className: 'btn btn-success',
                text: '<i class="fa fa-file-csv me-2"></i> CSV',
                filename: 'Senarai Maklumat Dashboard e-GP-PSOH',
                exportOptions: {
                    columns: '.export-csv',
                }
            },
        ],
        columns: [
            { data: null, title: '', width: '1%' },
            { data: 'DT_RowIndex', title: 'Bil', width: '1%', orderable: false, searchable: false, className: 'text-center export-pdf export-csv' },
            { data: 'negeri_name', name: 'negeri.name', title: 'Negeri', className: 'export-pdf export-csv' },
            { data: 'tahun', title: 'Tahun', className: 'export-pdf export-csv' },
            { data: 'luas_negeri', title: 'Keluasan Negeri', className: 'export-pdf export-csv' },
            { data: 'kawasan_hutan', title: 'Kawasan Berhutan', className: 'export-pdf export-csv' },
            { data: 'kawasan_tidak_berhutan', title: 'Kawasan Tidak Berhutan', className: 'export-pdf export-csv' },
            { data: 'hutan_simpan_kekal', title: 'Hutan Simpanan Kekal', className: 'export-pdf export-csv' },
            { data: 'ladang_hutan', title: 'Ladang Hutan', className: 'export-pdf export-csv' },
            { data: 'tanah_kerajaan', title: 'Tanah Kerajaan', className: 'export-pdf export-csv' },
            { data: 'rizab_hidupan_liar', title: 'Rizab Hidupan Liar', className: 'export-pdf export-csv' },
            { data: 'catuan_tebangan_tahunan', title: 'Catuan Tebangan Tahunan (untuk Hutan Simpanan Kekal)', className: 'export-pdf export-csv' },
            { data: 'user_name', name: 'updatedByUser.name', title: 'Dikemaskini Oleh', className: 'export-csv' },
            { data: 'updated_at', title: 'Tarikh Dikemaskini', className: 'export-csv' },
            { data: 'action', title: 'Tindakan', className: 'text-center', orderable: false, searchable: false },
        ],
        order: [[1, 'asc']],
    }).on('preXhr.dt', function() {
        $('#loading-indicator').show();
    }).on('xhr.dt', function () {
        $('#loading-indicator').hide();
    });

    function add(){
        $('#modal-form').trigger("reset");
        $('#modal-title').html("Tambah Maklumat Dashboard e-GP-PSOH");
        $('#submit-button').html("Simpan");
        $('#the-modal').modal('show');
        $('#id').val('');
        swalText = 'Maklumat Dashboard e-GP-PSOH Telah Berjaya Ditambah';
    }
    
    function edit_func(id) {
        $.ajax({
            type:"POST",
            url: "{{ route('pengurusan.maklumat_dashboard_psoh_edit') }}",
            data: { id: id },
            success: (result) => {
                $('#modal-form').trigger("reset");
                $('#modal-title').html("Kemaskini Maklumat Dashboard e-GP-PSOH");
                $('#submit-button').html("Kemaskini");
                $('#the-modal').modal('show');

                $('#id').val(result.id);
                $("#negeri_id").val(result.negeri_id).trigger('change');
                $("#tahun").val(result.tahun).trigger('change');
                $('#luas_negeri').val(result.luas_negeri);
                $('#kawasan_hutan').val(result.kawasan_hutan);
                $('#kawasan_tidak_berhutan').val(result.kawasan_tidak_berhutan);
                $('#hutan_simpan_kekal').val(result.hutan_simpan_kekal);
                $('#ladang_hutan').val(result.ladang_hutan);
                $('#tanah_kerajaan').val(result.tanah_kerajaan);
                $('#rizab_hidupan_liar').val(result.rizab_hidupan_liar);
                $('#catuan_tebangan_tahunan').val(result.catuan_tebangan_tahunan);

                swalText = 'Maklumat Dashboard e-GP-PSOH Telah Berjaya Dikemaskini';
            }
        });
    }

    function padamMaklumatDashboard(id, name){

        const nama = 'Maklumat Dashboard e-GP-PSOH '+ name;

        sPadam(null, nama, function() {
            $.ajax({
                type: "POST",
                url: "{{ route('pengurusan.maklumat_dashboard_psoh_delete') }}",
                data: { id : id },
                dataType: 'json',
                success: function(result) {
                    $('#the-table').DataTable().ajax.reload(null, false);
                    sSuccess('Maklumat Dashboard e-GP-PSOH Telah Berjaya Dipadam');
                },
                error: function(data) {
                    sFail('Gagal memadam Maklumat Dashboard e-GP-PSOH. Sila cuba lagi.');
                }
            });
        });
    }

    function fDeleteMultipleMaklumatDashboard() {
        
        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.maklumat-dashboard-psoh_delete_multiple') }}",
                data: { 
                    ids: selectedIds,
                    _token: '{{ csrf_token() }}' 
                },
                dataType: 'json',
                success: function(result){
                    $('#the-table').DataTable().ajax.reload(null, false);
                    sSuccess(result.result);
                }
            });
        });
    }

    $('#filterNegeri').on('change', function () {
        table.ajax.reload();
    });

    $('#filterTahun').on('change', function () {
        table.ajax.reload();
    });
    
    $('#modal-form').submit(function(e) {
        e.preventDefault();
        let formData = new FormData(this);
        $.ajax({
            type:'POST',
            url: "{{ route('pengurusan.maklumat_dashboard_psoh_store')}}",
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            success: (data) => {
                $("#the-modal").modal('hide');
                $('#the-table').DataTable().ajax.reload(null, false);
                $("#submit-button").html('Simpan').attr("disabled", false);

                sSuccess(swalText);
            },
            error: function(reject) {
            }
        });
    });
</script>
@endsection