@extends('backend.master')
@section('title')
    {{ ___('common.Invoice') }}
@endsection
@section('content')
    <div class="page-content">

        {{-- bradecrumb Area S t a r t --}}
        <div class="page-header">
            <div class="row">
                <div class="col-sm-6">
                    <h4 class="bradecrumb-title mb-1">{{ ___('common.invoice') }}</h1>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="javascript:void(0)">{{ ___('common.home') }}</a></li>
                            <li class="breadcrumb-item">{{ ___('common.invoice') }}</li>
                        </ol>
                </div>
                <div class="col-sm-6">
                    <!-- Bookmark Start-->
                    <div class="bookmark">
                        <ul>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-inbox">
                                        <polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
                                        <path
                                            d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z">
                                        </path>
                                    </svg></a></li>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-message-square">
                                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                                    </svg></a></li>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-command">
                                        <path
                                            d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z">
                                        </path>
                                    </svg></a></li>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-layers">
                                        <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                                        <polyline points="2 17 12 22 22 17"></polyline>
                                        <polyline points="2 12 12 17 22 12"></polyline>
                                    </svg></a></li>
                            <li><a href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-star bookmark-search">
                                        <polygon
                                            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                                        </polygon>
                                    </svg></a></li>
                        </ul>
                    </div>
                    <!-- Bookmark Ends-->
                </div>
            </div>
        </div>
        {{-- bradecrumb Area E n d --}}

        <section class="section section-lg pt-2 bg-gray-200">
            <div class="row justify-content-center">
                <div class="col-lg-12">
                    <div class="d-flex flex-column flex-lg-row align-items-center justify-content-end mb-20">
                        <div class="d-flex justify-content-right">
                            <button class="btn btn-primary ot-btn-primary me-2"><span class="far fa-file-pdf me-2"></span>
                                {{ ___('common.download_pdf') }}</button>
                            <button class="btn ot-btn-info"><span
                                    class="fas fa-print me-2"></span>{{ ___('common.print_invoice') }} </button>
                        </div>
                    </div>
                    <div class="ot-card  border-gray-300 p-4 p-md-5 position-relative">
                        <div
                            class="ot-invoice justify-content-between pb-4 pb-md-5 mb-4 mb-md-5 border-bottom border-gray-300">
                            <div class="ot-address">
                                <a href="{{ route('dashboard') }}">
                                    <input type="hidden" name="global_light_logo" id="global_light_logo"
                                        value="{{ @globalAsset(setting('light_logo'), '154x38.png') }}" />
                                    <input type="hidden" name="global_dark_logo" id="global_dark_logo"
                                        value="{{ @globalAsset(setting('dark_logo'), '154x38.png') }}" />

                                    <img id="sidebar_full_logo" class="full-logo logo-auto setting-image"
                                        src="{{ userTheme() == 'default-theme' ? @globalAsset(setting('light_logo'), '154x38.png') : @globalAsset(setting('dark_logo'), '154x38.png') }}"
                                        alt="" />
                                </a>
                                <ul class="p-0 simple-list mt-10">
                                    <li class="list-group-item fw-normal border-0 ps-0 py-1">140, 13B, Banani</li>
                                    <li class="list-group-item fw-normal border-0 ps-0 py-1">Dhaha, Bangladesh</li>
                                    <li class="list-group-item fw-normal border-0 ps-0 py-1">contact@onesttech.com</li>
                                </ul>
                            </div>
                            <div class="ot-address">
                                <h2 class="mb-3">{{ ___('common.invoice') }}</h2>
                                <h6><strong>{{ ___('common.status') }}: </strong> <small
                                        class="p-2 bg-primary text-light rounded-1
                            ">{{ ___('common.PAID') }}</small>
                                </h6>
                            </div>
                        </div>
                        <div class="row ot-invoice justify-content-between mb-4 mb-md-5 mt-3">
                            <div class="col-sm">
                                <h5>{{ ___('common.client_information') }}:</h5>
                                <div>
                                    <ul class="p-0 simple-list">
                                        <li class="list-group-item font-weight-norma border-0 ps-0 py-1">Abdullah</li>
                                        <li class="list-group-item font-weight-norma border-0 ps-0 py-1">
                                            <strong>{{ ___('common.phone') }}:</strong>
                                            01521431059
                                        </li>
                                        <li class="list-group-item font-weight-norma border-0 ps-0 py-1">
                                            <strong>{{ ___('common.email') }}:</strong>
                                            abdullah@gmail.com
                                        </li>
                                        <li class="list-group-item font-weight-norma border-0 ps-0 py-1">Dhaka, Bangladesh
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-sm col-lg-4">
                                <dl class="row text-sm-right">
                                    <dt class="col-6"><strong>{{ ___('common.invoice_no') }}:</strong></dt>
                                    <dd class="col-6">00123</dd>
                                    <dt class="col-6"><strong>{{ ___('common.date_issued') }}:</strong></dt>
                                    <dd class="col-6">31/03/2021</dd>
                                    <dt class="col-6"><strong>{{ ___('common.date_due') }}:</strong></dt>
                                    <dd class="col-6">30/04/2021</dd>
                                </dl>
                            </div>
                        </div>
                        <div class="row ot-invoice mt-3">
                            <div class="col-12">
                                <div class="table-responsive">
                                    <table class="table mb-0">
                                        <thead class="bg-gray-300 border-top border-bottom">
                                            <tr>
                                                <th scope="row" class="border-0 text-left">
                                                    {{ ___('common.Item') }}</th>
                                                <th scope="row" class="border-0">
                                                    {{ ___('common.Description') }}</th>
                                                <th scope="row" class="border-0">{{ ___('common.price') }}
                                                </th>
                                                <th scope="row" class="border-0">{{ ___('common.qty') }}
                                                </th>
                                                <th scope="row" class="border-0">{{ ___('common.total') }}
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <th scope="row" class="text-left fw-bold h6">Blue Color T-shirt</th>
                                                <td>Blue Color Tshirt Descreption</td>
                                                <td>৳999,00</td>
                                                <td>1</td>
                                                <td>৳999,00</td>
                                            </tr>
                                            <tr>
                                                <th scope="row" class="text-left fw-bold h6">Mango Bar (large)</th>
                                                <td>Mango Bar (large) Descreption</td>
                                                <td>৳150,00</td>
                                                <td>20</td>
                                                <td>৳3000,00</td>
                                            </tr>
                                            <tr>
                                                <th scope="row" class="text-left fw-bold h6">Blue Color T-shirt</th>
                                                <td>Blue Color Tshirt Descreption</td>
                                                <td>৳999,00</td>
                                                <td>1</td>
                                                <td>৳999,00</td>
                                            </tr>
                                            <tr>
                                                <th scope="row" class="text-left fw-bold h6">Mango Bar (large)</th>
                                                <td>Mango Bar (large) Descreption</td>
                                                <td>৳150,00</td>
                                                <td>20</td>
                                                <td>৳3000,00</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="d-flex justify-content-end text-right mb-4 py-4 border-bottom">
                                    <div class="mt-4">
                                        <table class="table table-clear ot-table">
                                            <tbody>
                                                <tr>
                                                    <td class="left"><strong>{{ ___('common.subtotal') }}</strong>
                                                    </td>
                                                    <td class="right">৳8.497,00</td>
                                                </tr>
                                                <tr>
                                                    <td class="left"><strong>{{ ___('common.discount') }}
                                                            (20%)</strong></td>
                                                    <td class="right">৳1,699,40</td>
                                                </tr>
                                                <tr>
                                                    <td class="left"><strong>{{ ___('common.vat') }} (10%)</strong>
                                                    </td>
                                                    <td class="right">৳679,76</td>
                                                </tr>
                                                <tr>
                                                    <td class="left"><strong>{{ ___('common.total') }}</strong></td>
                                                    <td class="right"><strong>৳7.477,36</strong></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <h4>Payments to:</h4><span class="email-address">payment@onesttech.com</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection