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

    <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>
    <!-- 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>

    <!-- 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'
            })

            $( document ).on( "click" , ".input-detail", function(e) {
                var html = '';
                html += "<tr class='detail-list'>";
                html += '<td><x-input type="text" name="biaya_nama[]" placeholder="Nama"/></td>';
                html += '<td><x-input type="number" name="biaya_harga[]" placeholder="Biaya"/></td>';
                html += '<td><button type="button" class="btn btn-primary btn-sm input-detail mr-3"><i class="fas fa-plus"></i></button><button type="button" class="btn btn-danger btn-sm detail-remove"><i class="fas fa-trash"></i></button>';
                html += "</tr>";
                $("#detail-posting").append(html);
            });

            $( document ).on( "click" , ".detail-remove", function(e) {
                    $( this ).closest( ".detail-list" ).remove();
            });

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

                var company_id = data.id;
                var url = "{{ route('admin.cinvoice.billdatatable', ":company_id") }}"
                url = url.replace(':company_id', company_id);

                var table = $('.datatable').DataTable({
                    destroy: true,
                    processing: true,
                    serverSide: true,
                    ajax: url,
                    columns: [
                        { data: 'id', name: 'id' },
                        { data: 'company_name', name: 'companies.name' },
                        { data: 'kode', name: 'bookings.kode' },
                        { data: 'tanggal_pemeriksaan_kedatangan', name: 'bookings.tanggal_pemeriksaan_kedatangan' },
                        { data: 'nama_lengkap', name: 'booking_patients.nama_lengkap' },
                        { data: 'tagihan', name: 'tagihan' },
                        { data: 'project_name', name: 'company_projects.name' },
                        { data: 'status', name: 'status' },
                        { data: 'action', name: 'action', "orderable": false },
                    ],
                });
            });

            $('.checkall').click(function() {
                if ($(this).is(':checked')) {
                    $("input:checkbox").attr('checked', true)
                }
            });

            $('.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">{{ __('Invoice') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            </div><!-- /.col -->
        </div><!-- /.row -->
    </x-slot>

    <form class="form-horizontal" action="{{ route('admin.cinvoice.store') }}" method="POST" enctype="multipart/form-data">
        <x-card class="col-sm-12">
            <x-slot name="title">{{ __('Create') }} {{ __('Invoice') }}</x-slot>
            @csrf
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Kode') }}</x-label>
                <div class="col-sm-10">
                    <x-input id="kode" class="{{ $errors->has('kode') ? 'is-invalid' : '' }}" type="text" name="kode" :value="old('kode')"/>
                    @if ($errors->has('kode'))
                        <small class="error invalid-feedback">{{ $errors->first('kode') }}</small>
                    @endif
                </div>
            </div>
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Perusahaan') }} <span class="text-danger">*</span></x-label>
                <div class="col-sm-10">
                    <select id="company_id" name="company_id" class="form-control select2 {{ $errors->has('company_id') ? 'is-invalid' : '' }}">
                        <option value="">Pilih Perusahaan</option>
                        @foreach($companies as $company)
                            <option value="{{ $company->id }}" {{ ($company->id == old('company_id'))?'selected':'' }}>{{ $company->name }}</option>
                        @endforeach
                    </select>
                    @if ($errors->has('company_id'))
                        <small class="error invalid-feedback">{{ $errors->first('company_id') }}</small>
                    @endif
                </div>
            </div>
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Tanggal Invoice') }}</x-label>
                <div class="col-sm-10">
                    <x-input id="tanggal_invoice" class="datepicker {{ $errors->has('tanggal_invoice') ? 'is-invalid' : '' }}" type="text" name="tanggal_invoice" :value="old('tanggal_invoice')"/>
                    @if ($errors->has('tanggal_invoice'))
                        <small class="error invalid-feedback">{{ $errors->first('tanggal_invoice') }}</small>
                    @endif
                </div>
            </div>
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Tanggal Jatuh Tempo Invoice') }}</x-label>
                <div class="col-sm-10">
                    <x-input id="tanggal_jatuh_tempo_invoice" class="datepicker {{ $errors->has('tanggal_jatuh_tempo_invoice') ? 'is-invalid' : '' }}" type="text" name="tanggal_jatuh_tempo_invoice" :value="old('tanggal_jatuh_tempo_invoice')"/>
                    @if ($errors->has('tanggal_jatuh_tempo_invoice'))
                        <small class="error invalid-feedback">{{ $errors->first('tanggal_jatuh_tempo_invoice') }}</small>
                    @endif
                </div>
            </div>
            <div class="form-group row">
                <x-label class="col-sm-2">{{ __('Keterangan') }}</x-label>
                <div class="col-sm-10">
                    <textarea class="form-control" name="keterangan">{{ old('keterangan') }}</textarea>
                    @if ($errors->has('keterangan'))
                        <small class="error invalid-feedback">{{ $errors->first('keterangan') }}</small>
                    @endif
                </div>
            </div>
            <div class="col-12 table-responsive">
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th>{{ __('Nama') }}</th>
                            <th>{{ __('Biaya') }}</th>
                            <th width="20%">{{ __('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody id="detail-posting">
                        <tr>
                            <td>
                                <x-input type="text" name="biaya_nama[]" placeholder="{{ __('Nama') }}"/>
                            </td>
                            <td>
                                <x-input type="number" name="biaya_harga[]" placeholder="{{ __('Biaya') }}"/>
                            </td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm input-detail"><i class="fas fa-plus"></i></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-12 table-responsive">
                <table class="table datatable table-bordered">
                    <thead>
                        <tr>
                            <th>{{ __('ID') }}</th>
                            <th>{{ __('Perusahaan') }}</th>
                            <th>{{ __('Booking') }}</th>
                            <th>{{ __('Tanggal Pemeriksaan') }}</th>
                            <th>{{ __('Nama') }}</th>
                            <th>{{ __('Tagihan') }}</th>
                            <th>{{ __('Project') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th><input type="checkbox" class="checkall"></th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </div>
            <x-slot name="footer">
                <x-button class="float-right">{{ __('Save') }}</x-button>
            </x-slot>
        </x-card>
    </form>
</x-app-layout>