@extends('layout.master')

@section('title', 'Imej')

@section('content')

<div class="page-header">
    <h5 class="page-title">Imej</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">Imej</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-end">
                        <a class="btn btn-primary" onClick="add()" href="javascript:void(0)"><i class="fa-solid fa-plus me-2"></i> Tambah Imej</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 Imej -->
<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 Imej</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 for="nama" class="col-sm-3 col-form-label required">Nama</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="nama" name="nama" value="" required>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label required">Negeri</label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="negeri" name="negeri" required>
                                <option value="" selected disabled>--- Sila Pilih ---</option>
                            </select>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label required">Tahun</label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="tahun" name="tahun" required>
                                <option value="" selected disabled>--- Sila Pilih ---</option>
                                @foreach (range(2015, date('Y')) as $year)
                                    <option value="{{ $year }}">{{ $year }}</option>
                                @endforeach
                            </select>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label required">Jenis</label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="type" aria-label="Default select example" name="type" required>
                                <option value="" selected disabled>--- Sila Pilih ---</option>
                                <option value="Dron">Dron</option>
                                <option value="Satelit">Satelit</option>
                            </select>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3 d-none" id="satelliteTypeRow">
                        <label class="col-sm-3 col-form-label required">Jenis Satelit</label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="satellite_type" aria-label="Default select example" name="satellite_type">
                                <option value="" selected disabled>--- Sila Pilih ---</option>
                                <option value="Sentinel">Sentinel</option>
                                <option value="Skysat">Skysat</option>
                                <option value="Dove">Dove</option>
                            </select>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="url" class="col-sm-3 col-form-label required">Pautan URL</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="url" name="url" value="" required>
                            <span class="invalid-feedback d-block error-text" role="alert"></span>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label required">Status</label>
                        <div class="col-sm-9">
                            <select class="form-select select-2" id="status" aria-label="Default select example" name="status" required>
                                <option value="Aktif">Aktif</option>
                                <option value="Tidak Aktif">Tidak Aktif</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="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="module">
    
    import ky from "{{asset('assets/vendor/ky/ky.js')}}";

    document.addEventListener('DOMContentLoaded', async () => {
        try {
            const res = await ky.get("{{ route('negeri.select-options') }}", {
                credentials: 'include',
            }).json();
            
            document.querySelector(`[name="negeri"]`).insertAdjacentHTML("beforeend", res.map(x => `<option value="${x.kod}">${x.name}</option>`).join(''));

        } catch (e) {
            console.error(await e);
        }
    });
</script>

<script type="text/javascript">

    $(document).ready( function () {
        $('#the-table').DataTable({
            ...datatables_config,
            scrollX: true,
            processing: true,
            // serverSide: true,
            ajax: {
                url : "{{ route('imej.index') }}",
                data: {
                    type : "{{ request()->type }}"
                }, 
            },
            buttons: [
                {
                    extend: 'selected',
                    text: '<i class="fa fa-trash me-2"></i> Padam Pilihan',
                    action: function (e, dt, node, config) {
                        fDeleteMultipleImej();
                    }
                },
               {
                   extend: 'pdf',
                   className: 'btn btn-danger',
                   text: '<i class="fa fa-file-pdf me-2"></i> PDF',
                   title: '',
                   filename: 'Senarai Imej',
                   exportOptions: {
                        columns: '.export-pdf',
                   }
               },
               {
                   extend: 'csv',
                   className: 'btn btn-success',
                   text: '<i class="fa fa-file-csv me-2"></i> CSV',
                   title: 'Senarai Imej',
                   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: 'nama', title: 'Nama', className: 'export-pdf export-csv' },
                { 
                    data: 'negeri.kod',
                    title: 'Negeri',
                    className: 'export-pdf export-csv',
                    render: function (data, type , row) {
                        return `${row.negeri?.name ?? '-'}`;
                    }
                },
                { data: 'year', title: 'Tahun', width: '1%', className: 'export-pdf export-csv text-center' },
                { data: 'url', title: 'Pautan URL', className: 'export-pdf export-csv', render:DataTable.render.ellipsis() },
                { data: 'type', title: 'Jenis', width: '1%', className: 'export-pdf export-csv' },
                { 
                    data: 'satellite_type', 
                    title: 'Model', 
                    width: '1%', 
                    className: 'export-pdf export-csv',
                    render: (data, type , row) => {                            
                        return `${row.type === 'Satelit' ? (row.satellite_type || 'Tiada') : '-'}`;
                    }
                },
                { 
                    data: 'status', 
                    title: 'Status', 
                    className: 'text-center export-pdf export-csv',
                    render: (data, type , row) => {
                        return `<span class="badge bg-${row.status === 'Aktif' ? 'success' : 'danger'}-transparent">${row.status}</span>`;
                    }
                },
                { data: 'action', title: 'Tindakan', width: '1%', className: 'text-center', orderable: false },

            ],
            order: [[1, 'asc']],
        });
    });
     
    function toggleSateliteTypeField() {
        const isSatelit = $('#type').val() === 'Satelit';
        $('#satelliteTypeRow').toggleClass('d-none', !isSatelit);
        $('#satellite_type').prop('required', isSatelit);

        if (!isSatelit) {
            $('#satellite_type').val(null).trigger('change');
        }
    }

    function resetModalForm() {
        $('#modal-form').trigger("reset");
        $(".error-text").html('');
        $(".is-invalid").removeClass("is-invalid");
        $('#id').val('');
        $('#type, #satellite_type, #negeri, #tahun').val(null).trigger('change');
        $('#status').val('Aktif').trigger('change');
    }

    $(document).on('change', '#type', toggleSateliteTypeField);

    $('#the-modal').on('hidden.bs.modal', function () {
        resetModalForm();
    });

    function add(){
        resetModalForm();
        $('#modal-title').html("Tambah Imej");
        $('#the-modal').modal('show');
        $('#btn-save').html('Simpan');
    }
         
    function edit_func(id){
        $.ajax({
            type:"POST",
            url: "{{ route('imej.edit') }}",
            data: { id: id },
            dataType: 'json',
            success: function(result){
                console.log(result);

                resetModalForm();
                $('#modal-title').html("Kemaskini Imej");
                $('#the-modal').modal('show');
                $('#id').val(result.id);
                $('#nama').val(result.nama);
                $('#type').val(result.type).trigger('change');
                if (result.type === 'Satelit') {
                    $('#satellite_type').val(result.satellite_type).trigger('change');
                }
                $('#negeri').val(result.kod_negeri).trigger('change');
                $('#tahun').val(result.year).trigger('change');
                $('#url').val(result.url);
                $("#status").val(result.status).trigger('change');
                $("#btn-save").html('Kemaskini');
            }
        });
    }

    function padamImej(id, name){

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

    function fDeleteMultipleImej() {
        
        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('imej.imej_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('imej.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 = 'Imej Baharu Berjaya Ditambah';
                if(data.kelulusan == 1) {
                    swalText = 'Imej Telah Berjaya Dikemaskini';
                }
                sSuccess(swalText);
            },
            error: function(reject) {
                $(".error-text").html('');
                $(".is-invalid").removeClass("is-invalid");

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