@extends('template.template')

@section('title', 'Dashboard')

@section('content')
    <div class="card shadow-sm">
        <div class="card-header">
            <h3 class="card-title">INVOICE FORM</h3>
            <div class="card-toolbar gap-2">
                <a href="{{ url('/dokter') }}" class="btn btn-danger">Back</a>
            </div>
        </div>
        <div class="card-body">
            <h1 class="text-center fs-1 fw-bolder">{{ $transaksi->nomor_urut }}</h1>
            <div class="row mt-10">
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-4">
                            <label class="fs-4" for="">PASIEN</label>
                        </div>
                        <div class="col-md-8">
                            <label class="fs-4" for="">: {{ $transaksi->pasien_name }}</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label class="fs-4" for="">TANGGAL REGISTRASI</label>
                        </div>
                        <div class="col-md-8">
                            <label class="fs-4" for="">: {{ $transaksi->registrasi_tanggal }}</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label class="fs-4" for="">ASURANSI</label>
                        </div>
                        <div class="col-md-8">
                            <label class="fs-4" for="">: {{ $transaksi->asuransi_name }}</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label class="fs-4" for="">NOMOR ASURANSI</label>
                        </div>
                        <div class="col-md-8">
                            <label class="fs-4" for="">: {{ $transaksi->asuransi_no }}</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-4">
                            <label class="fs-4" for="">DOKTER</label>
                        </div>
                        <div class="col-md-8">
                            <label class="fs-4" for="">: {{ $transaksi->pegawai_name }}</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label class="fs-4" for="">RUANG PELAYANAN</label>
                        </div>
                        <div class="col-md-8">
                            <label class="fs-4" for="">: {{ $transaksi->ruang_pelayanan_name }}</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <label class="fs-4" for="">TINDAKAN</label>
                        </div>
                        <div class="col-md-8">
                            <label class="fs-4" for="">: {{ $transaksi->tindakan }}</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row d-flex justify-content-center">
                <div class="col-md-8">
                    <form action="" id="form" class="mt-10">
                        <div class="fv-row mb-10">
                            <label for="tindakan_tambahan" class="required form-label">Tindakan Tambahan</label>
                            <input type="text" name="tindakan_tambahan" id="tindakan_tambahan" class="form-control" value="{{ $transaksi->tambahan > 0 ? 'IYA' : 'TIDAK' }}" readonly>
                        </div>
                        <div class="fv-row mb-10">
                            <label for="catatan" class="form-label">Catatan</label>
                            <textarea class="form-control" name="catatan" id="catatan" rows="5" readonly>{{ $transaksi->catatan }}</textarea>
                        </div>
                        @if ($transaksi->tambahan > 0)
                            <div class="fv-row mb-10">
                                <label for="biaya_tambahan" class="required form-label">Biaya Tambahan</label>
                                <input type="text" name="biaya_tambahan" id="biaya_tambahan" class="form-control" value="" oninput="numericOnly(this)" onfocus="numericOnly(this)">
                            </div>
                        @endif
                        <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: {
                        'tindakan_tambahan': {
                            validators: {
                                notEmpty: {
                                    message: 'Tindakan Tambahan is required'
                                }
                            }
                        },
                        'biaya_tambahan': {
                            validators: {
                                callback: {
                                    message: 'Biaya Tambahan is required',
                                    callback: function(input) {
                                        const selectedValue = $('#tindakan_tambahan').val();
                                        if (selectedValue == 'IYA') {
                                            return input.value !== '';
                                        }
                                        return true;
                                    }
                                }
                            }
                        },
                    },

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

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

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

        function numericOnly(el) {
            el.value = el.value.replace(/[^0-9]/g, "");
            el.value = el.value.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }

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

                        const biaya_tambahan = $('#biaya_tambahan').val();
                        
                        var data = {
                            _token: "{{ csrf_token() }}",
                            biaya_tambahan: biaya_tambahan ? biaya_tambahan.replace(/\./g, '') : 0,
                            id : "{{$transaksi->id}}"
                        };

                        $.ajax({
                            url: "{{ url('/transaksi/store') }}",
                            type: "POST",
                            data: data,
                            dataType: 'JSON',
                            success: function(response) {
                                if (response.status) {
                                    Swal.fire({
                                        icon: "success",
                                        text: "Data Berhasil Disimpan",
                                        buttonsStyling: false,
                                        confirmButtonText: "close",
                                        customClass: {
                                            confirmButton: "btn btn-danger"
                                        }
                                    }).then(() => {
                                        const id = response.data;
                                        window.open(`{{ url('/transaksi/download/') }}/${id}`, '_blank');
                                        window.location.href = `{{ url('/transaksi') }}`;
                                    });
                                }
                            },
                            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