@extends('Layout::empty')
@section('head')
<style type="text/css">
    html,
    body {
        background: #f0f0f0;
    }

    .bravo_topbar,
    .bravo_header,
    .bravo_footer {
        display: none;
    }

    .invoice-amount {
        margin-top: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px 20px;
        display: inline-block;
        text-align: center;
    }

    .table-service-head {
        border: 1px solid #ddd;
        background-color: #f9f9f9;
    }

    .table-service-head th {
        padding: 5px 15px;
    }

    #invoice-print-zone {
        background: white;
        padding: 15px;
        margin: 60px auto 40px auto;
        max-width: 400px;
        border-radius: 7px;
    }

    .invoice-company-info {
        margin-top: 15px;
    }

    .invoice-company-info p {
        margin-bottom: 2px;
        font-weight: normal;
    }

    .servive-name {
        font-size: 18px;
        font-weight: bold;
        color: #5191fa;

    }

    .service-location {

        font-style: italic;
    }

    .service-info {
        margin-bottom: 14px;
    }

    .ticket-body {

        border-top: dashed 1px #dfdfdf;
        padding-top: 20px;
    }

    .ticket-body td {
        padding-bottom: 20px;
        vertical-align: top;
    }

    .ticket-body .label {
        color: #868686;
        margin-bottom: 5px;
    }

    .ticket-body .val {
        font-weight: 600;
        font-size: 15px;
    }

    .list-ticket {
        list-style: none;
    }

    .ticket-footer {
        margin-top: 20px;
        border-top: dashed 1px #dfdfdf;
        padding-top: 20px;
    }

    @media(max-width: 400px) {
        #invoice-print-zone {
            margin-left: 15px;
            margin-right: 15px;
        }
    }

</style>
<link href="{{ asset('module/user/css/user.css') }}" rel="stylesheet">
<script> 
@if(!request()->query('signature'))
    window.print();
@endif
</script>
<div id="invoice-print-zone">
    <div class="ticket-content">
        <div class="ticket-header d-flex justify-content-between">
            <div class="service-info">
                <div class="servive-name">{{$booking->service->title ?? ''}}</div>
                <div class="service-location"><i class="fa fa-map-marker"></i> {{$booking->service->address ??''}}</div>
            </div>
            <div class="print">
                <button onclick="window.print()" class="btn btn-warning btn-sm"><i class="fa fa-print"></i></button>
            </div>
        </div>
        <div class="ticket-body">
            <table width="100%" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="50%">
                        <div class="label"><i class="fa fa-calendar"></i> {{__("Date")}}</div>
                        <div class="val">{{display_date($booking->start_date)}}</div>
                    </td>
                    <td>
                        <div class="label"><i class="fa fa-money"></i> {{__("Price")}}</div>
                        <div class="val">{{format_money($booking->total)}}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        @if($booking->getMeta("booking_type") == "ticket")
                        <div class="label"><i class="fa fa-ticket"></i> {{__("Ticket")}}</div>
                        <div class="val">
                            @if($meta = $booking->getMeta('ticket_types') and !empty(json_decode($meta,true)))
                            <ul class="list-ticket">
                                @foreach(json_decode($meta,true) as $ticket_type)
                                @if(!empty($ticket_type['number']))
                                <li>{{$ticket_type['name'] ?? ''}} x {{$ticket_type['number']}}</li>
                                @endif
                                @endforeach
                            </ul>
                            @endif
                        </div>
                        @endif
                        @if($booking->getMeta("booking_type") == "time_slot")
                        <div class="label"><i class="fa fa-ticket"></i> {{__("Start Time")}}</div>
                        <div class="val">
                            <div class="slots-wrapper d-flex justify-content-start flex-wrap">
                                @if(!empty($timeSlots = $booking->time_slots))
                                @foreach( $timeSlots as $item )
                                <div class="btn btn-sm mr-2 mb-2 btn-success">
                                    {{ date( "H:i",strtotime($item->start_time)) }}
                                </div>
                                @endforeach
                                @endif
                            </div>
                        </div>
                        @endif
                    </td>
                    @if(!request()->query('signature'))
                    <td>
                        <div class="label"><i class="fa fa-user"></i> {{__("Customer")}}</div>
                        <div class="val">{{$booking->first_name}} {{$booking->last_name}}
                            <br>
                            {{$booking->email}}<br>
                            {{$booking->phone}}
                        </div>
                    </td>
                    @endif
                </tr>
            </table>
        </div>
        <div class="ticket-footer">
            @if(request()->query('signature'))
            <h4 class="text-center">{{__("QR Code is valid")}}</h4>
            @else
            <div class="text-center">{{__("Show QR Code at the counter")}}</div>
            @endif

            <div class="qr-content text-center">
                @php($qr = URL::signedRoute('qr-code', ['booking' => $booking->id]))
                {!! QrCode::size(200)->generate($qr); !!}
            </div>

        </div>
    </div>
</div>
@endsection
@section('footer')
<script type="text/javascript" src="{{ asset("module/user/js/user.js") }}"></script>
@endsection