@extends('admin.layouts.container')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/printable.css') }}" />
@endsection

@section('content')
    <div class="side-title">
        <div class="row">
            <div class="col-lg-8">
                <h3>{{$title ?? '' }}</h3>
            </div>
            <div class="col-lg-4 text-right">
                <a id="basic" href="#0" class="butn">طباعه جميع الفواتير  </a>
            </div>
        </div>
    </div>

    <div class="bills-tab">
        @if(count($bills))
            @foreach($bills as $bill)
                <div class="bill-item">
                    <div class="row">
                        <div class="col-lg-2">
                            <img src="{{asset('assets/web/images/bill.png')}}" alt="" class="bills-item-img">
                        </div>
                        <div class="col-lg-10">
                            <div class="text">
                                <h5>{{$bill->name}}</h5>
                                <button data-bill=".bill_container_{{$bill->id}}" class="btn bill_modal_button" type="button" data-toggle="modal" data-target="#billModal">عرض</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 d-none bill_container_{{$bill->id}} bills_container border">
                    <h4>({{$bill->id}}) فاتورة </h4>
                    <div class="row mt-5">
                        <div class="col-md-6">
                            <div class="bill_det">
                                <h6>إسم العميل: <span>{{$bill->name}}</span></h6>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="bill_det">
                                <h6> رقم الجوال: <span>{{$bill->phone}}</span></h6>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="bill_det">
                                <h6> التاريخ : <span> {{date('Y M d', strtotime($bill->created_at))}}</span></h6>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="bill_det">
                                <h6> الرقم الضريبي : <span>{{settings('tax_number')}}</span></h6>
                            </div>
                        </div>
                    </div>
                    <div class="responsive-table mt-4">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">البيان</th>
                                <th scope="col">السعر</th>
                                <th scope="col">القيمة المضافه</th>
                                <th scope="col">طريقة الدفع</th>
                                <th>كوبون</th>
                                <th>السعر بعد الخصم</th>
                                <th>القيمة المضافة بعد الخصم</th>
                                <th scope="col">المجموع </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>

                                @php
                                    /** @var TYPE_NAME $bill */
                                    $calcBill = calcBill($bill);
                                @endphp

                                <th scope="row">{{$calcBill['id']}}</th>
                                <td>كورس {{$calcBill['course_name']}}</td>
                                <td>{{$calcBill['price']}} SAR</td>
                                <td>{{$calcBill['added_value_amount']}} SAR</td>
                                <td>{{$calcBill['pay_way']}}</td>

                                @if($calcBill['coupon_discount'])
                                    {{-- discount value --}}
                                    <td>{{$calcBill['discount_amount']}}</td>
                                    {{-- Price after discount --}}
                                    <td>{{$calcBill['price_after_discount']}}</td>
                                    {{-- added value after discount --}}
                                    <td>{{$calcBill['added_value_amount_after_discount']}}</td>
                                    {{-- last total --}}
                                    <td>{{$calcBill['total']}}</td>
                                @endif
                                @if($calcBill['points'])
                                    {{--Dicount amount--}}
                                    <td>{{$calcBill['discount_amount']}}</td>
                                    {{-- Price after discount --}}
                                    <td>{{$calcBill['price_after_discount']}}</td>
                                    {{-- total --}}
                                    <td>{{$calcBill['total']}}</td>
                                @endif
                                @if(!$calcBill['coupon_discount'] && !$calcBill['points'])
                                    <td>{{$calcBill['total']}} SAR</td>
                                @endif
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="contact_item">
                                <div class="icon">
                                    <i class="fas fa-globe-americas"></i>
                                </div>
                                <p><a href="{{route('home')}}">الموقع الالكتروني</a></p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="contact_item">
                                <div class="icon">
                                    <i class="far fa-paper-plane"></i>
                                </div>
                                <p>{{$site_address}}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="contact_item">
                                <div class="icon">
                                    <i class="fas fa-phone"></i>
                                </div>
                                <p>{{$site_phone}} - {{$site_phone}}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="contact_item">
                                <div class="icon">
                                    <i class="fas fa-at"></i>
                                </div>
                                <p>{{$site_email}}</p>
                            </div>
                        </div>
                        <div class="col-md-6 m-auto">
                            <div class="contact_item d-flex justify-content-center">
                                <img src="{{$calcBill['qr_code']}}" alt="">
                            </div>
                        </div>
                    </div>
                    <hr>
                </div>
            @endforeach

            {{$bills->links()}}
        @endif
    </div>

    <div class="modal fade printable" id="billModal" tabindex="-1" aria-labelledby="billModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content modal_print">
                <div class="modal-header d-flex flex-row-reverse">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <button id="print_btn" class="btn btn-secondary print_button"><i class="fa fa-print"></i></button>
                </div>
                <div class="modal-body">
                    <div class="bill-modal-content bill_modal_container"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="">
        <div class="d-none print_bill_container_body cont_print bill-modal-content p-5"></div>
    </div>
@endsection

@section('inner_js')
    <script>

        $(document).ready(function () {
            let billContainers = '';
            $('.bills_container').each(function () {
                billContainers += $(this).html();
            });
            let printBillContainerBody = $('.print_bill_container_body');
            printBillContainerBody.html(billContainers);
        });

        $('.print_all').click(function () {
            let bills = $('.print_bill_container_body').parents(),
                printable = $('.printable');
            $('.bill_modal_container').html(bills.html());
            printable.addClass('print_all');
            printable.modal();
            // let printWindow = window.open('', 'Print window', 'height=400,width=600');
            // printWindow.document.open();
            // printWindow.document.write('<html><head><titl>+document.title+</titl></head><body class="print_body" onload="window.print()">'+bills.html()+'</body></html>');
            // printWindow.document.close();
            // setTimeout(function(){printWindow.close();},10);


        });



        $('.bill_modal_button').click(function () {
            $('.bill_modal_container').html($($(this).data('bill')).html());
            $('.printable').removeClass('print_all');

        });

        $('.modal.printable').on('shown.bs.modal', function (e) {
            $('.modal-dialog', this).addClass('focused');
            $('body').addClass('modalprinter');
            if ($(this).hasClass('print_all')){
                $('.print_button').trigger('click');
                $('.printable').modal('hide')
            }

        }).on('hidden.bs.modal', function () {
            $('.modal-dialog', this).removeClass('focused');
            $('body').removeClass('modalprinter');
            $('.printable').removeClass('print_all');
        });

    </script>
@endsection