@extends('app')
@section('title', 'Invoice')


@push('styles')

<style>
     @font-face{
            font-family: 'bangle',
            src:url('/public/assets/fonts/SutonnyMJ Regular.ttf');
        }
        /* .bangla{
            font:normal 14px/24px  bangla !important;
        } */

        @media print {
        @page { margin: 0; }
         body { margin: 1.6cm; }
        .container{
            max-width: calc(960px - 80px);
            margin: 0px auto;
            padding: 0  .5rem;
            background: white;
        }
    .print-info{
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
            min-height: 10rem;
            font-size: 1.4rem;
            align-items: center;
        }

}
</style>
@endpush

@section('content')
<div class="content-page">
    <div class="content">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{route('orders')}}">Order</a></li>
                            <li class="breadcrumb-item"><a href="{{route('admin.customer_service')}}">New Order</a></li>
                            <li class="breadcrumb-item active">Invoice</li>
                        </ol>
                    </div>
                    <h4 class="page-title">Invoice</h4>
                </div>
            </div>
        </div>
        <!-- end page title -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    @if(!empty($order))
                    <div>
                            <div class="card-body">
                                <div class="horizontal-steps mt-4 mb-2 pb-2" id="tooltip-container">
                                    <div class="horizontal-steps-content">
                                        <div class="step-item @if($order->stage == 'ordered') current @endif">
                                            <span data-bs-container="#tooltip-container" data-bs-toggle="tooltip" data-bs-placement="bottom" title="20/08/2018 07:24 PM">Ordered</span>
                                        </div>
                                        <div class="step-item @if($order->stage != 'ready' && $order->stage != 'delivered' && $order->stage != 'ordered') current @endif">
                                            <span data-bs-container="#tooltip-container" data-bs-toggle="tooltip" data-bs-placement="bottom" title="21/08/2018 11:32 AM">Doing</span>
                                        </div>
                                        <div class="step-item @if($order->stage == 'ready') current @endif">
                                            <span >Ready</span>
                                        </div>
                                        <div class="step-item @if($order->stage == 'delivered') current @endif">
                                            <span>Delivered</span>
                                    </div>
                                </div>

                                    <div class="process-line" style="width: 33%;"></div>
                                </div>
                                <div class="text-end p-2">
                                    @if ($order->total > $order->payment )
                                    <button type="button" title="Pay Now"  data-bs-toggle="modal" data-bs-target="#paynow"  class="btn btn-warning">Pay Now</button>
                                    @elseif ($order->stage != 'delivered')
                                    <button type="button" title="Delivary"  data-bs-toggle="modal" data-bs-target="#delivery" class="btn btn-danger">Delivary</button>
                                    @elseif ($order->stage == 'delivered'  && $order->stage=='ready')
                                        <span class="text-success p-2">Delivered</span>
                                    @endif
                                    <button type="button" title="print" onclick="printNow()" href="{{route('invoice',$order->invoice_no)}}" class="btn btn-info">Print</button>
                                </div>
                            </div>
                        {{-- main invoice --}}
                        <div class="row"id="printerContent">
                            <div class="border" >
                                <div class="print-info text-center px-2">
                                    <div class="">
                                        <h2 class="fs-2 text-success">তরুণী <span class="bg-success text-light fs-3 p-1">টেইলার্স এন্ড এমব্রয়ডারী</span></h2>
                                        <p class="fs-4 bangla">মহিলাদের আধুনিক পোষাক তৈরিতে অনন্য <br>
                                            ২৯, চকভিউ সুপার মার্কেট (২য় তলা), চকবাজার, চট্টগ্রাম <br>
                                            ফোন: ০২৩৩৩৩৬৬৫০২, ০১৮৩৩-৯৪৯৪৬৪
                                        </p>
                                    </div>
                                    <hr>
                                <div class="text-center row justify-content-around">
                                    <div class="d-flex col-4">
                                            <label class="me-2">
                                                INVOIC NO:
                                            </label>
                                            <span>{{$order->invoice_no}}</span>
                                    </div>
                                    <div class="d-flex col-4">
                                            <label  class="me-2">
                                                Order Date:
                                            </label>
                                            <span>{{$order->order_date}}</span>

                                    </div>
                                    <div class="d-flex col-4">
                                            <label class="me-2"> Delivary Date:</label>
                                            <span>{{$order->delivary_date}}</span>
                                    </div>
                                </div> <hr>
                                <div class=" alienn-item-center d-flex">
                                    <table class="table bg-light">
                                        <tr>
                                            <th>
                                                <Strong>Name:</Strong>
                                            </th>
                                            <td>
                                                <span>
                                                    {{$order->customer->name}}
                                                </span>
                                            </td>
                                            <th>
                                                <Strong>
                                                    Phone:
                                                </Strong>
                                            </th>
                                            <td>
                                                <span>
                                                    {{$order->customer->contact}}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>
                                                <strong>
                                                    Address
                                                </strong>
                                                <td>
                                                    <span>
                                                        {{$order->customer->address ?? ''}}
                                                    </span>
                                                </td>
                                            </th>
                                            <th>
                                                <strong>
                                                    Payment Status:
                                                </strong>
                                                <td>
                                                    @if ($order->total > $order->payment )

                                                    <span class="text-danger">
                                                        Due : {{$order->total - $order->payment}}
                                                    </span>
                                                    @else
                                                        <span class="text-success">
                                                           Paid
                                                        </span>

                                                    @endif
                                                </td>
                                            </th>
                                        </tr>
                                    </table>
                                </div>
                                <div>
                                    <table class="table">
                                        <thead class="bg-light">
                                            <th>SL</th>
                                            <th>Item</th>
                                            <th>Description</th>
                                            <th>Quantity</th>
                                            <th>Rate</th>
                                            <th>Extra</th>
                                            <th>Total</th>
                                        </thead>
                                        <tbody>
                                            @php
                                                $total = 0;
                                            @endphp
                                            @foreach ($order->orderDetails as $item)
                                            @php
                                                $total+=$item->qty * $item->price
                                            @endphp
                                            <tr>
                                                <td>{{++$loop->index}} ({{$order->invoice_no}}/{{$item->id}})</td>
                                                <td>
                                                    @if ($item->product_type=='single')
                                                        {{$item->product->product_name}}
                                                    @else
                                                    {{$item->productset->group_product_name}} <br>
                                                        @forelse ($item->productset->product_support as $i)
                                                            {{$i->product->product_name}},
                                                        @empty
                                                            <p></p>
                                                        @endforelse
                                                    @endif
                                                </td>
                                                <td> {{$item->description}}</td>
                                                <td>{{$item->qty}}</td>
                                                <td>{{$item->price}}</td>
                                                <td>{{$item->extra}}</td>
                                                <td>{{$item->qty * $item->price}}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>

                                        <tfoot>
                                            <tr>
                                                <td colspan="6" class="text-end">
                                                    <label for="">Sub Total:</label>
                                                </td>
                                                <td>{{$total}}</td>
                                            </tr>
                                            <tr>
                                                <td colspan="6" class="text-end">
                                                    <label for="">Discount:</label>
                                                </td>
                                                <td>{{$order->discount}}</td>
                                            </tr>
                                            <tr>
                                                <td colspan="6" class="text-end">
                                                    <label for="">Total:</label>
                                                </td>
                                                <td>{{$order->total}}</td>
                                            </tr>
                                            <tr>
                                                <td colspan="6" class="text-end">
                                                    <label for="">Payment:</label>
                                                </td>
                                                <td>
                                                    {{$order->payment}}
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                    <p> <strong>বিদ্র:</strong>
                                        একমাসের মধ্যে কাপড় ডেলিভারি না নিলে ক্ষয়-ক্ষতির জন্য কর্তৃপক্ষ দায়ি থাকবেনা।
                                        বৈদ্যতিক গোলযোগ ও কারিগরি সমস্যার কারণে ডেলিভারি তারিখ পরিবর্তন হতে পারে।
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>
                    @endif
                </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="paynow" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Confirmation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
            </div> <!-- end modal header -->
            <h4 class="text-center">Total : {{$order->total}}</h4>
            <div class="modal-body">
                <label for="">Total Paid:</label>
                <input type="number" class="form-control" id="paidByCustomer" readonly value="{{$order->payment}}"><br> <br>
                <label for="">Payment:</label>
                <input type="number" class="form-control" id="payment">
                <p>Make sure the amount is right.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="paynow()">Confirm</button>
            </div> <!-- end modal footer -->
        </div> <!-- end modal content-->
    </div> <!-- end modal dialog-->
</div> <!-- end modal-->

<!-- Modal -->
<div class="modal fade" id="delivery" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="staticBackdropLabel">Want to deliver the product? </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
            </div> <!-- end modal header -->
            <div class="modal-body">
                <label for="">Invoice No:</label>
                <input type="number" class="form-control" id="invoice_no" placeholder="Insert the invoice no">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="delivery()">Confirm</button>
            </div> <!-- end modal footer -->
        </div> <!-- end modal content-->
    </div> <!-- end modal dialog-->
</div> <!-- end modal-->



@endsection
@push('scripts')

<script>

    function delivery(){
        let invoiceNo = $("#invoice_no").val();

        if(invoiceNo != ''){


        data = {
            invoiceNo
            }
        axios.get('/sanctum/csrf-cookie').then(response => {
            axios.post('{{route('delivering')}}',data,{
                Headers:{
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content'),
        //         'Content-Type':'application/json'
                }
            }).then(({data})=>{
                console.log(data);
                if(data.status == 'success'){
                    location.reload();
                }else{
                    alert(data.msg)
                }
            }).catch(({response})=>{
                console.log(response.data.message);
            })
        });
        }
    }

    function paynow(){
        let amount =  parseInt($('#payment').val());
        let total = parseInt($("#paidByCustomer").val()) + amount;
        let orderId = "{{$order->id}}"
        if(amount > total){
            alert("payment can not be more then total amount");
        }else{
            data = {
                amount,
                orderId
            }
            // console.log(data);
            axios.get('/sanctum/csrf-cookie').then(response => {
            axios.post('{{route('payment')}}',data,{
                Headers:{
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content'),
        //         'Content-Type':'application/json'
                }
            }).then(({data})=>{
                console.log(data);
                if(data.status == 'success'){
                    location.reload();
                }else{
                    alert(data.msg)
                }
            }).catch(({response})=>{
                console.log(response.data.message);
            })
        });
        }
    }

    const printNow = () => {
        // printerContent
        var printContents = document.getElementById("printerContent").innerHTML;
            var originalContents = document.body.innerHTML;

            document.body.innerHTML = printContents;

            window.print();

            document.body.innerHTML = originalContents;
    }
</script>
@endpush