@section('optional_css')
    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

    <link rel="stylesheet" href="{{ asset('plugins/daterangepicker/daterangepicker.css') }}">
@endsection
@section('optional_js')
    <!-- Select2 -->
    <script src="{{ asset('plugins/select2/js/select2.full.min.js') }}"></script>

    <script src="{{ asset('plugins/fileinput/fileinput.min.js') }}"></script>

    <!-- Date Picker -->
    <script src="{{ asset('plugins/moment/moment.min.js') }}"></script>
    <script src="{{ asset('plugins/daterangepicker/daterangepicker.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('.select2').select2({
                theme: 'bootstrap4'
            })

            $('.select2patient').select2({
                theme: 'bootstrap4',
                placeholder: "Pilih Pasien",
                allowClear: true,
                delay: 250,
                minimumInputLength: 3,
                ajax: {
                    url: "{{ route('admin.patient.select2') }}",
                    data: function (params) {
                        var query = {
                            search: params.term,
                        }

                        return query;
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.nomor_identitas+' - '+item.nama_lengkap,
                                    id: item.id,
                                }
                            })
                        };
                    }
                },
            }),

            
            $('#service_id').on('select2:select', function (e) {
                var data = e.params.data;

                var service_id = data.id;
                var url = "{{ route('admin.service.getsingle', ":service_id") }}"
                url = url.replace(':service_id', service_id);
                $.get(url, function( data ) {
                    tarif = new Intl.NumberFormat("id-ID", { style: "currency", currency: "IDR" }).format(data.tarif);
                    $("#biaya_layanan").val(tarif)
                });
            });

            $('.datepicker').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            })
        })
    </script>
@endsection
<x-app-layout>
    <x-slot name="header">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ __('Booking') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            </div><!-- /.col -->
        </div><!-- /.row -->
    </x-slot>

    <form class="form-horizontal loading" action="{{ route('admin.booking.store') }}" method="POST" enctype="multipart/form-data">
        <x-card class="col-sm-12">
            <x-slot name="title">{{ __('Create') }} {{ __('Booking') }}</x-slot>
            @csrf
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Pilih Pasien') }}</x-label>
                <div class="col-sm-10">
                    <select name="patient_id" class="form-control select2patient {{ $errors->has('patient_id') ? 'is-invalid' : '' }}">
                        @if(!empty($pre_patient))
                            <option value="{{ $pre_patient->id }}" selected="selected">{{ $pre_patient->nomor_identitas }} - {{ $pre_patient->nama_lengkap }}</option>
                        @endif
                    </select>
                    @if ($errors->has('patient_id'))
                        <small class="error invalid-feedback">{{ $errors->first('patient_id') }}</small>
                    @endif
                </div>
            </div>
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Tanggal Pemeriksaan') }}</x-label>
                <div class="col-sm-10">
                    <x-input id="tanggal_pemeriksaan" class="datepicker {{ $errors->has('tanggal_pemeriksaan') ? 'is-invalid' : '' }}" type="text" name="tanggal_pemeriksaan" :value="old('tanggal_pemeriksaan')"/>
                    @if ($errors->has('tanggal_pemeriksaan'))
                        <small class="error invalid-feedback">{{ $errors->first('tanggal_pemeriksaan') }}</small>
                    @endif
                </div>
            </div>
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Layanan') }}</x-label>
                <div class="col-sm-10">
                    <select id="service_id" name="service_id" class="form-control select2 {{ $errors->has('service_id') ? 'is-invalid' : '' }}">
                        <option value="">Pilih Layanan</option>
                        @foreach($services as $service)
                            <option value="{{ $service->id }}" {{ ($service->id == old('service_id'))?'selected':'' }}>{{ $service->nama }}</option>
                        @endforeach
                    </select>
                    @if ($errors->has('service_id'))
                        <small class="error invalid-feedback">{{ $errors->first('service_id') }}</small>
                    @endif
                </div>
            </div>
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Biaya Layanan') }}</x-label>
                <div class="col-sm-10">
                    <x-input id="biaya_layanan" readonly class="{{ $errors->has('biaya_layanan') ? 'is-invalid' : '' }}" type="text" name="biaya_layanan" :value="old('biaya_layanan', 0)"/>
                </div>
            </div>
            <x-slot name="footer">
                <x-button class="float-right">{{ __('Save') }}</x-button>
            </x-slot>
        </x-card>
    </form>
</x-app-layout>