@extends('back_office.layouts.app')

@section('content')
<style>
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    th,
    td {
        font-family: DejaVu Sans;
        font-size: 12px;
    }

    .panel {
        margin-bottom: 20px;
        background-color: #fff;
        border: 1px solid transparent;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    }

    .panel-default {
        border-color: #ddd;
    }

    .panel-body {
        padding: 15px;
    }

    table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0px;
        border-spacing: 0;
        border-collapse: collapse;
        background-color: transparent;
    }

    thead {
        text-align: left;
        display: table-header-group;
        vertical-align: middle;
    }

    th,
    td {
        border: 1px solid #ddd;
        padding: 6px;
    }

    .well {
        min-height: 20px;
        padding: 19px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    }
</style>

<header style="font-size:12px;font-weight: normal;">
    <div style="padding: 10px">
        <b>Date: </b> {{ $invoice->created_at->formatLocalized('%A %d %B %Y') }}<br />
        @if ($invoice->transaction_code)
        <b>Invoice #</b>{{ $invoice->transaction_code }}
        @endif
        <a href="{{ route('breakdown-service.zone.payments.invoice.download', ['id' => $invoice->id]) }}" style="float: right"
            class="btn btn-sm btn-info">Download Invoice</a>
    </div>
    <br />
</header>

<main style="font-size:12px;font-weight: normal;">
    <div style="padding: 10px">
        @if ($invoice->user)
        <h5>Customer Details:</h5>
        @endif
        <div class="panel panel-default">
            <div class="panel-body">
                @if ($invoice->user)
                <strong>CUSTOMER CODE:</strong> {{ $invoice->user->reference_code }}<br />
                <strong>CUSTOMER NAME:</strong> {{ $invoice->user->name }}<br />
                <strong>CUSTOMER Phone:</strong> {{ $invoice->user->phone }}<br />
                <strong>CUSTOMER Email:</strong> {{ $invoice->user->email }}<br />
                @endif
            </div>
        </div>
    </div>
    <div style="padding: 10px">
        <h5>Breakdown Service Details:</h5>
        <table class="table text-center table-striped">
            <thead>
                <tr>
                    <th class="text-center">Service Order ID</th>
                    <th class="text-center">Status</th>
                    <th class="text-center">Total Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="text-center">{{ $order->id ?? '' }}</td>
                    <td class="text-center">{{ $order->status ?? '' }}</td>
                    <td class="text-center">{{ $order->total_price ?? 0 }} <small>QAR</small></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div style="padding: 10px">
        <h5>Payment Details:</h5>
        <table class="table text-center table-striped">
            <thead>
                <tr>
                    <th class="text-center">Payment ID</th>
                    <th class="text-center">Transaction code</th>
                    <th class="text-center">AMOUNT</th>
                    <th class="text-center">Payment Method</th>
                    <th class="text-center">Payment STATUS</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="text-center">{{ $invoice->id }}</td>
                    <td class="text-center">{{ $invoice->transaction_code ?: '---' }} </td>
                    <td class="text-center">{{ $invoice->amount }} <small>QAR</small></td>
                    <td class="text-center">{{ $invoice->paymentType->payment_type ?? '' }} </td>
                    <td class="text-center">{{ $invoice->status }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</main>
@endsection