@extends('template.template')

@section('title', 'Dashboard')

@section('content')
    <div class="card shadow-sm">
        <div class="card-header">
            <h3 class="card-title">REGISTRASI FORM</h3>
            <div class="card-toolbar gap-2">
                <a href="{{ url('/registrasi') }}" class="btn btn-danger">Back</a>
            </div>
        </div>
        <div class="card-body">
            <div class="row d-flex justify-content-center">
                <div class="col-md-8">
                    <form action="" id="form">
                        <div class="fv-row mb-10">
                            <label for="nik" class="required form-label">NIK</label>
                            <input type="hidden" name="registrasi_id" id="registrasi_id" value="{{$registrasi->id}}">
                            <input type="text" name="nik" id="nik" class="form-control" placeholder="NIK"
                                oninput="numericOnly(this)" onfocus="numericOnly(this)" maxlength="16" value="{{ $registrasi->pasien_nik }}" />
                            <span id="status_nik"></span>
                        </div>
                        <div class="fv-row mb-10">
                            <label for="name" class="required form-label">Nama Pasien</label>
                            <input type="text" name="pasien_name" id="pasien_name" class="form-control"
                                placeholder="Nama Pasien" readonly value="{{ $registrasi->pasien_name }}" />
                            <input type="hidden" name="pasien_id" id="pasien_id" value="{{ $registrasi->pasien_id }}" />
                        </div>
                        <div class="fv-row mb-10">
                            <label for="tanggal_lahir" class="required form-label">Tanggal Lahir Pasien</label>
                            <input type="date" name="tanggal_lahir" id="tanggal_lahir" class="form-control"
                                placeholder="Tanggal Lahir Pasien" readonly value="{{ $registrasi->tanggal_lahir }}" />
                        </div>
                        <div class="fv-row mb-10">
                            <label for="jenis_kelamin" class="required form-label">Jenis Kelamin</label>
                            <input type="text" name="jenis_kelamin" id="jenis_kelamin" class="form-control"
                                placeholder="Jenis Kelamin Pasien" readonly value="{{ $registrasi->jenis_kelamin }}" />
                        </div>
                        <div class="fv-row mb-10">
                            <label for="tanggal_berobat" class="required form-label">Tanggal Berobat</label>
                            <input type="date" name="tanggal_berobat" id="tanggal_berobat" class="form-control"
                                placeholder="Tanggal Berobat" value="{{ $registrasi->registrasi_tanggal }}" />
                        </div>
                        <div class="fv-row mb-10">
                            <label for="asuransi_id" class="form-label">Asuransi</label>
                            <select name="asuransi_id" id="asuransi_id" class="form-select" data-control="select2"
                                data-placeholder="Select an option">
                                <option value="-1" {{ $registrasi->asuransi_id == -1 ? 'selected' : '' }}>Tidak Asuransi</option>
                                @foreach ($asuransi as $item)
                                    @php
                                        $selected = '';
                                        if($item->id == $registrasi->asuransi_id){
                                            $selected = 'selected';
                                        }
                                    @endphp
                                    <option value="{{ $item->id }}" {{$selected}}>{{ $item->asuransi_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="fv-row mb-10">
                            <label for="asuransi_no" class="form-label">Nomor Asuransi</label>
                            <input type="text" name="asuransi_no" id="asuransi_no" class="form-control"
                                placeholder="Asuransi Nomor" value="{{ $registrasi->asuransi_no }}" />
                        </div>
                        <div class="fv-row mb-10">
                            <label for="pegawai_id" class="required form-label">Dokter</label>
                            <select name="pegawai_id" id="pegawai_id" class="form-select" data-control="select2"
                                data-placeholder="Select an option">
                                <option value="" disabled selected>Pilih Dokter</option>
                                @foreach ($pegawai as $item)
                                    @php
                                        $selected = '';
                                        if($item->id == $registrasi->pegawai_id){
                                            $selected = 'selected';
                                        }
                                    @endphp

                                    <option value="{{ $item->id }}" data-ruang="{{ $item->ruang_pelayanan_id }}" {{$selected}}>
                                        {{ $item->pegawai_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="fv-row mb-10">
                            <label for="ruang_pelayanan_name" class="required form-label">Ruang Pelayanan</label>
                            <input type="text" name="ruang_pelayanan_name" id="ruang_pelayanan_name" class="form-control"
                                placeholder="Ruang Pelayanan" readonly value="{{ $registrasi->ruang_pelayanan_name }}" />
                            <input type="hidden" name="ruang_pelayanan_id" id="ruang_pelayanan_id" value="{{ $registrasi->ruang_pelayanan_id }}" />
                        </div>
                        <div class="d-flex justify-content-end">
                            <button id="submit" class="btn btn-success">
                                <span class="indicator-label">
                                    Submit
                                </span>
                                <span class="indicator-progress">
                                    Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom_js')
    <script>
        let validator = null;

        $(document).ready(function() {
            const form = document.getElementById('form');

            validator = FormValidation.formValidation(
                form, {
                    fields: {
                        'nik': {
                            validators: {
                                notEmpty: {
                                    message: 'NIK Name is required'
                                }
                            }
                        },
                        'pasien_name': {
                            validators: {
                                notEmpty: {
                                    message: 'Pasien Name is required'
                                }
                            }
                        },
                        'tanggal_berobat': {
                            validators: {
                                notEmpty: {
                                    message: 'Tanggal Berobat is required'
                                },
                                callback: {
                                    message: 'Tanggal tidak boleh ke tanggal sebelumnya',
                                    callback: function(input) {
                                        if (input.value === '') {
                                            return true; // biar validasi kosong ditangani notEmpty
                                        }

                                        var selectedDate = new Date(input.value);
                                        var today = new Date();

                                        // Bikin hari ini jam 00:00 biar adil bandinginnya
                                        today.setHours(0, 0, 0, 0);

                                        return selectedDate >= today;
                                    }
                                }
                            }
                        },
                        'asuransi_no': {
                            validators: {
                                callback: {
                                    message: 'Asuransi Nomor is required',
                                    callback: function(input) {
                                        const selectedValue = $('#asuransi_id').val();
                                        if (selectedValue != -1) {
                                            return input.value !== '';
                                        }
                                        return true;
                                    }
                                }
                            }
                        },
                        'pegawai_id': {
                            validators: {
                                notEmpty: {
                                    message: 'Dokter is required'
                                }
                            }
                        },
                        'ruang_pelayanan_name': {
                            validators: {
                                notEmpty: {
                                    message: 'Ruang Pelayanan is required'
                                }
                            }
                        },

                    },

                    plugins: {
                        trigger: new FormValidation.plugins.Trigger(),
                        bootstrap: new FormValidation.plugins.Bootstrap5({
                            rowSelector: '.fv-row',
                            eleInvalidClass: '',
                            eleValidClass: ''
                        })
                    }
                }
            );

            var today = new Date().toISOString().split('T')[0];

            // Set atribut min ke input tanggal
            $('#tanggal_berobat').attr('min', today);

            $('#nik').change(function() {
                get_data_by_nik();
            });

            $('#pegawai_id').change(function() {
                get_ruang_pelayanan_by_pegawai();
            });

            $('#submit').click(function(e) {
                e.preventDefault();
                submit();
            });
        });

        function numericOnly(el) {
            el.value = el.value.replace(/[^0-9]/g, "");
        }

        function get_data_by_nik() {
            const nik = $('#nik').val();
            $('#status_nik').removeClass(['text-danger', 'text-success']);
            $('#status_nik').html(
                `<div class="spinner-border spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div> cek nip`
            );

            $.ajax({
                url: "{{ url('/pasien/get_by_nik') }}",
                type: "POST",
                data: {
                    nik: nik,
                    _token: "{{ csrf_token() }}"
                },
                dataType: 'JSON',
                success: function(response) {
                    if (response.status) {
                        $('#status_nik').html(``);
                        const data = response.data;
                        $('#pasien_id').val(data.id);
                        $('#pasien_name').val(data.pasien_name);
                        $('#tanggal_lahir').val(data.tanggal_lahir);
                        $('#jenis_kelamin').val(data.jenis_kelamin);
                    }
                },
                error: function(xhr) {
                    $('#status_nik').addClass('text-danger');
                    $('#status_nik').html(`NIK Tidak Terdaftar`);
                }
            });
        }

        function get_ruang_pelayanan_by_pegawai() {
            const ruang_id = $('#pegawai_id option:selected').data('ruang');
            $.ajax({
                url: "{{ url('/registrasi/get_ruang_pelayanan_by_pegawai') }}",
                type: "POST",
                data: {
                    ruang_id: ruang_id,
                    _token: "{{ csrf_token() }}"
                },
                dataType: 'JSON',
                success: function(response) {
                    if (response.status) {
                        const data = response.data;
                        $('#ruang_pelayanan_id').val(data.id);
                        $('#ruang_pelayanan_name').val(data.ruang_pelayanan_name);
                    }
                },
                error: function(xhr) {
                    console.log(xhr);

                }
            });
        }

        function submit() {
            if (validator) {
                validator.validate().then(function(status) {
                    if (status == 'Valid') {
                        $('#submit').attr("data-kt-indicator", "on");
                        $('#submit').attr("disabled", "true");

                        var data = {_token: "{{ csrf_token() }}"};

                        $.each($('#form').serializeArray(), function(_, field) {
                            data[field.name] = field.value;
                        });

                        $.ajax({
                            url: "{{ url('/registrasi/update') }}",
                            type: "POST",
                            data: data,
                            dataType: 'JSON',
                            success: function(response) {
                                if (response.status) {
                                    Swal.fire({
                                        icon: "success",
                                        text: "Data Berhasil Diupdate",
                                        buttonsStyling: false,
                                        confirmButtonText: "close",
                                        customClass: {
                                            confirmButton: "btn btn-danger"
                                        }
                                    }).then(() => {
                                        window.location.href = "{{ url('/registrasi') }}";
                                    });
                                }
                            },
                            error: function(xhr) {
                                var errorMessage = xhr.responseJSON ? xhr.responseJSON.msg :
                                    "Terjadi kesalahan!";
                                Swal.fire({
                                    icon: "error",
                                    text: errorMessage,
                                    buttonsStyling: false,
                                    confirmButtonText: "Close",
                                    customClass: {
                                        confirmButton: "btn btn-danger"
                                    }
                                });
                            },
                            complete: function() {
                                $('#submit').removeAttr("data-kt-indicator");
                                $('#submit').removeAttr("disabled");
                            }
                        });
                    }
                });
            }
        }
    </script>
@endsection