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

@section('styles')

    <!--begin::Page Custom Styles(used by this page)-->
    <style>
        .cart-label{
            right: -1rem;
        }

        input.form-control.text-center.qtyInput {
            max-width: 60px;
        }

        input.form-control.text-center.cart-qtyInput {
            max-width: 80px;
        }
        
        .tooltip-inner {
            color: #1BC5BD !important;
        }

        .promotion-alert{
            z-index: 4;
        }
        

    </style>

<!--end::Page Custom Styles-->
@endsection

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

    

    <!--begin::Card-->
    <div class="card card-custom card-stretch gutter-b" data-sticky-container="">

        @if (!empty($promotionDetails))
        <div class="alert alert-custom alert-info alert-shadow fade show gutter-b sticky promotion-alert" role="alert" data-sticky="true" data-margin-top="65px" data-sticky-for="1023" data-sticky-class="sticky">
            <div class="alert-icon">
                <span class="svg-icon svg-icon-light svg-icon-xl">
                    <!--begin::Svg Icon | path:assets/media/svg/icons/Tools/Compass.svg-->
                    {{-- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <rect x="0" y="0" width="24" height="24" />
                            <path d="M7.07744993,12.3040451 C7.72444571,13.0716094 8.54044565,13.6920474 9.46808594,14.1079953 L5,23 L4.5,18 L7.07744993,12.3040451 Z M14.5865511,14.2597864 C15.5319561,13.9019016 16.375416,13.3366121 17.0614026,12.6194459 L19.5,18 L19,23 L14.5865511,14.2597864 Z M12,3.55271368e-14 C12.8284271,3.53749572e-14 13.5,0.671572875 13.5,1.5 L13.5,4 L10.5,4 L10.5,1.5 C10.5,0.671572875 11.1715729,3.56793164e-14 12,3.55271368e-14 Z" fill="#000000" opacity="0.3" />
                            <path d="M12,10 C13.1045695,10 14,9.1045695 14,8 C14,6.8954305 13.1045695,6 12,6 C10.8954305,6 10,6.8954305 10,8 C10,9.1045695 10.8954305,10 12,10 Z M12,13 C9.23857625,13 7,10.7614237 7,8 C7,5.23857625 9.23857625,3 12,3 C14.7614237,3 17,5.23857625 17,8 C17,10.7614237 14.7614237,13 12,13 Z" fill="#000000" fill-rule="nonzero" />
                        </g>
                    </svg> --}}
                    <!--end::Svg Icon-->
                    <i class="fas fa-gift"></i>
                </span>
            </div>
            <div class="alert-text font-weight-bold">
            <span class="d-inline-block font-weight-bold h4 ml-3">OFFER ! ! !</span>
            ON TOTAL PURCHASE OF AMOUNT
            <span class="d-inline-block font-weight-bold h4 ml-3">{{$promotionDetails[0]->DiscountAmount}}</span>
            <span class="d-inline-block font-weight-bold h6 mr-3"> BDT</span>YOU GET
            <span class="d-inline-block font-weight-bold h4 ml-3">{{$promotionDetails[0]->BaseQty}}</span>
            <span class="d-inline-block font-weight-bold h6 mr-3"> {{$promotionDetails[0]->Unit}}</span>
            <span class="d-inline-block font-weight-bold h4 mr-3">{{$promotionDetails[0]->Product}}</span> 
            <span class="d-inline-block font-weight-bold h4">FREE ! ! !</span> 
            
            {{-- <a class="font-weight-bold" href="https://rgalus.github.io/sticky-js/" target="_blank">StickyJS Home</a>or
            <a class="font-weight-bold" href="https://github.com/rgalus/sticky-js" target="_blank">StickyJS Github Repo</a>. --}}
            </div>
        </div>
        @endif

        
        
        @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-header">
            <div class="card-title">
                <h3 class="card-label">Create Product Requisition</h3>
                {{-- <button class="btn btn-primary testbtn">test</button> --}}
            </div>

            {{-- <div class="float-right my-auto position-relative cart">
                <a href="#cartModal" class="btn btn-lg btn-text-primary btn-hover-light-primary btn-icon" title="Cart" data-toggle = "modal">
                    <i class="flaticon2-shopping-cart-1"></i>
                </a>
                <span class="label label-light-danger position-absolute cart-label"></span>
            </div> --}}

        </div>
        
        <!--begin::Form-->
        
            
            <div class="card-body product-price-card">
            
                <!--begin: Search Form-->
                <!--begin::Search Form-->
                <div class="mb-7">
                    <div class="row align-items-center">
                        <div class="col-lg-12 col-xl-12">
                            
                            <!--begin::Name-->
                            <div class="form-group row">
                                <label class="col-form-label col-lg-2 col-sm-12 font-weight-bolder">Distribution Point:</label>
                                <div class="col-lg-4 col-md-6 col-sm-12">
                                    <label class="col-form-label">{{$outlet->Name}}</label>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-2 col-sm-12 font-weight-bolder">Distribution Parent:</label>
                                
                                <div class="col-lg-4 col-md-6 col-sm-12">
                                    {{-- <label class="col-form-label">{{$outlet->Parent}}</label> --}}
                                    <select class="form-control" id="distributionPoint_select" name="distributionPoint">
                                        @foreach ($distributionPoints as $distributionPoint)
                                            <option value="{{$distributionPoint->Id}}">{{$distributionPoint->Name}}</option>                                      
                                        @endforeach

                                    </select>
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-2 col-sm-12 font-weight-bolder">Delivery Date:</label>
                                <div class="col-lg-4 col-md-6 col-sm-12">
                                    <div class="input-group date" >
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="la la-calendar"></i>
                                            </span>
                                        </div>
                                        <input type="text" class="form-control delivery-date" readonly  placeholder="mm/dd/yyyy" name="date" required id="kt_datepicker_3"/>
                                        
                                    </div> 
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-2 col-sm-12 font-weight-bolder">Search Item:</label>
                                <div class="col-lg-4 col-md-6 col-sm-12">
                                    <div class="input-icon">
                                        <input type="text" class="form-control" placeholder="Search..." id="kt_datatable_search_query"/>
                                        <span>
                                            <i class="flaticon2-search-1 text-muted"></i>
                                        </span>
                                    </div>
                                </div>
                                
                            </div>
                            
                            
                            <div class="row align-items-center">
                                
                                <div class="col-md-3 my-2 my-md-0">
                                    
                                </div>
                                
                            </div>
                        </div>
                        {{-- <div class="col-lg-3 col-xl-4 mt-5 mt-lg-0">
                            <a href="#" class="btn btn-light-primary px-6 font-weight-bold">Search</a>
                            <button type="submit" class="btn btn-primary">Update Price</button>
                            <button type="reset" class="btn btn-secondary ml-3" data-dismiss="modal">Cancel</button>
                        </div> --}}
                    </div>
                </div>
                <!--end::Search Form-->
                <!--end: Search Form-->
            
                <!--begin: Datatable-->
                <table class="datatable datatable-bordered datatable-head-custom default-price-table" id="kt_datatable">
                    <thead>
                    <tr>
                        <th title="">Sl</th>
                        <th title="">Item Code</th>
                        <th title="">Item Name</th>
                        <th title="">Unit</th>
                        <th title="">Pack Size</th>
                        <th title="">Stock</th>
                        <th title="">Price</th>
                        <th title="">Add To Cart</th>
                    </tr>
                    </thead>

                    <tbody id="product_price_html_tbody">
                        {{-- @if (!empty($productPrices)) --}}
                        @foreach ($productPrices as $index=>$productPrice)
                        <tr>
                            <td>{{$index+1}}</td>
                            <td>{{$productPrice->Code}}</td>
                            <td>{{$productPrice->Name}}</td>
                            <td>{{$productPrice->Unit}}</td>
                            <td>{{$productPrice->PackSize}}</td>
                            <td>{{$productPrice->Qty}}</td>
                            <td>{{$productPrice->Price}}</td>
                            <td><!--begin::price Number-->
                                <div class="input-group">
                                    {{-- <div class="input-group-prepend order-qty-minus">
                                        <button type="button" class="btn btn-secondary">-</button>
                                    </div> --}}
                                    <input type="text" onClick="this.select()" class="form-control  text-center qtyInput"  value="0" />
                                    <div class="input-group-append order-qty-plus">
                                        <button type="button" class="btn btn-light-warning font-weight-bold">Add <span class="d-none d-sm-none d-md-inline-block d-lg-inline-block d-xl-inline-block">to Cart</span></button>
                                    </div>
                                </div>
                            </td>

                        </tr>
                        @endforeach
                        {{-- @endif --}}
                        
                        
                    </tbody>


                </table>
                <!--end: Datatable-->
            </div>

            
        </form>
        <!--end::Form-->

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

    <!--begin::Modal-->
    <div id="cartModal" class="modal fade" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content" style="min-height: 590px;">
                <div class="modal-header py-5">
                    <h5 class="modal-title">Requisition Details
                    <span class="d-block text-muted font-size-sm">{{date('d/m/y')}}</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <form id="requisition-form" method="POST" action="{{ route('requisition.store') }}">
                    
                    @csrf
                    <div class="modal-body container">

                    
                        
                        <div class="row pb-5 my-5 border-bottom">
                            <span class="h4 ml-5">Distributor Information:</span>
                        </div>

                        <div class="mb-7 ml-7">
                            <!--begin::Name-->
                                <div class="form-group row mb-0">
                                    <label class="col-form-label col-lg-2 col-5 font-weight-bolder">Distributor Name:</label>
                                    <div class="col-lg-6 col-7">
                                        <label class="col-form-label">{{$outlet->Name}}</label>
                                    </div>
                                </div>
                                <div class="form-group row mb-0">
                                    <label class="col-form-label col-lg-2 col-5 font-weight-bolder">Distributor Address:</label>
                                    <div class="col-lg-6 col-7">
                                        <label class="col-form-label">{{$outlet->Address}}</label>
                                    </div>
                                </div>
                                <div class="form-group row mb-0">
                                    <label class="col-form-label col-lg-2 col-5 font-weight-bolder">Contact Person:</label>
                                    <div class="col-lg-6 col-7">
                                        <label class="col-form-label">{{$outlet->ContactPerson}}</label>
                                    </div>
                                </div>
                                <div class="form-group row mb-0">
                                    <label class="col-form-label col-lg-2 col-5 font-weight-bolder">Contact No:</label>
                                    <div class="col-lg-6 col-7">
                                        <label class="col-form-label">{{$outlet->ContactPersonNo}}</label>
                                    </div>
                                </div>
                                <div class="form-group row mb-0">
                                    <label class="col-form-label col-lg-2 col-5 font-weight-bolder">Remarks:</label>
                                    <div class="col-lg-5 col-md-6 col-sm-12">
                                        <textarea class="form-control form-control-solid" name='remarks' rows="2"></textarea>
                                        <span class="form-text text-muted">Write down comment if necessary</span>
                                    </div>
                                </div>
                                
                        </div>


                        
                        <div class="row border-bottom border-top mb-5">
                            <span class="h4 ml-5 my-5">Item List</span>
                        </div>

                        <div class="table-responsive-lg" style="overflow-x:auto;">
                            <table class="table table-striped table-sm">
                                <thead>
                                    <tr>
                                        <th scope="col" ></th>
                                        <th scope="col" >Item Name</th>
                                        <th scope="col"  class="text-center">Qty</th>
                                        <th scope="col" >Rate</th>
                                        <th scope="col" >Total</th>
                                        {{-- <th scope="col">Action</th> --}}
                                    </tr>
                                </thead>
                                <tbody class="product-container mt-3"></tbody>
                                <tfoot class="total-container">
                                </tfoot>
                            </table>
                        </div>        
                        
                        <div class="row border-bottom border-top mb-5">
                            <span class="h4 ml-5 my-5">Promotion Items</span>
                        </div>
                        <div class="form-group row">
                            <div class="col-9 col-form-label">
                                <div class="checkbox-list">
                                @foreach ($promotionDetails as  $index=>$promtion)
                                    @if ($index == 0)
                                    <label class="checkbox">
                                        <input type="checkbox" checked="checked"  name="promotionProductId" value="{{$promtion->ProductId}}"/>
                                        <span></span>
                                        <p class="h5">{{$promtion->Product}}</p>
                                    </label>
                                    @else
                                    <label class="checkbox">
                                        <input type="checkbox"  name="promotionProductId" value="{{$promtion->ProductId}}"/>
                                        <span></span>
                                        <p class="h5">{{$promtion->Product}}</p>
                                    </label>
                                    @endif
                                @endforeach
                                </div>
                            </div>
                        </div>
                    </div>

                    
                    

                    <div class="modal-footer">
                        <div class="hidden-input">
                            <input type="hidden" name="sdp_id" value="{{$outlet->Id}}">
                            <input type="hidden" id="distributor_id" name="distributor_id" value="">
                            <input type="hidden" id="delivery_date" name="delivery_date" value="">
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-primary px-10 float-right order-submit-btn ">Send Requisition</button>
                                <button type="button" class="btn btn-light-primary px-10 float-right order-submit-btn mr-3" onclick="clearCart()">Clear Cart</button>
                            
                            </div>                            
                        </div>
                    </div>
                </form>    
            </div>
        </div>
    </div>
    <!--end::Modal-->

@endsection

{{-- Scripts Section --}}
@section('scripts')



    <!--begin::Page Scripts(used by this page)-->
    <script>
        function clearCart(){
            localStorage.removeItem("productsInCart");
            localStorage.removeItem("processedCart");
            localStorage.removeItem("totalCost");
            localStorage.removeItem("cartNumbers");

            $('.product-container').html("No Item in the cart");
            $('.total-container').html("");
            $('.cart-label').html("0");
            $(".cart-info")
            .attr("data-original-title", 0)
            .tooltip("show");
        }
        
    </script>

    
    <script src="{{ asset('js/pages/custom/order/sdpwise-requisition-table.js') }}" type="module"></script>
    <script src="{{ asset('js/pages/crud/forms/widgets/bootstrap-datepicker.js') }}"></script>
    <script>
        $('.cart-info')
        .tooltip({
            trigger: 'manual'
        })
        .tooltip('show');
        
    </script>

	<!--end::Page Scripts-->
@endsection