{{-- Extends layout --}}
@extends('layout.default')

@section('styles')

    <!--begin::Page Custom Styles(used by this page)-->
    <style>
        .invoice-logo{
            max-width: 100px;
        }

        .qty-group{
            min-width: 100px;
            max-width: 120px;
            margin: auto;
        }
        
    </style>
	<!--end::Page Custom Styles-->
@endsection

{{-- Content --}}
@section('content')

    <!-- begin::Card-->
    <div class="card card-custom overflow-hidden">

        @if (session('status'))

            {{-- Success Alert --}}
            <div class="alert alert-custom alert-notice alert-light-danger fade show gutter-b" role="alert">
                <div class="alert-icon"><i class="flaticon2-check-mark"></i></div>
                <div class="alert-text">{{session('status')}}</div>
                <div class="alert-close">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true"><i class="ki ki-close"></i></span>
                    </button>
                </div>
            </div>

        @endif

        
        <div class="card-body p-0">
            <!-- begin: Invoice-->
            <!-- begin: Invoice header-->
            <div class="row justify-content-center py-4 px-8 py-md-13 px-md-0 invoice-header">
                <div class="col-md-9">
                    <div class="d-flex justify-content-between pb-3 pb-md-4 flex-column flex-md-row">
                        <div class="d-flex flex-column">
                            <h1 class="display-4 font-weight-boldest mb-5">REQUISITION ORDER</h1>
                            <span class="font-weight-bolder mb-2">REQUISITION FROM</span>
                            <span class="opacity-70">{{$requisitionDetails[0]->SdpName}}</span>
                            <span class="opacity-70">{{$requisitionDetails[0]->SdpAddress}}</span>
                            <span class="opacity-70">{{$requisitionDetails[0]->SdpContactNo}}</span>
                        </div>

                        <div class="d-flex flex-column align-items-md-end">
                            {{-- <span class="font-weight-bolder mb-2">REQUISITION TO</span> --}}
                            <label class="col-form-label font-weight-bolder">Distribution Parent:</label>
                            <select class="form-control" id="distributionPoint_select" name="distributionPoint">
                                
                                <option selected disabled hidden value="{{$requisitionDetails[0]->ParentSdpId}}">{{$requisitionDetails[0]->ParentSdpName}}</option>

                                @foreach ($distributionPoints as $distributionPoint)
                                    <option value="{{$distributionPoint->Id}}">{{$distributionPoint->Name}}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        {{-- <img class="invoice-logo" src="{{ asset('media/logos/igloo-logo.png') }}" alt=""> --}}
                        
                        {{-- <div class="d-flex flex-column align-items-md-end px-0 igloo-about">
                            <!--begin::Logo-->
                            <a href="#" class="mb-5">
                                <img class="invoice-logo" src="{{ asset('media/logos/igloo-logo.png') }}" alt="" />
                            </a>
                            <!--end::Logo-->
                            <span class="d-flex flex-column align-items-md-end opacity-70">
                                <span>Level 13, Monem Business District,</span>
                                <span>111 Sonargaon Road, Dhaka 1205</span>
                            </span>
                        </div> --}}
                    </div>
                    
                    <div class="border-bottom w-100"></div>
                    {{-- <div class="d-flex justify-content-between pt-6">
                        <div class="d-flex flex-column flex-root">
                            <span class="font-weight-bolder mb-2">DATE</span>
                        </div>
                        <div class="d-flex flex-column flex-root">
                            <span class="font-weight-bolder mb-2">REQUISITION NO.</span>
                        </div>
                        <div class="d-flex flex-column flex-root">
                            <span class="font-weight-bolder mb-2">INVOICE TO</span>
                            <span class="opacity-70">
                                {{$requisitionDetails[0]->OutletName}}, {{$requisitionDetails[0]->Address}}                                
                                @if ($requisitionDetails[0]->ContactPerson != $requisitionDetails[0]->OutletName)
                                    <br /> {{$requisitionDetails[0]->ContactPerson}}
                                @endif
                                <br>{{$requisitionDetails[0]->ContactPersonNo}}
                            </span>
                        </div>
                    </div> --}}
                </div>
            </div>


            <div class="row justify-content-center pt-0 px-8 pt-md-0 px-md-0">
                <div class="col-md-9">
                    <div class="form-group row">
                        <div class="col-lg-6 col-md-6 mb-3">
                            <select class="form-control" id="edit_post_cart_add_item_select2" name="outlet_id">
                                <option value="" class="text-muted" selected hidden disabled>Search an Item from the list</option>
                                @foreach ($productPrices as $productPrice)
                                    <option value="{{$productPrice->ProductId}}">{{$productPrice->Name}}</option>
                                @endforeach
                            </select>
                            {{-- <span class="form-text text-muted mt-3">You can also search items here</span> --}}
                            <div class="valid-feedback">Looks good!</div>
                            <div class="invalid-feedback">Please select an item to add</div>
                        </div>
                        <div class="col-lg-6 col-md-3">
                            <a class="btn btn-primary font-weight-bold btn-add-item">Add Item</a>
                        </div>
                    </div>

                </div>
            </div>
            <!-- end: Invoice header-->
            <!-- begin: Invoice body-->
            <form action="{{route('requisition.update', $requisitionDetails[0]->SRId)}}" method="POST">
                @csrf
                @method('PUT')

                <input type="hidden" name="sr_id" value="{{$requisitionDetails[0]->SRId}}">
                <input type="hidden" name="sdp_id" value="{{$requisitionDetails[0]->SdpId}}">
                <input type="hidden" id="hidden_parentSdp_input" name="parent_sdp_id" value="{{$requisitionDetails[0]->ParentSdpId}}">


                {{-- <input type="hidden" name="outlet_id" value="{{$requisitionDetails[0]->OutletId}}"> --}}

                <div class="row justify-content-center pb-4 px-8 pb-md-5 px-md-0">
                    <div class="col-md-9">

                        <div class="table-responsive item-list-table">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th class="pl-0 font-weight-bold text-muted text-uppercase"></th>
                                        <th class="pl-0 font-weight-bold text-muted text-uppercase">Description</th>
                                        <th class="text-center font-weight-bold text-muted text-uppercase">Qty</th>
                                        <th class="text-right font-weight-bold text-muted text-uppercase">Rate</th>
                                        <th class="text-right pr-0 font-weight-bold text-muted text-uppercase">Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($requisitionDetails as $index=>$requisition)
                                        @if ($index == 0)
                                            <tr class="font-weight-boldest top-tr">
                                                <td class="pl-0 pt-7 align-middle">
                                                    <a class="btn btn-xs btn-danger btn-icon inv-item-remove"><i class="fa la-minus icon-sm"></i></a>
                                                </td>
                                                <td class="pl-0 pt-7 td-name align-middle" data-product="{{$requisition->ProductId}}">
                                                    {{$requisition->ProductName}}
                                                </td>
                                                <td class="text-right pt-7 align-middle">
                                                    <div class="input-group qty-group">
                                                        <div class="input-group-prepend inv-qty-minus">
                                                            <button type="button" class="btn btn-light-primary">-</button>
                                                        </div>
                                                        <input type="text" class="form-control text-center qtyInput font-weight-bolder px-0" name="order_qty[{{$requisition->ProductCode}}]" value="{{$requisition->Quantity}}" />
                                                        <div class="input-group-append inv-qty-plus">
                                                            <button type="button" class="btn btn-light-primary">+</button>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-right pt-7 align-middle" data-field="Rate">
                                                    {{$requisition->Rate}}
                                                </td>
                                                <td class="text-danger pr-0 pt-7 text-right align-middle" data-field="Amount">{{$requisition->Amount}}</td>
                                            </tr>
                                            <input type="hidden" name="price[{{$requisition->ProductCode}}]" value="{{$requisition->Rate}}">
                                        @else
                                            <tr class="font-weight-boldest">
                                                <td class="border-top-0 pl-0 py-4 align-middle">
                                                    <a class="btn btn-xs btn-danger btn-icon inv-item-remove"><i class="fa la-minus icon-sm"></i></a>
                                                </td>
                                                <td class="border-top-0 pl-0 py-4 td-name align-middle" data-product="{{$requisition->ProductId}}">{{$requisition->ProductName}}</td>
                                                <td class="border-top-0 text-right py-4 align-middle">
                                                    <div class="input-group qty-group">
                                                        <div class="input-group-prepend inv-qty-minus">
                                                            <button type="button" class="btn btn-light-primary">-</button>
                                                        </div>
                                                        <input type="text" class="form-control text-center qtyInput font-weight-bolder px-0" name="order_qty[{{$requisition->ProductCode}}]" value="{{$requisition->Quantity}}" />
                                                        <div class="input-group-append inv-qty-plus">
                                                            <button type="button" class="btn btn-light-primary">+</button>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="border-top-0 text-right py-4 align-middle" data-field="Rate">
                                                    {{$requisition->Rate}}
                                                </td>
                                                <td class="text-danger border-top-0 pr-0 py-4 text-right align-middle" data-field="Amount">{{$requisition->Amount}}</td>
                                            </tr>
                                            <input type="hidden" name="price[{{$requisition->ProductCode}}]" value="{{$requisition->Rate}}">

                                        @endif                                 
                                    @endforeach     
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- end: Invoice body-->
                <!-- begin: Invoice footer-->
                <div class="row justify-content-center bg-gray-100 py-8 px-8 py-md-10 px-md-0">
                    <div class="col-md-9">
                        <div class="d-flex justify-content-between flex-column flex-md-row font-size-lg">
                            <div class="d-flex flex-column mb-10 mb-md-0">
                                <div class="font-weight-bolder font-size-lg mb-3">Details</div>
                                <div class="d-flex justify-content-between mb-3">
                                    <span class="mr-15 font-weight-bold">Discount:</span>
                                    <span class="text-left">0.00</span>
                                </div>
                                <div class="d-flex justify-content-between mb-3">
                                    <span class="mr-15 font-weight-bold">Date:</span>
                                    <span class="text-left">{{date("F j, Y", strtotime($requisitionDetails[0]->Date))}}</span>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <span class="mr-15 font-weight-bold">Code:</span>
                                    <span class="text-left">{{$requisitionDetails[0]->Code}}</span>
                                </div>
                            </div>
                            <div class="d-flex flex-column text-md-right">
                                <span class="font-size-lg font-weight-bolder mb-1">TOTAL AMOUNT</span>
                                <span class="font-size-h2 font-weight-boldest text-danger mb-1 total-amount">{{$requisitionDetails[0]->TotalAmount}}</span>
                                <input type="hidden" name="amount" value="{{$requisitionDetails[0]->TotalAmount}}">
                                <span>Taxes Included</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end: Invoice footer-->
                <!-- begin: Invoice action-->
                <div class="row justify-content-center py-8 px-8 py-md-10 px-md-0">
                    <div class="col-md-9">
                        <div class="d-flex justify-content-between">
                            <div>
                                {{-- <button type="button" class="btn btn-light-info font-weight-bold mr-2" onclick="window.print();">Download Invoice</button>
                                <button type="button" class="btn btn-light-info font-weight-bold" onclick="window.print();">Print Invoice</button> --}}
                            </div>
                            <div>
                                <a href="javascript:history.back()" class="btn btn-light-primary font-weight-bold mr-2">Go Back</a>
                                <button type="submit" class="btn btn-primary font-weight-bold">Update Changes</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end: Invoice action-->
                <!-- end: Invoice-->
            </form>

        </div>
    </div>
    <!-- end::Card-->

@endsection

{{-- Scripts Section --}}
@section('scripts')
    <script>
        $('#distributionPoint_select').on('change', function(){
            let ParentSdpId = $(this).val();
            $("#hidden_parentSdp_input").val(ParentSdpId);
        });

        $('#edit_post_cart_add_item_select2').on('change', function(){

            let productId = $("#edit_post_cart_add_item_select2").val();

            if(productId==""){
                $("#edit_post_cart_add_item_select2").addClass("is-invalid");
            }
            else{
                $("#edit_post_cart_add_item_select2").removeClass("is-invalid");
                $("#edit_post_cart_add_item_select2").addClass("is-valid");
            }
        });

        $(document).on("click", ".btn-add-item", function() {
    
            let productList = @json($productPrices);
            // console.log(productList);
            let productId = $("#edit_post_cart_add_item_select2").val();
            let product = "";
            let tdProductName = $(".td-name");
            let itemDoesNotExist = true;

            // console.log(tdProductName)
            if(productId == null){
                $("#edit_post_cart_add_item_select2").removeClass("is-valid");
                $("#edit_post_cart_add_item_select2").addClass("is-invalid");
            }
            else{
                for (let i = 0; i < productList.length; i++) {
                    if(productId == productList[i].ProductId){
                        product = productList[i]
                    }
                }

                for (let i = 0; i < tdProductName.length; i++) {

                    // console.log("dd: "+$.trim(product.Name));
                    // console.log("td: "+$.trim( $.trim(tdProductName[i].innerText)));
                    // console.log("dd: "+$.trim(product.ProductId));
                    // console.log("td: "+$(tdProductName[i]).data("product"));


                    
                    if(product.ProductId == $(tdProductName[i]).data("product")){
                        console.log(tdProductName[i].closest("tr"));
                        // tdProductName[i].scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
                        $('html, body').animate({
                            scrollTop: $(tdProductName[i].closest("tr")).offset().top - 160
                        }, 500);

                        let productRow = $(tdProductName[i].closest("tr"));

                        productRow.addClass("table-success")

                        
                        setTimeout(function() {
                            productRow.css("transition", "background-color .6s")
                            productRow.removeClass("table-success")

                        }, 2000);

                        itemDoesNotExist = false;

                        break;
                    }

                }

                if(itemDoesNotExist){
                    $(".top-tr").children("td").removeClass("pt-7");
                    $(".top-tr").children("td").addClass("border-top-0 py-4");
                    $(".item-list-table").children("table").children("tbody").prepend(`
                        <tr class="font-weight-boldest top-tr">
                            <td class="pl-0 pt-7 align-middle">
                                <a class="btn btn-xs btn-danger btn-icon inv-item-remove"><i class="fa la-minus icon-sm"></i></a>
                            </td>
                            <td class="pl-0 pt-7 td-name align-middle" data-product="`+product.ProductId+`">
                                `+product.Name+`
                            </td>
                            <td class="text-right pt-7 align-middle">
                                <div class="input-group qty-group">
                                    <div class="input-group-prepend inv-qty-minus">
                                        <button type="button" class="btn btn-light-primary">-</button>
                                    </div>
                                    <input type="text" class="form-control text-center qtyInput font-weight-bolder px-0" name="order_qty[`+product.Code+`]" value="0" />
                                    <div class="input-group-append inv-qty-plus">
                                        <button type="button" class="btn btn-light-primary">+</button>
                                    </div>
                                </div>
                            </td>
                            <td class="text-right pt-7 align-middle" data-field="Rate">
                                `+product.Price+`
                            </td>
                            <td class="text-danger pr-0 pt-7 text-right align-middle" data-field="Amount">0</td>
                        </tr>
                        <input type="hidden" name="price[`+product.Code+`]" value="`+product.Price+`"></input>
                    `);



                    let totalAmountSelector = $('td[data-field="Amount"]');
                    var totalAmount = 0;

                    for (let i = 0; i < totalAmountSelector.length; i++) {
                        let amount = parseFloat(totalAmountSelector.eq(i).html()).toFixed(
                            3
                        );
                        amount = parseFloat(amount);


                        totalAmount = totalAmount + amount;
                    }


                    $(".total-amount").html(totalAmount.toFixed(3));
                    $('input[name = "amount"]').val(totalAmount);
                }


                
            }

            
        });
    </script>
    <script src="{{ asset("js/pages/custom/order/select2.js") }}" type="module"></script>
    <script src="{{ asset('js/pages/custom/order/edit-post-cart.js') }}" type="module"></script>
@endsection