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


@push('styles')

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

        @media print {
            .container{
            max-width: calc(960px - 80px);
            margin: 0px auto;
            padding: 0  2rem;
            background: white;
        }
    .print-info{
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
            min-height: 10rem;
            /* font-size: 1.6rem; */
            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="javascript: void(0);">Hyper</a></li>
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Forms</a></li>
                            <li class="breadcrumb-item active">Form Wizard</li>
                        </ol>
                    </div>
                    <h4 class="page-title">Search</h4>
                </div>
            </div>
        </div>
        <!-- end page title -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        {{-- <span class="justify-content-center text-center">
                            <h2 class="mt-md-4 text-success fs-1 text-uppercase font-weight-bold">Search</h2>
                            <p class="text-muted">[Order/Customer/Stuff]</p>
                        </span> --}}
                        <div class="col-md-8 offset-md-2">
                            <form action="{{route('admin.search')}}" class="justify-content-center" id="searchForm" method="POST">
                                @csrf
                                @method('post')
                                <div class="row p-md-4">
                                <label class="form-label ">Search :</label>
                                <div class="input-group ">
                                    <input type="text" name="search" id="search" class="form-control col-md-8" placeholder="Search items here" aria-label="Recipient's username">
                                    <select name="options" id="options" class="form-select col-md-2" onchange="handleSubmit()">
                                        <option value="order" selected>Order</option>
                                        <option value="customer" >Customer</option>
                                        <option value="stuff" >Stuff</option>
                                    </select>
                                    <button class="btn btn-dark col-md-2" type="submit" >
                                        <span id="loading" class="d-none spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                                        Check
                                    </button>
                                </div>
                                <p>Order id/ cutomer phone/ Stuff phone</p>
                            </div>
                        </form>
                    </div>
                    @if(!empty($order))
                    <div>
                        {{-- pay now --}}

                        <div class="text-end p-2">
                            <div class="horizontal-steps mt-4 mb-4 pb-5" 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' && $order->stage=='ready')
                                <button type="button" title="Delivary"  data-bs-toggle="modal" data-bs-target="#delivery" class="btn btn-danger">Delivary</button>
                                @elseif ($order->stage == 'delivered')
                                    <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">
                            <div class="border" id="printerContent">
                                <div class="print-info text-center px-2">
                                    <div class="">
                                        <h2 class="fs-1 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
                                                    </span>
                                                    @else{
                                                        <span class="text-success">
                                                           Paid
                                                        </span>
                                                    }
                                                    @endif
                                                </td>
                                            </th>
                                        </tr>
                                    </table>
                                </div>
                                <div class="table">
                                    <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
                                            @forelse ($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>

                                            @empty

                                            @endforelse
                                        </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

                    {{-- profile --}}
                    <div class="row justify-content-center">
                        @if (!empty($customer))
                        <x-customers.show :customer="$customer"/>
                        @elseif (!empty($employee))
                        <x-stuffs.show :employee="$employee"/>
                        @elseif(!empty($order))
                            <div class="row">

                            </div>
                        @endif
                    </div>
                </div>
                </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 Payment:</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 = $('#payment').val();
        let total = $("#paidByCustomer").val() + amount;
        let orderId = "{{$order->id ?? '' }}"
        console.log(total, amount)
        // if(amount > total + 1){
        //     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{
                    // console.log(data.msg)
                    alert(data.msg)
                }
            }).catch(({response})=>{
                console.log(response.data.message);
            })
        });
        }
    // }





    function handleSubmit(){
        let search = $("#search").val();
        let options = $("#options").val();
        if(search==''){
            alert('Search field cann\'t be empty');
        }
        let data = {
            search,options
        }
        // console.log(data);
        axios.get('/sanctum/csrf-cookie').then(response => {
            axios.post(`{{route('admin.check')}}`,data,{
                Headers:{
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content'),
                    'Content-Type':'application/json'
                }
            }).then(({data})=>{
                console.log(data);
                if(data.status == "success"){
                    $("#search").addClass('is-valid');
                    $("#options").addClass('is-valid');
                    $("#search").removeClass('is-invalid');
                    $("#options").removeClass('is-invalid');
                }else{
                    $("#options").removeClass('is-valid');
                    $("#search").removeClass('is-valid');
                    $("#search").addClass('is-invalid');
                    $("#options").addClass('is-invalid');

                }
            }).catch(({response})=>{
                $("#options").removeClass('is-valid');
                $("#search").removeClass('is-valid');
                $("#search").addClass('is-invalid');
                $("#options").addClass('is-invalid');
            })
        });

    }




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

            document.body.innerHTML = printContents;

            window.print();

            document.body.innerHTML = originalContents;
    }


    function confirmation()
    {
        if(confirm()){
            return true;
        }else{
            return false;
        }
    }
</script>




@endpush