@extends('layouts.posPurchageOrder.front')

@section('maincontent')
    <section class="global-space-section">
        <div class="container">
            @if (empty($product))
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-danger">
                            Product is removed or does not exist!
                             <a href="javascript:history.back()" class="btn btn-sm btn-danger">Back</a>
                        </div>
                    </div>
                </div>
            @else
                <div class="detai-product-index">                                

                    <div class="detail-product-section">
                        <div class="row">
                            <div class="col-md-5 col-sm-5">
                                <div class="product-image-panel" style="cursor: pointer;" onclick="toggleGallery();">
                                    <img src="{{ $mainImage }}"
                                        alt="detail-product-index" id="mainPhoto" class="img-responsive">
                                </div>
                                <input type="hidden" name="imgsrc" id="imgsrc" value="{{ $mainImage }}">
                                @php
                                    $selectedCol = '';
                                @endphp
                                @if (sizeof($images) > 0)
                                    <div class="product-thumbs">
                                        @foreach ($images as $colorName => $thumbs)
                                            <div class="clearfix imgThumb color_{{ str_slug($colorName) }}"></div>
                                            @foreach ($thumbs as $thumb)
                                                <img src="{{ $thumb }}"
                                                    class="imgThumb color_{{ str_slug($colorName) }} img-responsive"
                                                    onmouseover="document.getElementById('mainPhoto').src=this.src;"  onclick="toggleGallery();"/>
                                            @endforeach
                                            <div class="clearfix imgThumb color_{{ str_slug($colorName) }}"></div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-7 col-sm-7">
                                <div class="detail-product-section-right-flex">
                                    <h4 style="font-size: 16px;color: #0000009c;">{{ $product->article }}-{{ $product->color }}<h4>                                    
                                    <div class="detail-product-heading-flex">
                                        <h2>{{ $productName }} </h2> 
                                    </div>
                                    <input type="hidden" name="pname" id="pname" value="{{ $productName }}">
                                    
                                    <h5 class="coldark">{{ $productShortDesc }}</h5>
                                    <div class="pricing-earn-points-panel">
                                        <h4 class="product-price">
                                            @if ($productMaxPrice - $productMinPrice == 0)
                                                {{ $homepageModel->formatCurrency($productMaxPrice) }}
                                            @else
                                                {{ $homepageModel->formatCurrency($productMinPrice) }} -
                                                {{ $homepageModel->formatCurrency($productMaxPrice) }}
                                            @endif
                                        </h4>
                                        
                                    </div>
                                            
                                            

                                    <table class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                            <th>Color</th>
                                            @foreach($sizess as $sizes)
                                            <th>{{ $sizes }}</th>  
                                             @endforeach 
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                @foreach ($colorSizeMatrix as $k => $v)
                                                    <th>{{ str_slug($k) }}</th>                                                    
                                                @endforeach 
                                                @foreach ($colorSizeMatrix as $k => $v)                                                    
                                                @foreach ($sizess as $z => $opt)
                                                <td class="chosenProductColumn">
                                                    <input type="hidden" class="chosenClass" value="{{ $k }}{{ $opt }}{{ $product->article }}">
                                                    <input type="hidden" class="chosenArticle" value="{{ $product->article }}">
                                                    <input type="hidden" class="chosenColor" value="{{ $k }}">
                                                    <input type="hidden" class="chosenSize" value="{{ $opt }}">
                                                    <input type="hidden" class="chosenHSN" value="{{ $product->hsn }}">
                                                    <input type="hidden" class="chosenCode" value="{{ $k }}-{{ $opt }}-{{ $product->article }}">
                                                    <input type="hidden" class="chosenBarcode" value="0">
                                                    <input type="hidden" class="chosenMrp" value="{{ $product->mrp }}">                                                      
                                                    <input type="hidden" class="chosenDiscount" value="{{ $discount_per->discount }}">
                                                    <input type="hidden" class="chosenTax" value="0">   
                                                    <input type="hidden" class="is_jewellary" value="0">                                               
                                                    <input type="number" class="chosenQty form-control" value="0" onblur="var v = $.trim(this.value); if(v == ''){this.value = 0;}" onchange="var v = $.trim(this.value); if(v == ''){this.value = 0;}" min="0">                                                       
                                                </td>
                                                @endforeach
                                            @endforeach  
                                            
                                             @foreach($similarFamilyProducts as $similarFamilyProduct)
                                            <tr><th>{{ $similarFamilyProduct->color }}</th>
                                                @foreach ($colorSizeMatrix as $k => $v)                                                    
                                                @foreach ($sizess as $z => $opt)
                                                <td class="chosenProductColumn">
                                                    <input type="hidden" class="chosenClass" value="{{ $similarFamilyProduct->color }}{{ $opt }}{{ $product->article }}">
                                                    <input type="hidden" class="chosenArticle" value="{{ $product->article }}">
                                                    <input type="hidden" class="chosenColor" value="{{ $similarFamilyProduct->color }}">
                                                    <input type="hidden" class="chosenSize" value="{{ $opt }}">
                                                    <input type="hidden" class="chosenHSN" value="{{ $product->hsn }}">
                                                    <input type="hidden" class="chosenCode" value="{{ $similarFamilyProduct->color }}-{{ $opt }}-{{ $product->article }}">
                                                    <input type="hidden" class="chosenBarcode" value="0">
                                                    <input type="hidden" class="chosenMrp" value="{{ $product->mrp }}"> 
                                                    <input type="hidden" class="chosenDiscount" value="{{ $discount_per->discount }}">
                                                    <input type="hidden" class="chosenTax" value="0">   
                                                    <input type="hidden" class="is_jewellary" value="0">                                                      
                                                    <input type="number" class="chosenQty form-control" value="0" onblur="var v = $.trim(this.value); if(v == ''){this.value = 0;}" onchange="var v = $.trim(this.value); if(v == ''){this.value = 0;}" min="0">                                                       
                                                </td>
                                                @endforeach
                                            @endforeach</tr>
                                                @endforeach                                             
                                        </tr>  
                                            
                                         </tbody>
                                    </table>                                   

                                    <div class="buy-cart-panel clearfix">
                                        
                                        <input type="hidden" name="pos_id" id="pos_id" value="{{ $pos_id }}">
                                        <div class="cart-panel">
                                            <button type="button" class="add-cart-btn" onclick="atc(0);"> Add items to Order</button>
                                        </div>
                                    </div>

                                    
                                
                                   @if (sizeof($productSpecs) > 0)
                                        <div class="buy-cart-panel clearfix">
                                            <h5>Details</h5>
                                            <div class="clearfix"></div>                                          
                                            <table class="table">
                                                @foreach ($productSpecs as $k => $productSpec)
                                                    <tr>
                                                        <th>{{ $k }}</th>
                                                        <td>{{ $productSpec }}</td>
                                                    </tr>
                                                @endforeach
                                            </table>                                          
                                        </div>
                                    @endif
                                    {{-- SIMILAR FAMILY PRODUCTS --}}
                                </div>
                            </div>
                        </div>
                        <br><br><br>
                       
                           {{-- SIMILAR FAMILY PRODUCTS --}}
                                    
                           @if($similarFamilyProducts->count() > 0)
                           <div class="row clearfix">
                               <div class="col-md-12">
                                   <h4>Also available in following colors</h4>
                               
                               @foreach($similarFamilyProducts as $similarFamilyProduct)
                               <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
                                   @include('backend.pos_purchage_order.product-box', ['product' => $similarFamilyProduct ])
                               </div>
                               @endforeach
                           </div>
                           </div>
                           @endif

                           {{-- SIMILAR FAMILY PRODUCTS --}}
                        
                    </div>
                </div>
            @endif
        </div>

    </section>
    @include('backend.pos_purchage_order.product-details-gal')

@endsection

@section('extraJS')
    <script src="{{ asset('add-purchage-order/js/jquery.zoom.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.product-image-panel-zoom').zoom();
            @if (!empty($selectedCol))
                showSizesOptions('{{ $selectedCol }}')
            @endif
            $('.pthumbs').slimScroll({
                height: '100vh'
            });
        });

        function showSizesOptions(v) {
            $('.optHolder').hide();
            $('.optHolder').removeClass('hidden');
            $('.optHolder').addClass('hidden');
            $('.' + v).removeClass('hidden');
            $('.' + v).fadeIn('slow');
        }

        function toggleGallery() {
            $("#productGallery").toggle();
            $(".global-space-section").toggle();
            $(".bottom-footer").toggle();
        }

        function atc(t) {           
            var cartToken = $("#pos_id").val();
            var customerId = $("#pos_id").val(); 
           var mainPhoto = $("#imgsrc").val();
           var pname = $("#pname").val();                    
           
           
           var totQty = 0;
        $(".chosenProductColumn").each(function() {
            var chosenQty = parseInt($(this).find('.chosenQty').val());
            var chosenHSN = $(this).find('.chosenHSN').val();
            var chosenClass = $(this).find('.chosenClass').val();
            var chosenCode = $(this).find('.chosenCode').val();
            var chosenArticle = $(this).find('.chosenArticle').val();
            var chosenColor = $(this).find('.chosenColor').val();
            var chosenSize = $(this).find('.chosenSize').val();
            var chosenBarcode = $(this).find('.chosenBarcode').val();
            var chosenMrp = parseFloat($(this).find('.chosenMrp').val());
            var chosenDiscount = parseFloat($(this).find('.chosenDiscount').val());
            var chosenCate = parseInt($(this).find('.is_jewellary').val());
            if(chosenDiscount > 0) {
                var chosenDiscountAmt = (chosenDiscount/100) * chosenMrp;
            } else {
                var chosenDiscountAmt = 0
            }
            var finalMrp = chosenMrp - chosenDiscountAmt;

            var chosenTax = 0;
            if(chosenCate === 1)
            {
               chosenTax = 3;
            }else
            {
                chosenTax = finalMrp < {{tax_slabs_percen}} ? 5 : 12;
            }
          
            var finalTotal = finalMrp * chosenQty;


            if(chosenQty > 0) {
                if($("tr."+chosenClass).length > 0) {
                    $("tr."+chosenClass).remove();
                }
                console.log('chosenMrp', chosenMrp);
                console.log('chosenDiscount', chosenDiscount);
                console.log('chosenQty', chosenQty);
                console.log('finalMrp', finalMrp);
                totQty+=chosenQty;

                $.post("{{ route('product-addtocard') }}", {
                _token: document.tokenForm._token.value,
                customerId: customerId,
                mainPhoto: mainPhoto,
                pname: pname,
                cartToken: cartToken,
                pid: {{ $pid }},   
                article: chosenArticle,
                color:chosenColor ,
                size: chosenSize,               
                qty: chosenQty ,                          
                hsn:chosenHSN,
                productCode:chosenCode,
                mrp:chosenMrp,
                chosenDiscount:chosenDiscount,

            }, function(result) {
                var response = jQuery.parseJSON(result);
                if(response.status == true) {
                    toastr.success(response.info);
                    return false;
                } else {
                    toastr.error(response.info);
                    return false;
                }
                return false;
            });
                // var html =' \
                // <tr class="pRow '+chosenClass+'"> \
                //     <input type="hidden" name="pClass[]" class="form-control pClass" value="'+chosenClass+'" readonly/> \
                //     <input type="hidden" name="chosenExVat[]" class="form-control chosenExVat" value="0" readonly/> \
                //     <input type="hidden" name="chosenBaseMrp[]" class="form-control chosenBaseMrp" value="'+(chosenMrp.toFixed(2))+'" readonly/> \
                //     <input type="hidden" name="chosenFinalMrp[]" class="form-control chosenFinalMrp" value="0" readonly/> \
                //     <input type="hidden" name="chosenTaxAmt[]" class="form-control chosenTaxAmt" value="0" readonly/> \
                //     <td><input name="hsn[]" class="form-control hsn" value="'+chosenHSN+'" readonly/> </td> \
                //     <td><input name="productcode[]" class="form-control productcode" value="'+chosenCode+'" readonly/> </td> \
                //     <td><input name="chosenArticle[]" class="form-control article" value="'+chosenArticle+'" readonly/> </td> \
                //     <td><input name="chosenColor[]" class="form-control color" value="'+chosenColor+'" readonly/> </td> \
                //     <td><input name="chosenSize[]" class="form-control size" value="'+chosenSize+'" readonly/> </td> \
                //     <td><input name="chosenBarcode[]" class="form-control barcode" value="'+chosenBarcode+'" readonly/> </td> \
                //     <td><input name="chosenQty[]" class="form-control qty" value="'+chosenQty+'" type="number" min="1" onblur="var v = this.value;if($.trim(v) == \'\'){this.value=1;}else if(parseInt(v) < 1){this.value=1;}updateTotals();" onchange="updateTotals();"  onkeyup="updateTotals();"/></td> \
                //     <td><input name="chosenMrp[]" class="form-control mrp" value="'+(chosenMrp.toFixed(2))+'" type="number" min="1" step="any" readonly/> </td> \
                //     <td><input name="chosenDiscount[]" class="form-control discountPer" value="'+(chosenDiscount.toFixed(2))+'" type="number" min="0" step="any"  onchange="updateTotals();"  onkeyup="updateTotals();"/> </td> \
                //     <td><input name="chosenDiscountAmt[]" class="form-control discAmt" value="'+(chosenDiscountAmt.toFixed(2))+'" type="number" min="0" step="any" readonly/> </td> \
                //     <td><input name="chosenTax[]" class="form-control tax" value="'+chosenTax+'" type="number" min="0" step="any" readonly/> </td> \
                //     <td><input name="chosenTotal[]" class="form-control total" value="'+(finalTotal.toFixed(2))+'" type="number" min="0" step="any" readonly/> </td> \
                //     <td><button type="button" class="btn btn-xs btn-danger" onclick="$(this).parent().parent().remove();updateTotals();">X</button></td> \
                // </tr> \
                // ';
                // $(".selectedOrderProducts tbody").append(html);
                // $(".fixTable").tableHeadFixer({'foot' :true}); 
            }
        });
        if(totQty <= 0) {
            toastr.error('No product has quantity greater than zero!');
            return false;
        } else {
            toastr.success("Add Successfully Order item");
                   // return false;
            //$(".orderFormRow, .selectProductsRow, .backBtn").toggle();
            //updateTotals();
        }


            // $.post("{{ route('product-addtocard') }}", {
            //     _token: document.tokenForm._token.value,
            //     article: '{{ $product->article }}',
            //     color: '{{ $product->color }}',
            //     size: sizeVal,
            //     mainPhoto: mainPhoto,
            //     pname: pname,
            //     qty: 1,
            //     cartToken: cartToken,
            //     pid: {{ $pid }},
            //     customerId: customerId,
            // }, function(result) {
            //     var response = jQuery.parseJSON(result);
            //     if(response.status == true) {
            //         toastr.success(response.info);
            //         return false;
            //     } else {
            //         toastr.error(response.info);
            //         return false;
            //     }
            //     return false;
            // });
        }
    </script>
@endsection