@extends('admin.layouts.admin')
@section('title')
    {{ __('bonds') }}
@endsection
@section('content')
    <section class='main-side'>
        <div class="content_view">
            <div id="prt-content">

                <div class="box-invoice mb-3">
                    <div class="row align-items-center">
                        <div class="col-md-4 p-3">
                            <div class="company-info">
                                <h6 class="name">{{ setting('website_name') }}</h6>
                                <p>{{ setting('address') }} - مبنى / {{ setting('building_number') }}</p>
                                <p>الرقم الضريبى / 578595</p>
                                <p>جوال / {{ setting('phone') }}</p>
                                <p class="mb-0">
                                    الرمز / 5485
                                    -
                                    ص ب / {{ setting('postal_box') }}
                                </p>
                            </div>
                        </div>
                        <div class="text-center col-md-4 p-3">
                            <img class="img-fluid"
                                src="{{ setting('logo') ? display_file(setting('logo')) : asset('admin-asset/img/image-preview.webp') }}"
                                alt="" width="100">
                            <h6 class="fw-bold mt-2">سند الفاتورة - {{ $bond->invoice->id }}</h6>
                        </div>
                        <div class="col-md-4 p-3">
                            <div class="client-info">
                                <div class="holder">
                                    ببانات العميل
                                </div>
                                <h6 class="name">{{ $bond->invoice->client?->name }}</h6>
                                <p>جوال / {{ $bond->invoice->client?->phone }}</p>
                                <p>تاريخ السند / {{ $bond->created_at?->format('Y-m-d') }}</p>
                                <p>رقم السند / {{ $bond->id }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- <div class="header">
                    <div class="logo">
                        <img src="{{ display_file(setting('logo')) }}" alt="">
                    </div>
                    <h3>{{ setting('website_name') }} </h3>
                    <h3>
                        سند الفاتورة - {{ $bond->invoice->id }}
                    </h3>
                    <p>
                        رقم السند - {{ $bond->id }}
                    </p>
                </div> --}}
                {{-- <div class="content row gx-3 gy-2 my-2">
                    <div class="col-12 col-md-6 col-lg-2">
                        <p>
                            {{ __('admin.address') }}:
                            <span>
                                {{ setting('address') }}
                            </span>
                        </p>
                    </div>
                    <div class="col-12 col-md-6 col-lg-2">
                        <p>
                            {{ __('admin.Mobile') }}:
                            <span>
                                {{ setting('phone') }}
                            </span>
                        </p>
                    </div>
                    <div class="col-12 col-md-6 col-lg-2">
                        <p>
                            الرقم الضرريبي:
                            <span>
                                {{ setting('tax_no') }}
                            </span>
                        </p>
                    </div>
                    <div class="col-12 col-md-6 col-lg-2">
                        <p>
                            {{ __('admin.Date') }}:
                            <span>

                                {{ $bond->created_at?->format('Y-m-d') }}
                            </span>
                        </p>
                    </div>
                    <div class="col-12 col-md-6 col-lg-2">
                        <p>
                            {{ __('admin.patient') }}:
                            <span>
                                {{ $bond->invoice->client?->name }}
                            </span>
                        </p>
                    </div>



                </div> --}}
                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th>
                                    <strong>
                                        {{ __('admin.amount') }}
                                    </strong>
                                    <br>
                                    <strong>
                                        Amount
                                    </strong>
                                </th>
                                {{-- <th>
                                <strong>
                                    {{ __('admin.tax') }}
                                </strong>
                                <br>
                                <strong>
                                    Tax
                                </strong>
                            </th> --}}
                                <th>
                                    <strong>
                                        {{ __('admin.rest') }}
                                    </strong>
                                    <br>
                                    <strong>
                                        Rest
                                    </strong>
                                </th>
                                <th>
                                    <strong>
                                        طريقة الدفع
                                    </strong>
                                    <br>
                                    <strong>
                                        Payment Method
                                    </strong>
                                </th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{ $bond->amount }}</td>
                                {{-- <td>{{ $bond->tax }}</td> --}}
                                <td>{{ $bond->rest }}</td>
                                <td>{{ __($bond->bank_account?->account_name) }}</td>
                                {{-- <td>{{ __($bond->status) }}</td> --}}
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="foot-text d-flex flex-column align-items-center my-3">
                    <div class="qr">
                        {!! $bond->qrCode() !!}
                    </div>
                </div>
            </div>
            <div class="btn-holder d-flex justify-content-center">
                <button class='btn btn-warning btn-sm px-3 text-light' id="btn-prt-content">
                    <i class="fas fa-print"></i>
                    {{ __('admin.print') }}
                </button>
            </div>
        </div>
    </section>
@endsection
@push('css')
    <style>
        .main-content {
            padding: 50px 0;
        }

        .main-content .box {
            background-color: #fff;
            box-shadow: 0 0 10px #f1f1f1;
            border-radius: 10px;
            padding: 20px;
        }

        .main-content .box .header {
            display: flex;
            align-items: center;
            flex-direction: column;
            border-bottom: 1px solid #ddd;
        }

        .main-content .box .header h3 {
            font-size: 18px;
        }

        .main-content .box .header .logo {
            width: 120px;
        }

        .main-content .box .header .logo img {
            width: 100%;
        }

        .main-content .box .content {
            direction: rtl;
            padding: 20px;
        }

        .main-content .box .content p {
            font-weight: 800;
        }

        .main-content .box .content span {
            font-weight: 400;
        }


         table {
            width: 100%;
        }

         table thead {
            background-color: #f3f3f3;
        }

        table thead tr th {
            text-align: center;
            border: 1px solid #000;
            padding: 10px 20px;
        }

        table tbody tr td {
            text-align: center;
            border: 1px solid #000;
            padding: 10px 20px;
        }

        .foot-text .qr {
            width: 100px;
        }

        .qr img {
            width: 100%;
        }
    </style>
@endpush