@extends('layouts.index')

@push('style')
    <link href="https://cdn.jsdelivr.net/npm/filepond@4.32.10/dist/filepond.min.css" rel="stylesheet">

    <style>
        /* Biar look-nya mirip Bootstrap input */
        .filepond--root {
            font-family: inherit;
        }

        .filepond--panel-root {
            border-radius: .25rem;
            /* bootstrap-ish */
            background-color: #fff;
            border: 1px dashed #ced4da;
            /* dashed drop area */
        }

        .filepond--drop-label {
            color: #6c757d;
            /* text-muted */
        }

        .filepond--file-action-button {
            cursor: pointer;
        }

        .filepond--credits {
            display: none !important;
            /* hilangin credit */
        }
    </style>
@endpush


@section('content')
    <div class="row">
        <div class="col-lg-12">
            <!-- Form Basic -->
            <form method="POST" action="{{ route('rekam_medis.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="card mb-4">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">{{ $title }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="nomor_rekam_medis"> Nomor Rekam Medis</label> <i class="text-danger">*</i>
                                    <input type="text" name="nomor_rekam_medis" class="form-control"
                                        id="nomor_rekam_medis" placeholder="Nomor Pasien"
                                        value="{{ \Helper::nomorRekamMedis() }}" readonly required>
                                </div>

                                <div class="form-group">
                                    <label for="tgl_periksa"> Tgl Periksa</label> <i class="text-danger">*</i>
                                    <input type="text" name="tgl_periksa" class="form-control date" id="tgl_periksa"
                                        value="{{ date('Y-m-d') }}" required>
                                </div>

                                <div class="form-group">
                                    <label for="pasien_id">Pilih Pasien</label>
                                    <select name="pasien_id" class="form-control select2" required>
                                        <option value="">Pilih Pasien</option>
                                        @foreach ($pasiens as $pasien)
                                            <option value="{{ $pasien->id }}"
                                                @if ($pasien->id == old('pasien_id')) selected @endif>
                                                {{ @$pasien->nomor_pasien }} - {{ @$pasien->nama_pasien }} -
                                                {{ @$pasien->alamat }} - {{ @$pasien->no_hp }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="dokter_utama">Terapis Utama</label> <i class="text-danger">*</i>
                                    <select name="dokter_utama" class="form-control select2" required>
                                        <option value="">Pilih Terapis Utama</option>
                                        @foreach ($dokters as $dokter)
                                            <option value="{{ $dokter->id }}"
                                                @if ($dokter->id == old('dokter_id')) selected @endif>
                                                {{ $dokter->nama_dokter }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="catatan">Catatan <span
                                            class="text-muted font-weight-normal small">(Opsional)</span></label>
                                    <textarea name="catatan" id="catatan" class="form-control @error('catatan') is-invalid @enderror" rows="4"
                                        placeholder="Masukkan catatan tambahan... contoh : Komposisi Herbal yang didapatkan">{{ old('catatan' ?? '') }}</textarea>

                                    @error('catatan')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>

                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="keluhan">Keluhan</label> <i class="text-danger">*</i>
                                    <textarea name="keluhan" class="form-control" id="keluhan" rows="2" required>{{ old('keluhan') }}</textarea>
                                </div>

                                <div class="form-group">
                                    <label for="diagnosa">Diagnosa</label> <i class="text-danger">*</i>
                                    <input type="text" name="diagnosa" class="form-control" id="diagnosa"
                                        value="{{ old('diagnosa') }}" required>
                                </div>

                                <div class="form-group">
                                    <label for="penanganan">Penanganan</label> <i class="text-danger">*</i>
                                    <textarea name="penanganan" class="form-control" id="penanganan" rows="2" required>{{ old('penanganan') }}</textarea>
                                </div>

                                <div class="form-group">
                                    <label for="asisten[]">Asisten Terapis</label>
                                    <select name="asisten[]" class="form-control select2" multiple>
                                        @foreach ($dokters as $dokter)
                                            <option value="{{ $dokter->id }}"
                                                @if ($dokter->id == old('asisten')) selected @endif>
                                                {{ $dokter->nama_dokter }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="foto" class="font-weight-bold">
                                        Upload Foto
                                        <span class="text-muted font-weight-normal small">(Opsional/Tidak Wajib, upload
                                            foto bisa
                                            lebih dari satu)</span>
                                    </label>
                                    <input type="file" class="filepond" id="foto" name="foto[]" accept="image/*"
                                        multiple>
                                    <small class="text-muted">Bisa drag & drop, dan akan tampil list file yang
                                        dipilih.</small>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">{{ 'List Layanan ' . $title }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-4">
                                Layanan <i class="text-danger">*</i>
                            </div>

                            <div class="col-lg-2">
                                Harga <i class="text-danger">*</i>
                            </div>

                            <div class="col-lg-2">
                                Jumlah <i class="text-danger">*</i>
                            </div>

                            <div class="col-lg-3">
                                Sub Total <i class="text-danger">*</i>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12" id="dynamic-field">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <select name="obat_id[]" class="form-control select2 obat" required>
                                                <option value="">Pilih Layanan</option>
                                                @foreach ($kategori as $k)
                                                    <optgroup label="List Kategori {{ $k->nama_kategori }}">
                                                        @foreach ($k->obat as $o)
                                                            <option value="{{ $o->id }}"
                                                                data-harga={{ $o->harga }}>{{ $o->nama_obat }}
                                                            </option>
                                                        @endforeach
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <input type="number" name="harga[]" class="form-control harga"
                                                id="harga" required>
                                        </div>
                                    </div>

                                    <div class="col-lg-2">
                                        <div class="form-group">
                                            <input type="number" name="jumlah[]" class="form-control jumlah"
                                                id="jumlah" required value=1>
                                        </div>
                                    </div>

                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <input type="text" class="form-control sub-total" readonly>
                                        </div>
                                    </div>

                                    <div class="col-lg-1 my-auto">
                                        <div class="form-group">
                                            <a href="#!" class="btn btn-success btn-sm add-button"> <i
                                                    class="fa fa-plus"></i> </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-5">
                            <div class="col-md-4">
                                Diskon (%) <i class="text-danger">*Diskon dihitung persen dari total biaya</i>
                                <div class="form-group">
                                    <input type="number" name="diskon" class="form-control diskon" id="diskon"
                                        value="0" required>
                                </div>
                            </div>
                        </div>
                        <h4 class="total">Total : Rp. 0</h4>
                        <input type="hidden" name="total" value="0">


                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>

            </form>
        </div>
    </div>
@endsection

@push('script')
    {{-- FilePond JS (load sekali saja) --}}
    <script src="https://cdn.jsdelivr.net/npm/filepond@4.32.10/dist/filepond.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.min.js"></script>

    <script>
        console.log("test")
        document.addEventListener('DOMContentLoaded', function() {
            const inputElement = document.getElementById('foto');
            if (!inputElement || typeof FilePond === 'undefined') return;

            // Register plugins
            FilePond.registerPlugin(
                FilePondPluginFileValidateType,
                FilePondPluginImageResize,
                FilePondPluginImageTransform
            );

            FilePond.create(inputElement, {
                allowMultiple: true,
                storeAsFile: true, // penting: biar ikut submit form biasa (bukan AJAX)
                credits: false,

                acceptedFileTypes: ['image/jpeg', 'image/png', 'image/webp'],
                labelFileTypeNotAllowed: 'Hanya file gambar yang diperbolehkan',

                // Image compression settings
                imageResizeTargetWidth: 1920,
                imageResizeTargetHeight: 1920,
                imageResizeMode: 'contain',
                imageResizeUpscale: false,
                imageTransformOutputQuality: 85,
                imageTransformOutputMimeType: 'image/jpeg',

                labelIdle: 'Seret & jatuhkan foto di sini atau <span class="filepond--label-action">Pilih foto</span><br><small class="text-muted">Foto akan otomatis dikecilkan sizenya</small>',
                labelFileProcessing: 'Memproses...',
                labelFileProcessingComplete: 'Selesai',
                labelTapToCancel: 'Klik untuk membatalkan',
                labelTapToRetry: 'Klik untuk mencoba lagi',
            });
        });
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"
        integrity="sha512-USPCA7jmJHlCNRSFwUFq3lAm9SaOjwG8TaB8riqx3i/dAJqhaYilVnaf2eVUH5zjq89BU6YguUuAno+jpRvUqA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        function hitungTotal() {
            var total = 0;
            var totalTanpaDiskon = 0;
            var diskon = $("#diskon").val();
            if (!diskon) {
                diskon = 0;
            }
            $('.sub-total').each(function(i, e) {
                var harga = $(e).parent().parent().parent().find('.harga').val();
                var jumlah = $(e).parent().parent().parent().find('.jumlah').val();
                var subTotal = harga * jumlah;
                $(e).val(subTotal);

                total += subTotal;
                totalTanpaDiskon += subTotal;

            });
            total = total - (total * diskon / 100);

            $('.total').text('Total : Rp. ' + numeral(total).format('0,0'));
            $('input[name=total]').val(totalTanpaDiskon);
        }

        function init() {
            $('.obat').change(function() {
                const hargaAwal = $(this).find(':selected').data('harga');
                const harga = $(this).parent().parent().parent().find('.harga').val(hargaAwal);
                const jumlah = $(this).parent().parent().parent().find('.jumlah').val();
                const subTotal = harga * jumlah;

                $(this).parent().parent().parent().find('.sub-total').val(numeral(subTotal).format('0,0'))
                hitungTotal();
            });

            $('.jumlah').keyup(function() {
                const harga = $(this).parent().parent().parent().find('.harga').val();
                const jumlah = $(this).val();
                const subTotal = harga * jumlah;

                $(this).parent().parent().parent().find('.sub-total').val(numeral(subTotal).format('0,0'))
                hitungTotal();
            });

            $('.jumlah').change(function() {
                const harga = $(this).parent().parent().parent().find('.harga').val();
                const jumlah = $(this).val();
                const subTotal = harga * jumlah;

                $(this).parent().parent().parent().find('.sub-total').val(numeral(subTotal).format('0,0'))
                hitungTotal();
            });

            $('.harga').change(function() {
                const harga = $(this).val();
                const jumlah = $(this).parent().parent().parent().find('.jumlah').val();
                const subTotal = harga * jumlah;

                $(this).parent().parent().parent().find('.sub-total').val(numeral(subTotal).format('0,0'))
                hitungTotal();
            });

            $('.harga').keyup(function() {
                const harga = $(this).val();
                const jumlah = $(this).parent().parent().parent().find('.jumlah').val();
                const subTotal = harga * jumlah;

                $(this).parent().parent().parent().find('.sub-total').val(numeral(subTotal).format('0,0'))
                hitungTotal();
            });

            $('.diskon').change(function() {
                hitungTotal();
            });

            $('.diskon').keyup(function() {
                hitungTotal();
            });
        }

        $(document).ready(function() {
            var addButton = $('.add-button'); //Add button selector
            var wrapper = $('#dynamic-field'); //Input field wrapper
            var fieldHTML = `
        <div class="row">
            <div class="col-lg-4">
                <div class="form-group">
                    <select name="obat_id[]" class="form-control select2 obat" required>
                        <option value="">Pilih Layanan</option>
                        @foreach ($kategori as $k)
                        <optgroup label="List Kategori {{ $k->nama_kategori }}">
                            @foreach ($k->obat as $o)
                            <option value="{{ $o->id }}" data-harga={{ $o->harga }}>{{ $o->nama_obat }}</option>
                            @endforeach
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="col-lg-2">
                <div class="form-group">
                    <input type="number" name="harga[]" class="form-control harga" id="harga" required>
                </div>
            </div>

            <div class="col-lg-2">
                <div class="form-group">
                    <input type="number" name="jumlah[]" class="form-control jumlah" id="jumlah" required value=1>
                </div>
            </div>

            <div class="col-lg-3">
                <div class="form-group">
                    <input type="text" class="form-control sub-total" readonly>
                </div>
            </div>

            <div class="col-lg-1 my-auto">
                <div class="form-group">
                    <a href="javascript:void(0);" class="btn btn-danger btn-sm remove-button"> <i class="fa fa-trash"></i> </a>
                </div>
            </div>
        </div>
        `;

            init();

            //Once add button is clicked
            $(addButton).click(function() {
                $(wrapper).append(fieldHTML); //Add field html
                $('.select2').select2();


                $('.remove-button').click(function() {
                    $(this).parent().parent().parent().remove();
                    hitungTotal();
                });

                init();

            });

        });
    </script>
@endpush