@extends('tenant.layouts.master')

@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.home') => '/',
            __('breadcrumb.accounting') => '/accounting/accounts',
            __('breadcrumb.payment_check') => '#',
        ],
    ])
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'accounting.accounts-tree'])
@endsection

@section('style')
    <style>
        .check-card {
            border: .03rem solid black;
            border-radius: 15px
        }
    </style>
@endsection

@section('content')
    <div>
        <button class="btn orange-btn btn-sm print-bond-btn mb-2">
            @lang('general.print')
        </button>

        <div id="printable-check">
            <div class="check-card">
                <div class="card-header">
                    <div>
                        <h3> @lang('accounting/checks/exchange-check.exchange_check_number') : {{ $exchange_check->number }}</h3>
                    </div>
                </div>

                <div class="card-body">
                    <div class="d-flex">
                        <div>
                            <h4 class="mb-3"> @lang('accounting/checks/exchange-check.payable_to') :</h4>
                            <h4 class="mb-3"> @lang('accounting/checks/exchange-check.amount_in_words') :</h4>
                            <h4 class="mb-3">@lang('accounting/checks/exchange-check.date') :</h4>
                            <h4 class="mb-3"> @lang('accounting/checks/exchange-check.in_payment_for') :</h4>
                        </div>

                        <div class="px-3">
                            <h5 class="mb-3 pt-1">____________</h5>
                            <h5 class="mb-3 pt-1 text-danger">{{ $exchange_check->amount }}  @lang('accounting/checks/exchange-check.only_dinar')</h5>
                            <h5 class="mb-3 pt-1">{{ $exchange_check->date }}</h5>
                            <h5 class="mb-3 pt-1">{{ $exchange_check->notice ?? ' __________________ ' }}</h5>
                        </div>
                    </div>
                </div>

                <div class="card-footer">
                    <div class="d-flex justify-content-around">
                        <div class="flex flex-column text-center">
                            <h3 class="mb-2">@lang('accounting/checks/exchange-check.signature_of_recipient')</h3>
                            <span>______________</span>
                        </div>
                        <div class="flex flex-column text-center">
                            <h3 class="mb-2"> @lang('accounting/checks/exchange-check.cashier')</h3>
                            <span>______________</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@push('script')
    <script type="module">
        import printSection from '/tenancy/assets/js/print.js';
        $('body').on('click', '.print-bond-btn', function(){
            let target = $('#printable-check').clone();
            let title = "سند صرف";
            const print_data = @json(Session::get('print_data'));
            printSection.print(target, print_data, title, false);
        });
    </script>
@endpush