@extends('layouts.app')

@section('content')
    <div class="container-lg">
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="container mb-5 mt-3">
                            <div class="row d-flex align-items-baseline">
                                <div class="col-12">
                                    <a class="btn btn-info text-capitalize m-1 text-light" onclick="window.open('/payment-invoice/print/{{$data->id }}','BCCI-MC','width=600,height=400')" style="float:right" data-mdb-ripple-color="dark">
                                        <svg class="icon">
                                            <use
                                                xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-print') }}">
                                            </use>
                                        </svg>
                                        Print
                                    </a>
                                </div>
                                <hr>
                            </div>

                            <div class="container" id="printableArea">
                                <div class="col-md-12">
                                    <div class="text-center">
                                        <img src="{{ asset('backend/assets/img/setting/'.$setting->logo) }}" alt="">
                                        <h4 class="pt-0 text-info">{{ $setting->company_name??'' }}</h4>
                                        <p class="pt-0 text-info">{{ $setting->address??'' }}</p>
                                    </div>

                                </div>


                                <div class="row">
                                    <div class="col-xl-8">
                                        <ul class="list-unstyled">
                                            <li>To: <b>{{ $data->booking->customer->name??'' }}</b></li>
                                            <li>{{ $data->booking->customer->adress??'' }}</li>
                                            <li>{{ $data->booking->customer->city??'' }}, {{ $data->booking->customer->country??'' }}</li>
                                            <li>
                                                <svg class="icon">
                                                    <use
                                                        xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-phone') }}">
                                                    </use>
                                                </svg>
                                            {{ $data->booking->customer->phone??'' }}</li>
                                            <li>
                                                <svg class="icon">
                                                    <use
                                                        xlink:href="{{ asset('backend/vendors/@coreui/icons/svg/free.svg#cil-envelope-open') }}">
                                                    </use>
                                                </svg>
                                                {{ $data->booking->customer->email??'' }}</li>
                                        </ul>
                                    </div>
                                    <div class="col-xl-4">
                                        <h6><b>Voucher</b></h6>
                                        <ul class="list-unstyled">
                                            <li>Date: {{ $data->date??'' }}</li>
                                            <li>Invoice No: {{ $data->invoice_no??'' }}</li>
                                            <li>Booking No: {{ $data->booking->booking_no??'' }}</li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="row my-2 mx-1 justify-content-center">
                                    <table class="table table-striped table-borderless">
                                        <thead style="background-color:#84B0CA ;" class="text-white">
                                            <tr>
                                                <th scope="col">#</th>
                                                <th scope="col">Payment Description</th>
                                                <th scope="col">Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $i = 1;
                                                $payment_description = json_decode($data->payment_description);
                                            @endphp
                                            <tr>
                                                <td></td>
                                                <td>
                                                    @if(count($payment_description) > 0)
                                                        @foreach($payment_description as $details)
                                                                <p>{{ $details??'' }}</p>
                                                        @endforeach
                                                    @endif
                                                </td>
                                                <td>
                                                    {{ $data->amount??'' }}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="row">
                                    <div class="col-xl-8">
                                        <p class="ms-3">
                                            Note
                                        </p>
                                    </div>
                                    <div class="col-xl-4">
                                        <table>
                                            <tr>
                                                <td><span class="text-black me-4">Sub Total </span></td>
                                                <td>: {{ $data->amount }}</td>
                                            </tr>
                                            <tr>
                                                <td><span class="text-black me-3"> Total Cost </span></td>
                                                <td>: {{ $data->booking->total??0 }}</td>
                                            </tr>
                                            <tr>
                                                <td><span class="text-black me-3"> Total Paid </span></td>
                                                <td>: {{ $data->booking->paid??0 }}</td>
                                            </tr>
                                            <tr>
                                                <td><span class="text-black me-3"> Due </span></td>
                                                <td>: {{ $data->booking->total - $data->booking->paid }}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row-->
    </div>
@endsection