@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') }}">
    <!-- BS Stepper -->
    <link rel="stylesheet" href="{{ asset('plugins/bs-stepper/css/bs-stepper.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>

    <!-- BS-Stepper -->
    <script src="{{ asset('plugins/bs-stepper/js/bs-stepper.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,
                ajax: {
                    url: "{{ route('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,
                                }
                            })
                        };
                    }
                },
            }),

            $('.datepicker').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            })
        })

        var stepper = new Stepper($('.bs-stepper')[0])
    </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" action="{{ route('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="bs-stepper">
                <div class="bs-stepper-header" role="tablist">
                    <!-- your steps here -->
                    <div class="step" data-target="#pasien">
                        <button type="button" class="step-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger">
                            <span class="bs-stepper-circle">1</span>
                            <span class="bs-stepper-label">Pasien</span>
                        </button>
                    </div>
                    <div class="line"></div>
                    <div class="step" data-target="#layanan">
                        <button type="button" class="step-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger">
                            <span class="bs-stepper-circle">2</span>
                            <span class="bs-stepper-label">Layanan</span>
                        </button>
                    </div>
                    <div class="line"></div>
                    <div class="step" data-target="#pembayaran">
                        <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
                            <span class="bs-stepper-circle">3</span>
                            <span class="bs-stepper-label">Pembayaran</span>
                        </button>
                    </div>
                </div>
                <div class="bs-stepper-content">
                    <!-- your steps content here -->
                    <div id="pasien" class="content" role="tabpanel" aria-labelledby="logins-part-trigger">
                        <div class="clearfix"></div>
                        <div class="form-group row">
                            <h3>Pilih Pasien</h3>
                        </div>
                        <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' : '' }}">
                                    
                                </select>
                                @if ($errors->has('patient_id'))
                                    <small class="error invalid-feedback">{{ $errors->first('patient_id') }}</small>
                                @endif
                            </div>
                        </div>
                        <a class="btn btn-primary float-right" onclick="stepper.next()">Next</a>
                    </div>
                    <div id="layanan" class="content" role="tabpanel" aria-labelledby="logins-part-trigger">
                        <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 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>
                        <a class="btn btn-primary ml-2 float-right" onclick="stepper.next()">Next</a>
                        <a class="btn btn-primary ml-2 float-right" onclick="stepper.previous()">Previous</a>
                    </div>
                    <div id="pembayaran" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
                        <div class="form-group">
                        <label for="exampleInputFile">File input</label>
                        <div class="input-group">
                            <div class="custom-file">
                            <input type="file" class="custom-file-input" id="exampleInputFile">
                            <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                            </div>
                            <div class="input-group-append">
                            <span class="input-group-text">Upload</span>
                            </div>
                        </div>
                        </div>
                        <a class="btn btn-primary" onclick="stepper.previous()">Previous</a>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </x-card>
    </form>
</x-app-layout>