@extends('layouts.master')

@section('title', 'Invoice Print | Alboosh - Timeless authenticity, born of the desert')

@section('title-topbar', __('basic.print invoice'))

<!-- css insert -->
@section('css')

<!-- select 2 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css"
    integrity="sha512-aD9ophpFQ61nFZP6hXYu4Q/b/USW7rpLCQLX6Bi0WJHXNO7Js/fUENpBQf/+P4NtpzNX0jSgR5zVvPOJp+W2Kg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />


<style>
    @media print {

        .sidebar,
        .topbar,
        .next-form-steps,
        .previous-form-steps {
            display: none !important;
        }

        .sticky-footer {
            display: none;
        }

        @page {
            margin: 0;
        }

        body {
            margin: 0.1cm;
        }

    }
</style>

@endsection


<!-- content insert -->
@section('content')

<div class="container-fluid px-0 px-md-2 mt-3">

    <!-- page title link -->
    <div class="d-sm-flex align-items-center justify-content-between mb-3">
        <span class="mb-0 hide_in_print">
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.home') }}">{{ __('basic.dashboard') }}
                |</a>
            <a class="link-cust-text text-gray-200 fw-light" href="{{ route('sett.acc_pos_session.index') }}">{{
                __('basic.pos sessions') }} |
            </a>
            <a class="text-gray-300">{{ __('basic.print invoice') }}</a>
        </span>

        <div class="hide_in_print">
            <a class="bg-white btn btn-sm shadow-sm b-r-l-cont p-2 px-4 text-gray-400 me-2 printPage"><i
                    class="fas fa-print fa-sm text-gray-300 me-1"></i> {{ __('basic.print') }}</a>

            <a href="{{ route('sett.acc_pos.index', 'session_id=' . $invoice->pos_session_id) }}"
                class="main-color-bg btn btn-sm shadow-sm b-r-l-cont p-2 px-4 text-blue-200 printPage"><i
                    class="fas fa-print fa-sm text-blue-200 me-1"></i> {{ __('basic.back to pos') }}</a>
        </div>
    </div>

    <div class="card card-input shadow mb-3 pb-3">
        <!-- Card Header - Dropdown -->
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between hide_in_print">
            <h6 class="m-0 fw-bold text-gray-500"><i class="fas fa-receipt me-1"></i>
                {{ __('basic.print invoice') }}</h6>
        </div>


        <!-- Card Body -->
        <div class="card-body px-4 px-md-5">

            <div class="row justify-content-start justify-content-md-center">
                <div class="col-5 col-md-4">
                    <div class="text-center mb-3">
                        <div class="bg-login-image-cont">
                            <img src="{{ asset('img/dashboard/system/paincurelogo.png') }}">
                        </div>
                        <h5 class="fw-bold">{{ __('basic.invoice') }}</h5>
                        <h6 class="">{{ $clinicname }}</h6>
                        <h6 class="text-gray-500">{{ $invoice->branch->address }}</h6>
                    </div>


                    <div class="text-start mb-3">
                        <h6 class=""><span class="text-gray-500">{{ __('basic.client') }}: </span> {{
                            $invoice->receivable->full_name }}
                        </h6>
                        <h6 class="">
                            <span class="text-gray-500">{{ __('basic.date') }}: </span> {{ $invoice->paid_date }}
                        </h6>
                        <h6 class="">
                            <span class="text-gray-500">{{ __('basic.reference') }}: </span> {{ $invoice->code }}
                        </h6>
                    </div>

                    <div class="overflow-scroll">

                        <div class="table-responsive">

                            <table class="table table-modal table_normal  display" id="table-machine-totals-cat"
                                width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th class="text-xs text-start">{{ __('basic.item') }}</th>
                                        <th class="text-xs text-start">{{ __('basic.quantity') }}</th>
                                        <th class="text-xs text-start">{{ __('basic.price') }}</th>
                                        <th class="text-xs text-center">{{ __('basic.total') }}</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($invoice->invoice_items as $item)
                                    <tr>
                                        <td class="text-start text-truncate">
                                            {{ $item->categorizable->name }}
                                        </td>
                                        <td class="text-start text-truncate">
                                            {{ $item->price }}
                                        </td>
                                        <td class="text-start text-truncate">
                                            {{ $item->qty }}
                                        </td>
                                        <td class="text-center text-truncate">
                                            {{ $item->final_price }}
                                        </td>
                                    </tr>
                                    @endforeach

                                </tbody>
                            </table>
                        </div>

                    </div>

                    <div class="row px-0 my-2 mb-2">
                        <div class="col-7 fw-bold">
                            <i class="fas fa-dollar-sign me-2"></i>
                            <span id="service_final_info">{{ __('basic.total price') }}</span>
                        </div>
                        <div class="col-5 text-end">
                            <div class="text-s2 text-gray-600 fw-bold">{{ $invoice->final_price }}<small
                                    class="text-gray-300 text-xxxs"> {{ $invoice->currency->code }}</small>
                            </div>
                        </div>
                    </div>

                    <div class="row px-0 my-2 mb-2">
                        <div class="col-7 fw-bold">
                            <i class="fas fa-dollar-sign me-2"></i>
                            <span id="service_final_info">{{ __('basic.total paid') }}</span>
                        </div>
                        <div class="col-5 text-end">
                            <div class="text-s2 text-gray-600 fw-bold">{{ $invoice->total_paid }}<small
                                    class="text-gray-300 text-xxxs"> {{ $invoice->currency->code }}</small>
                            </div>
                        </div>
                    </div>

                    <div class="row px-0">
                        <div class="col-7 fw-bold">
                            <i class="fas fa-dollar-sign me-2"></i>
                            <span id="service_final_info">{{ __('basic.remaining amount') }}</span>
                        </div>
                        <div class="col-5 text-end">
                            <div class="text-s2 text-gray-600 fw-bold">{{ $invoice->final_price -
                                $invoice->sum_payment }}<small class="text-gray-300 text-xxxs"> {{
                                    $invoice->currency->code }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <a href="{{ route('sett.acc_pos.index', 'session_id=' . $invoice->pos_session_id) }}">
                <div class="justify-content-between align-items-center main-color-btn status-col-link b-r-l-cont p-4 clickable-item-pointer keyboad_show hide_in_print"
                    style="width: fit-content;" data-id="pay" data-type="pay" value="0">
                    <h6 class="fw-bold mb-0"><i class="fas fa-cash-register"></i> {{ __('basic.back to pos') }}</h6>
                </div>
            </a>


        </div>


    </div>

</div>

@endsection

<!-- js insert -->
@section('js')

<!-- select 2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"
    integrity="sha512-4MvcHwcbqXKUHB6Lx3Zb5CEAVoE9u84qN+ZSMM6s7z8IeJriExrV3ND5zRze9mxNlABJ6k864P/Vl8m0Sd3DtQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function() {
            $('.js-example-basic-single').select2();
            //hide search
            $('.select2-no-search').select2({
                minimumResultsForSearch: -1
            });
        });
</script>

<!-- validate jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
    integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    //Rules for the Validator plugin
        var $validator = $('#myform').validate({
            rules: {
                name: {
                    minlength: 3,
                },
            },
            messages: {
                email: {
                    required: "We need your email address to contact you",
                    email: "Your email address must be in the format of name@domain.com"
                },
                password_confirmation: {
                    equalTo: "Password does not match",
                }
            },
            //for inserting erros for some inputs that makes posation problem such as selector 2 and bt datapicker
            errorPlacement: function(error, element) {
                switch (element.attr("name")) {
                    case 'role':
                        error.insertAfter($("#role-js-error-valid"));
                        break;
                    case 'gendar':
                        error.insertAfter($("#gendar-js-error-valid"));
                        break;
                    default:
                        error.insertAfter(element);
                }

            },
        });
</script>



<script>
    $(document).ready(function() {

           setTimeout(function() {
            window.print();
           return false;
            }, 2000);
        })

    $('.printPage').click(function(){
           window.print();
           return false;
});
</script>

@endsection