@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') }}">
    <!-- summernote -->
    <link rel="stylesheet" href="{{ asset('plugins/summernote/summernote-bs4.min.css') }}">
    <!-- CodeMirror -->
    <link rel="stylesheet" href="{{ asset('plugins/codemirror/codemirror.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/codemirror/theme/monokai.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>
    <!-- Summernote -->
    <script src="{{ asset('plugins/summernote/summernote-bs4.min.js') }}"></script>
    <!-- CodeMirror -->
    <script src="{{ asset('plugins/codemirror/codemirror.js') }}"></script>
    <script src="{{ asset('plugins/codemirror/mode/css/css.js') }}"></script>
    <script src="{{ asset('plugins/codemirror/mode/xml/xml.js') }}"></script>
    <script src="{{ asset('plugins/codemirror/mode/htmlmixed/htmlmixed.js') }}"></script>

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

    <!-- Bootstrap Switch -->
    <script src="{{ asset('plugins/bootstrap-switch/js/bootstrap-switch.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'
            })

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

            $("input[data-bootstrap-switch]").each(function(){
                $(this).bootstrapSwitch('state', $(this).prop('checked'));
            });
        })
    </script>
@endsection
<x-company-layout>
    <x-slot name="header">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ __('Pasien') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            </div><!-- /.col -->
        </div><!-- /.row -->
    </x-slot>
    <x-auth-validation-errors :errors="$errors" />
    <div class="row">
        <div class="col-sm-6">
            <x-card class="col-sm-12">
                <x-slot name="title">{{ __('Catatan') }}</x-slot>
                <ul>
                    <li>Format excel 2013 ke atas (.xlsx)</li>
                    <li>Contoh Format download <a href="{{ Storage::url('public/placeholder/import-user-perusahaan.xlsx') }}" target="_blank">disini</a></li>
                </ul>
            </x-card>
        </div>
        <div class="col-sm-6">
            <form class="form-horizontal" action="{{ route('company.patient.store-import') }}" method="POST" enctype="multipart/form-data">
                <x-card class="col-sm-12">
                    <x-slot name="title">{{ __('Import') }} {{ __('Pasien') }}</x-slot>
                    @csrf
                    <div class="form-group row">
                        <x-label class="col-sm-2">{{ __('File') }} <span class="text-danger">*</span></x-label>
                        <div class="col-sm-10">
                            <input type="file" name="file" class="form-control">
                            @if ($errors->has('file'))
                                <small class="error invalid-feedback">{{ $errors->first('file') }}</small>
                            @endif
                        </div>
                    </div>
                    <x-slot name="footer">
                        <x-button class="float-right">{{ __('Save') }}</x-button>
                    </x-slot>
                </x-card>
            </div>
        </form>
    </div>
</x-company-layout>