@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') }}">

    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.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>

    <!-- DataTables  & Plugins -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('.select2').select2({
                theme: 'bootstrap4'
            })
            $('.select2patient').select2({
                theme: 'bootstrap4'
            })
            $('.table').DataTable({
                order: [ 0, "desc" ],
            })

            $('.datepicker').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            })
            $('.selected').on('click', function() {
                var patient_id = $(this).closest('tr').find('.hidden-value').val();
                $("#patient_id option[value='" + patient_id + "']").prop("selected", true);
                $('.select2patient').trigger('change');
            });
            $('.unselected').on('click', function() {
                var patient_id = $(this).closest('tr').find('.hidden-value').val();
                $("#patient_id option[value='" + patient_id + "']").prop("selected", false);
                $('.select2patient').trigger('change');
            });
        })
    </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('admin.company.booking.store-bulk', $company_id) }}" 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">{{ __('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">{{ __('Project') }}</x-label>
                <div class="col-sm-10">
                    <select id="company_project_id" name="company_project_id" class="form-control select2 {{ $errors->has('company_project_id') ? 'is-invalid' : '' }}">
                        <option value="">Pilih Proyek</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}" {{ ($project->id == old('company_project_id'))?'selected':'' }}>{{ $project->name }}</option>
                        @endforeach
                    </select>
                    @if ($errors->has('company_project_id'))
                        <small class="error invalid-feedback">{{ $errors->first('company_project_id') }}</small>
                    @endif
                </div>
            </div>
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Pembayaran') }}</x-label>
                <div class="col-sm-10">
                    <select id="pembayaran" name="pembayaran" class="form-control select2 {{ $errors->has('pembayaran') ? 'is-invalid' : '' }}">
                        <option value="">Pilih Pembayaran</option>
                        <option value="cash" {{ ("cash" == old('pembayaran'))?'selected':'' }}>Cash</option>
                        <option value="invoice" {{ ("invoice" == old('pembayaran'))?'selected':'' }}>Invoice</option>
                    </select>
                    @if ($errors->has('pembayaran'))
                        <small class="error invalid-feedback">{{ $errors->first('pembayaran') }}</small>
                    @endif
                </div>
            </div>
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Patient') }}</x-label>
                <div class="col-sm-10">
                    <select id="patient_id" name="patient_id[]" multiple="multiple" class="form-control select2patient {{ $errors->has('patient_id') ? 'is-invalid' : '' }}">
                        <option value="">Pilih Patient</option>
                        @foreach($patients as $patient)
                            <option value="{{ $patient->id }}" {{ (in_array($patient->id, old('patient_id', [])))?'selected':'' }}>{{ $patient->nama_lengkap }}</option>
                        @endforeach
                    </select>
                    @if ($errors->has('patient_id'))
                        <small class="error invalid-feedback">{{ $errors->first('patient_id') }}</small>
                    @endif
                </div>
            </div>
            <div class="col-12 table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>{{ __('ID') }}</th>
                            <th>{{ __('No Identitas') }}</th>
                            <th>{{ __('Nama Lengkap') }}</th>
                            <th>{{ __('No Telepon') }}</th>
                            <th>{{ __('Alamat') }}</th>
                            <th>{{ __('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($patients as $patient)
                            <tr>
                                <td>{{ $patient->id }}</td>
                                <td>{{ $patient->nomor_identitas }}</td>
                                <td>{{ $patient->nama_lengkap }}</td>
                                <td>{{ $patient->nomor_telepon }}</td>
                                <td>{{ $patient->alamat }}</td>
                                <td class="text-center">
                                    <input type="hidden" class="hidden-value" value="{{ $patient->id }}">
                                    <x-button-link class="btn btn-info selected">
                                        Pilih
                                    </x-button-link>
                                    <x-button-link class="btn btn-danger unselected">
                                        Hapus
                                    </x-button-link>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <x-slot name="footer">
                <x-button class="float-right">{{ __('Save') }}</x-button>
            </x-slot>
        </x-card>
    </form>
</x-app-layout>