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

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

            $( 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();
            });
        })
    </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.update', $companyinvoice->id) }}" method="POST" enctype="multipart/form-data">
        <x-card class="col-sm-12">
            <x-slot name="title">{{ __('Edit') }} {{ __('Invoice') }}</x-slot>
            @csrf
            @method('PUT')
            <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', $companyinvoice->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">
                    <x-input id="perusahaan" disabled class="{{ $errors->has('perusahaan') ? 'is-invalid' : '' }}" type="text" name="perusahaan" :value="old('perusahaan', $companyinvoice->company->name)"/>
                    @if ($errors->has('perusahaan'))
                        <small class="error invalid-feedback">{{ $errors->first('perusahaan') }}</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', $companyinvoice->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', $companyinvoice->tanggal_jatuh_tempo)"/>
                    @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', $companyinvoice->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">
                        @if(count($companyinvoice->others) > 0)
                            @foreach ($companyinvoice->others as $other)
                            <tr class='detail-list'>
                                <td>
                                    <x-input type="text" name="biaya_nama[]" value="{{ $other->nama }}" placeholder="{{ __('Nama') }}"/>
                                </td>
                                <td>
                                    <x-input type="number" name="biaya_harga[]" value="{{ $other->biaya }}"  placeholder="{{ __('Biaya') }}"/>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-sm input-detail"><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>
                                </td>
                            </tr>
                            @endforeach
                        @else
                        <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>
                        @endif
                    </tbody>
                </table>
            </div>
            <x-slot name="footer">
                <x-button class="float-right">{{ __('Save') }}</x-button>
            </x-slot>
        </x-card>
    </form>
</x-app-layout>