@extends('layouts.index')

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


@section('content')
    <div class="row">
        <div class="col-lg-12">
            <form method="POST" action="{{ route('rekam_medis.update', $rekam_medis->id) }}" enctype="multipart/form-data">
                @csrf
                {{ method_field('PUT') }}
                <!-- Form Basic -->
                <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="{{ $rekam_medis->nomor_rekam_medis }}" 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="{{ old('tgl_periksa', $rekam_medis->tgl_periksa) }}" required>
                                </div>

                                <div class="form-group">
                                    <label for="pasien_id">Pilih Pasien</label> <i class="text-danger">*</i>
                                    <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', $rekam_medis->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_id">Pilih Terapis Utama</label> <i class="text-danger">*</i>
                                    <select name="dokter_id" class="form-control select2" required>
                                        @foreach ($dokters as $dokter)
                                            <option value="{{ $dokter->id }}"
                                                @if ($dokter->id == old('dokter_id', $dokterUtamaId)) 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', $rekam_medis->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', $rekam_medis->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', $rekam_medis->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', $rekam_medis->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 (in_array($dokter->id, $asisten)) selected @endif>
                                                {{ $dokter->nama_dokter }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="font-weight-bold d-block">
                                        Foto Rekam Medis
                                        <span class="text-muted font-weight-normal small">(Opsional, bisa tambah foto baru /
                                            hapus foto lama)</span>
                                    </label>

                                    {{-- FOTO LAMA --}}
                                    @if ($rekam_medis->fotos->count() > 0)
                                        <div class="row">
                                            @foreach ($rekam_medis->fotos as $foto)
                                                <div class="col-md-4 col-6 mb-3">
                                                    <div class="card shadow-sm">
                                                        <a href="{{ asset('storage/' . $foto->path) }}" target="_blank">
                                                            <img src="{{ asset('storage/' . $foto->path) }}"
                                                                class="card-img-top"
                                                                style="height: 120px; object-fit: cover;" alt="Foto">
                                                        </a>
                                                        <div class="card-body p-2">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input"
                                                                    id="del_foto_{{ $foto->id }}"
                                                                    name="delete_foto_ids[]" value="{{ $foto->id }}">
                                                                <label class="custom-control-label text-danger small"
                                                                    for="del_foto_{{ $foto->id }}">
                                                                    Hapus
                                                                </label>
                                                            </div>
                                                            <small class="text-muted d-block text-truncate">
                                                                {{ $foto->original_name }}
                                                            </small>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <small class="text-muted d-block mb-2">
                                            Centang foto yang ingin dihapus, lalu klik Submit.
                                        </small>
                                    @else
                                        <small class="text-muted d-block mb-2">Belum ada foto.</small>
                                    @endif

                                    {{-- TAMBAH FOTO BARU --}}
                                    <input type="file" class="filepond" id="foto" name="foto[]"
                                        accept="image/*" multiple>

                                    @error('foto')
                                        <small class="text-danger d-block mt-1">{{ $message }}</small>
                                    @enderror
                                    @error('foto.*')
                                        <small class="text-danger d-block mt-1">{{ $message }}</small>
                                    @enderror
                                    @error('delete_foto_ids')
                                        <small class="text-danger d-block mt-1">{{ $message }}</small>
                                    @enderror
                                    @error('delete_foto_ids.*')
                                        <small class="text-danger d-block mt-1">{{ $message }}</small>
                                    @enderror
                                </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">
                                @foreach ($rekam_medis->obatRm as $key => $obatRm)
                                    <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 ($obats as $obat)
                                                        <option value="{{ $obat->id }}"
                                                            data-harga={{ $obat->harga }}
                                                            @if ($obat->id == $obatRm->obat_id) selected @endif>
                                                            {{ $obat->nama_obat }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

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

                                        <div class="col-lg-2">
                                            <div class="form-group">
                                                <input type="text" name="jumlah[]" class="form-control jumlah"
                                                    id="jumlah" required value="{{ $obatRm->jumlah }}">
                                            </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">
                                                @if ($key == 0)
                                                    <a href="#!" class="btn btn-success btn-sm add-button"> <i
                                                            class="fa fa-plus"></i> </a>
                                                @else
                                                    <a href="javascript:void(0);"
                                                        class="btn btn-danger btn-sm remove-button"> <i
                                                            class="fa fa-trash"></i> </a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </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="{{ $rekam_medis->diskon }}" 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')
    <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>
        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,
                credits: false,
                acceptedFileTypes: ['image/jpeg', 'image/png', 'image/webp'],
                
                // 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>',
            });
        });
    </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 ($obats as $obat)
                        <option value="{{ $obat->id }}" data-harga={{ $obat->harga }}>{{ $obat->nama_obat }}</option>
                        @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>
        `;

            hitungTotal();

            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