@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-member-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>{{ $userinvoice->nama }}</strong><br>
                    {{ $userinvoice->alamat }}<br>
                    Phone: {{ $userinvoice->nomor_telepon }}<br>
                    Email: {{ $userinvoice->email }}
                    </address>
                </div>
                <!-- /.col -->
                <div class="col-sm-4 invoice-col">
                    <b>{{ $userinvoice->kode }}</b><br>
                    <br>
                    <b>Total Tagihan:</b> {{ $userinvoice->total_tagihan }}<br>
                    <b>Jatuh Tempo:</b> {{ $userinvoice->tanggal_jatuh_tempo_invoice }}<br>
                    <b>Metode Pembayaran:</b> {{ $userinvoice->metode_pembayaran }}<br>
                    <b>Status:</b> {{ $userinvoice->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>
                                    <th>{{ __('Kode Booking') }}</th>
                                    <th>{{ __('Jenis Layanan') }}</th>
                                    <th>{{ __('Tanggal Booking') }}</th>
                                    <th>{{ __('Tagihan') }}</th>
                                    <th>{{ __('Action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($userinvoice->details as $detail)
                                    <tr>
                                        <td>{{ $detail->booking->kode }}</td>
                                        <td>{{ $detail->booking->jenis_layanan }}</td>
                                        <td>{{ $detail->tanggal_booking }}</td>
                                        <td>{{ $detail->tagihan }}</td>
                                        <td><x-button-link class="btn-info btn-sm float-left mr-2" href="{{ route('member.booking.show', $detail->booking->id) }}">{{ __('Lihat Booking') }}</x-button-link></td>
                                    </tr>
                                @endforeach
                                <tr>
                                    <td colspan="3">Total Tagihan</td>
                                    <td colspan="2">{{ $userinvoice->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">
                    @if($userinvoice->status == 0)
                        <x-button-link class="btn-success float-right mr-2" href="{{ route('member.invoice.payment', $userinvoice->id) }}"><i class="far fa-credit-card"></i> {{ __('Payment') }}</x-button-link>
                    @endif
                    @if($userinvoice->status == 1)
                        <x-button-link href="{{ route('print-invoice', base64_encode($userinvoice->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>
                    @endif
                </div>
                </div>
            </div>
        <!-- /.invoice -->
        </div><!-- /.col -->
    </div><!-- /.row -->
</x-member-layout>