@extends('layout_dashboard')
@section('title', $title ?? '')
@section('content')

<div class="app-content content">
    <div style="margin-top: 100px;"></div>
    <div class="content-wrapper bg-overview pb-2">
        <div class="container">
            <div class="row">
                <div class="col-md-2 text-tahapan pt-1">Overview Position:</div>
                <div class="col">
                    <div class="row" id="idListTahapan"></div>
                </div>
            </div>
        </div>
    </div>
    <form id="form_input" method="POST" enctype="multipart/form-data">
        <div class="container mt-2 mb-2">
            <div class="row">
                <div class="col-md-10">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="content-body">
                                <div class="row">
                                    <div class="form-group col-md-4" hidden>
                                        <input id="id" name="id" type="text" class="form-exclude-reset form-control">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <select id="loadDataNia" class="form-exclude-reset form-control"
                                            style="width:100%"></select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-4">
                                        <input id="nib" placeholder="NIB" type="text" class="form-control" readonly>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <input type="number" id="luas" class="form-control" placeholder="Luas (HA)"
                                            step="any" readonly>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <input id="jenis_hak" placeholder="Jenis Hak" type="text" class="form-control"
                                            readonly>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <input id="regional_entity" placeholder="Regional Entity" type="text"
                                            class="form-control" readonly>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <input id="kabupaten_unit" placeholder="Kecamatan - Unit" type="text"
                                            class="form-control" readonly>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <input id="penerbit_sk" placeholder="Kewenangan Kantah, Kanwil, BPN Pusat" type="text"
                                            class="form-control" readonly>
                                    </div>

                                    <div id="hidden-fields-container"></div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="content-body">
                                <div id="idListProgres"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="content-body">
                                <input type="hidden" id="idPengajuan" name="id_pengajuan" class="form-exclude-reset">
                                <button type="submit" id="idButtonSubmit" class="btn btn-warning">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="row">
                        <div class="mr-2 d-flex flex-column justify-content-center align-items-end position-fixed"
                            style="right: 0; padding-top: 120px;">
                            <a href="{{ url('/') }}" class="btn btn-primary mb-2 custom-menu">
                                <i class="feather icon-home" style=""></i>
                            </a>
                            <a href="{{ route('sertifikat-data.index') }}"
                                class="btn btn-primary mb-2 custom-menu">
                                <i class="feather icon-file-text" style=""></i>
                            </a>
                            <a href="{{ route('frontend.dashboard-monitoring') }}"
                                class="btn btn-primary mb-2 custom-menu">
                                <i class="feather icon-monitor" style=""></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('css')
<style>
    /* Center the icon */
    .custom-menu {
        border-radius: 50%; /* To make the button rounded */
        width: 60px; /* Set your desired width */
        height: 60px; /* Set your desired height */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
    }
</style>
@endsection

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

    $(document).ready(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });

        var formActionPost = "{{ route('sertifikat-data.store') }}";

        // Load page default Data 1
        setPagePengajuan(1);
        $("[data-id='1']").addClass("active");

        function setPagePengajuan(id) {
            $('#loadDataNia').val('').trigger('change');
            $("#form_input")[0].reset();
            $('#idPengajuan').val(id);

            var urlP = "{{ route('pengajuan.show', ":id") }}";
            urlP = urlP.replace(':id', id);

            $.ajax({
                url: urlP,
                method: 'GET',
                success: function (response) {
                    var dataList = response.data.tahapan;
                    $('#idListTahapan').empty();
                    $('#idListProgres').empty();
                    var stepNumber = 1;
                    var encounteredNames = {};
                    $.each(dataList,function(key, value) {
                        var cardTahapan = $(`<div class="card-tahapan" id="y_id_${value.id}">${value.nama}</div>`);
                        $('#idListTahapan').append(cardTahapan);

                        var allInputsYes = true;

                        $.each(value.progres,function(key, value) {
                            var inputFileElement;
                            if (value.is_file == 1) {
                                inputFileElement = `<input type="file" name="file[]" id="x_file_${value.id}" class="form-progress">`;
                            } else {
                                inputFileElement = `
                                    <div class="custom-checkbox" style="margin-top: 5px;">
                                        <div class="round">
                                            <input type="file" name="file[]" class="form-progress" hidden>
                                            <input type="checkbox" class="form-progress" id="x_file_${value.id}">
                                            <label for="x_file_${value.id}" class="check-box">
                                        </div>
                                    </div>`;
                            }
                            var formGroup = $(`
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-7">
                                            <div class="form-progress-filter-name">
                                                <label class="text-white">${stepNumber}. ${value.nama}</label><br>
                                                <div class="input-group">
                                                    <input type="hidden" name="id_progres[]" value="${value.id}" class="form-exclude-reset">
                                                    <input type="hidden" id="x_id_${value.id}" name="xid[]" value="" class="form-progress">
                                                    <input type="text" id="x_name_${value.id}" name="nama[]" value="" class="form-progress form-control col-md-12" autocomplete="off">
                                                    
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="input-group">
                                                <label>&nbsp;</label>
                                                <select id="x_opsi_${value.id}" name="opsi[]" class="select2 form-progress  form-select custom-select-group col-md-12">
                                                        <option value="">Tidak</option>
                                                        <option value="Ya">Ya</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label class="text-yellow"><i>${value.attachment}</i></label>
                                            <div class="input-group">
                                                ${inputFileElement}
                                            </div>
                                            <span id="x_data_file_${value.id}"></span>
                                        </div>
                                    </div>
                                </div>
                            `);

                            if (encounteredNames[value.nama]) {
                                formGroup.find(`#x_name_${value.id}`).closest('.form-group .form-progress-filter-name').hide();
                                encounteredNames[value.nama].push(formGroup.find(`#x_name_${value.id}`));
                            } else {
                                encounteredNames[value.nama] = true;
                                encounteredNames[value.nama] = [formGroup.find(`#x_name_${value.id}`)];
                                stepNumber++;
                            }

                            formGroup.find(`#x_name_${value.id}`).on('input', function() {
                                var inputVal = $(this).val();
                                $.each(encounteredNames[value.nama], function(index, inputElement) {
                                    inputElement.val(inputVal);
                                });
                            });
                            
                            $('#idListProgres').append(formGroup);
                            $('#x_opsi_'+value.id).select2();
                            

                            formGroup.find('.form-progress[type="file"]').change(function() {
                                $(this).closest('.form-group').find('.form-progress.form-select').val('Ya').trigger('change');
                            });

                            formGroup.find('.form-progress[type="checkbox"]').change(function() {
                                var selectElement = formGroup.find('.form-progress.form-select');
                                selectElement.val(this.checked ? 'Ya' : '').trigger('change');
                            });

                            formGroup.find('.form-progress.form-select').change(function () {
                                var checkboxElement = formGroup.find('.form-progress[type="checkbox"]');
                                checkboxElement.prop('checked', $(this).val() === 'Ya');
                            });

                            formGroup.find('.form-progress').change(function() {
                                var allYes = true;
                                // Check if all select elements in this form-group have a value of 'yes'
                                formGroup.find('.form-progress.form-select').each(function() {
                                    if ($(this).val() !== 'Ya') {
                                        allYes = false;
                                        return false; // Exit the loop if any select is not 'yes'
                                    }
                                });
                                if (allYes) {
                                    cardTahapan.addClass('active');
                                } else {
                                    cardTahapan.removeClass('active');
                                }
                            });
                        });
                    });
                },
                error: function (xhr, status, error) {
                    console.error(error);
                }
            });
        }

        // Click event handler for menu items
        $(".menu-pengajuan").click(function (e) {
            e.preventDefault();
            $(".menu-pengajuan").removeClass("active");
            $(this).addClass("active");
            
            var idP = $(this).data('id');
            setPagePengajuan(idP);
        });

        $('#form_input').on('submit', function(e) {
            e.preventDefault();
            var formData = new FormData($(this)[0]);
            $.ajax({
                url: formActionPost,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    xLoaderShow();
                },
                success: function(response, textStatus, xhr) {
                    xLoaderHide();
                    if (response.status) {
                        resetAllForm();
                        if (response.data.load_code) {
                            getSertifikatDetail(response.data.load_code)
                        }
                        Swal.fire({
                            icon: "success",
                            title: "Tersimpan",
                            text: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        });
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Gagal...",
                            text: response.message,
                        });
                    }
                },
                error: function(xhr, status, error) {
                    xLoaderHide();
                    console.error(error);
                }
            });
        });

        $('#loadDataNia').select2({
            placeholder: "Pilih NIA",
            ajax: {
                url: "{{ route('data.get-selection-sertifikat') }}",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        nia: params.term,
                        page: params.page || 1
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: data.pagination.more
                        }
                    };
                },
                cache: false
            },
            minimumInputLength: 1,
            width: 'resolve'
        });

        $('#loadDataNia').on('select2:select', function (e) {
            resetAllForm();
            var selectedNiaValue = e.params.data.id;
            getSertifikatDetail(selectedNiaValue);
        });

        function getSertifikatDetail(id) {

            var urlDtl = "{{ route('data.get-sertifikat-detail', [":idDtl"]) }}";
            urlDtl = urlDtl.replace(':idDtl', id);

            $.ajax({
                url: urlDtl,
                type: "GET",
                dataType: "json",
                beforeSend: function() {
                    xLoaderShow();
                },
                success: function (response) {
                    var dataDetail = response.data;
                    var hiddenFieldsContainer = $('#hidden-fields-container');
                    hiddenFieldsContainer.empty();
                    $.each(dataDetail, function(key, value) {
                        hiddenFieldsContainer.append('<input type="hidden" name="' + key + '" value="' + (value === null ? '' : value) + '">');
                    });

                    $('#id').val(dataDetail.id);
                    $('#nib').val(dataDetail.nib);
                    $('#luas').val(dataDetail.luas);
                    $('#jenis_hak').val(dataDetail.jenis_hak);
                    $('#regional_entity').val(dataDetail.regional_entity);
                    $('#kabupaten_unit').val(dataDetail.kabupaten + ' - ' + dataDetail.unit);
                    $('#penerbit_sk').val(dataDetail.penerbit_sk);

                    var selectedPengajuan = $('#idPengajuan').val();
                    var loadNia = id;
                    var urlProg = "{{ route('data.search-sertifikat', [":loadNia",":idPgj"]) }}";
                    urlProg = urlProg.replace(':loadNia', loadNia);
                    urlProg = urlProg.replace(':idPgj', selectedPengajuan);

                    $.ajax({
                        url: urlProg,
                        type: "GET",
                        dataType: "json",
                        success: function (responseDetail) {
                            xLoaderHide();
                            $.each(responseDetail.data.progres_sertifikat_data, function(key, value) {
                                // Update the existing form elements with new data
                                $('#x_id_' + value.id_progres).val(value.id);
                                $('#x_name_' + value.id_progres).val(value.nama);
                                $('#x_opsi_' + value.id_progres).val(value.opsi).prop('selected', true).trigger('change');
                                $('#x_file_' + value.id_progres).prop('checked', value.opsi == 'Ya');

                                if (value.file && value.file.length > 0) {
                                    $('#x_data_file_' + value.id_progres).html('<label class="text-white"><b>File:</b> <a href="'+ "{{ asset('uploads/certificates')}}/" + value.file +'" class="x-dashboard-link">'+value.file+'</a></label>');
                                } else {
                                    $('#x_data_file_' + value.id_progres).empty();
                                }
                            });
                        },
                        error: function(xhr, status, error) {
                            xLoaderHide();
                            console.log(error);
                        }
                    });
                },
                error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }

        function resetAllForm() {
            $('#form_input').find(':input:not(.form-exclude-reset)').each(function() {
                var elementType = this.tagName.toLowerCase();
                if (elementType === 'input' || elementType === 'textarea' || elementType === 'select') {
                    $(this).val('').prop('selected', false);
                    if (elementType === 'select') {
                        var id = $(this).attr('id');
                        if (id && id.includes('x_opsi')) {
                            $(this).val('').prop('readonly', true).trigger('change');
                        }
                    }
                }
                $('[id^="x_data_file_"]').empty();
            });
        }

    });

</script>
@endsection