@extends('layouts.index')

@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->nama_pasien }}</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>

                    <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>
                </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')
<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