@section('optional_css')
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
@endsection
@section('optional_js')
    <!-- SweetAlert2 -->
    <script src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            $('.confirm-row').on('click', function() {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'success',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, confirm it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        event.preventDefault();
                        Swal.fire(
                            'Confirm!',
                            'Your file has been confirmed.',
                            'success'
                            )
                        this.closest('form').submit();
                    }
                })
            })
        })
    </script>
@endsection

<x-company-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>
    @if(session('success'))
        <x-alert-success>
            {{ session('success') }}
        </x-alert-success>
    @endif
    @if(session('delete'))
        <x-alert-danger>
            {{ session('delete') }}
        </x-alert-danger>
    @endif
    <div class="row">
        <div class="col-12">
        <!-- Main content -->
            <div class="invoice p-3 mb-3">
                <!-- title row -->
                <div class="row">
                <div class="col-12">
                    <h4>
                    <i class="fas fa-globe"></i> {{ Setting::getSetting('company-name') }}
                    </h4>
                </div>
                <!-- /.col -->
                </div>
                <!-- info row -->
                <div class="row invoice-info">
                <div class="col-sm-4 invoice-col">
                    From
                    <address>
                    <strong>{{ Setting::getSetting('company-name') }}</strong><br>
                    {{ Setting::getSetting('company-address') }}<br>
                    Phone: {{ Setting::getSetting('company-phone') }}<br>
                    Email: {{ Setting::getSetting('company-email') }}
                    </address>
                </div>
                <!-- /.col -->
                <div class="col-sm-4 invoice-col">
                    To
                    <address>
                    <strong>{{ $companyinvoice->company->name }}</strong><br>
                    {{ $companyinvoice->company->address }}<br>
                    Phone: {{ $companyinvoice->company->phone }}<br>
                    Email: {{ $companyinvoice->company->email }}
                    </address>
                </div>
                <!-- /.col -->
                <div class="col-sm-4 invoice-col">
                    <b>Invoice {{ $companyinvoice->kode }}</b><br>
                    <br>
                    <b>Total Tagihan:</b> {{ $companyinvoice->total_tagihan }}<br>
                    <b>Status:</b> {{ $companyinvoice->status_text() }}<br>
                </div>
                <!-- /.col -->
                </div>
                <!-- /.row -->

                <!-- Table row -->
                <div class="row">
                    <div class="col-12 table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <tr>
                                        <th>{{ __('Kode Booking') }}</th>
                                        <th>{{ __('Tanggal Pemeriksaan') }}</th>
                                        <th>{{ __('Nama') }}</th>
                                        <th>{{ __('Project') }}</th>
                                        <th>{{ __('Tagihan') }}</th>
                                    </tr>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($companyinvoice->details as $detail)
                                    <tr>
                                        <td>{{ $detail->bill->booking->kode }}</td>
                                        <td>{{ $detail->bill->booking->tanggal_pemeriksaan_kedatangan }}</td>
                                        <td>{{ $detail->bill->booking->patient->nama_lengkap }}</td>
                                        <td>{{ $detail->bill->project->name??'-' }}</td>
                                        <td>{{ $detail->tagihan }}</td>
                                    </tr>
                                @endforeach
                                <tr>
                                    <td colspan="4">Total Tagihan</td>
                                    <td>{{ $companyinvoice->details->sum('tagihan') }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                <!-- /.col -->
                </div>
                <!-- /.row -->

                <!-- this row will not appear when printing -->
                <div class="row no-print">
                <div class="col-12">
                    <x-button-link href="{{ route('print-invoice-company', base64_encode($companyinvoice->id.'|'.$companyinvoice->kode)) }}" target="_blank" type="button" class="btn btn-primary float-right" style="margin-right: 5px;">
                    <i class="fas fa-download"></i> Generate PDF
                    </x-button-link>
                </div>
                </div>
            </div>
        <!-- /.invoice -->
        </div><!-- /.col -->
    </div><!-- /.row -->
</x-company-layout>