@extends('front.layouts.main')

@section('content')

@if(array_key_exists('productId', $data['productDetail']))
{!! Form::open(['method' => 'POST', 'action' => 'Front\UserController@performActionProductDetails','id'=>'productForm']) !!}
<section class="pt-40">
    <div class="container">
        <ul class="custom-breadcrumb list-unstyled d-flex flex-wrap mb-20 col">
            <li class="custom-breadcrumb-item"><a href="{{ url('user/menu') }}">MENU</a></li>
            <li class="custom-breadcrumb-item"><a href="{{url('user/productSubCategory/'.base64_encode($data['productDetail']['catId']).'/'.base64_encode(Request::get('cat')))}}">{{ strtoupper(Request::get('cat')) }}</a></li>
            <li class="custom-breadcrumb-item"><a href="{{url('user/productOrder/'.base64_encode($data['productDetail']['catId']).'/'.base64_encode($data['productDetail']['subCatId']).'/'.Request::get('subcat').'?cat='.Request::get('cat'))}}">{{ strtoupper(Request::get('subcat')) }}</a></li>
            <li class="custom-breadcrumb-item">{{strtoupper($data['productDetail']['productName'])}}</li>
        </ul>
        <!--<h2 class="col mt-0 text-center">ORDER NOW</h2>-->
        <div class="d-flex flex-wrap">
            <div class="col s6">
                <div class="product-thumbnail mb-20">
                    @if($data['productDetail']['isFavourite']>0)
                    <button type="button" class="btn btn-icon fi" id="product-{{ $data['productDetail']['productId'] }}" onclick="removeFromFavourite(this.id)"><i class="icon-favourite-fill fill"></i></button>
                    @endif
                                            <img src="{{$data['productDetail']['image']}}" alt="{{$data['productDetail']['productName']}}" class=" w-100" data-image1="" />
                                    </div>
                @isset($data['productDetail']['dealType'])
                @if($data['productDetail']['dealId']!= '0' && $data['productDetail']['dealType']== '1')
                <h3 class="mb-10 mt-20">OFFER PRODUCT</h3>
                <div class="cart-item-row d-flex flex-wrap flex-middle border-bot-none">
                    <div class="s6">
                        <figure class="product-det-thumb">
                            <img src="{{ $data['productDetail']['freeProductimage'] }}" class="center-box" alt="{{ $data['productDetail']['freeProductname'] }}" />
                        </figure>
                    </div>
                    <div class="s6">
                        <div class="order-detail d-flex flex-space-between flex-column">
                            <div class="order-info">
                                <div class="text-green fs-18 mb-10">
                                    <strong>{{ $data['productDetail']['freeProductname'] }}</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                @endisset
            </div>
            <div class="col s6">
                <h2 class="product-title-m text-blue">{{strtoupper($data['productDetail']['productName'])}}</h2>
                <p class="p-short-des mb-20">{{$data['productDetail']['description']}}</p>

                @if(isset($data['productDetail']['dealType']))
                @if($data['productDetail']['dealType']== '1')
                <div class="product-code-m mb-20">{{config('constants.CURRENCY_SYMBOL') }} {{number_format($data['productDetail']['price'])}}</div>
                <div class="product-code-m mb-40 text-blue">Buy 1 Get 1 Free</div>
                @endif
                @if($data['productDetail']['dealType']== '2')
                <div class="product-code-m mb-20">
                    <span class="del-text mr-10">{{config('constants.CURRENCY_SYMBOL') }} {{number_format($data['productDetail']['Originalprice'])}}</span>
                    <button type="button" class="btn btn-green"><sup class="mr-10">Now</sup>{{number_format($data['productDetail']['price'])}}</button>
                </div>
                <div class="product-code-m mb-40 text-blue">{{$data['productDetail']['dealName']}}</div>
                @endif
                @if($data['productDetail']['dealType']== '3')
                <div class="product-code-m mb-20">
                    <span class="del-text mr-10">{{config('constants.CURRENCY_SYMBOL') }} {{number_format($data['productDetail']['Originalprice'])}}</span>
                    <button type="button" class="btn btn-green"><sup class="mr-10">Now</sup>{{number_format($data['productDetail']['price'])}}</button>
                </div>
                <div class="product-code-m mb-40 text-blue">{{$data['productDetail']['dealName']}}</div>
                @endif
                @else
                <p class="product-code-m"> {{number_format($data['productDetail']['price'])}}</p>
                @endif
                <div>
                    @if(count($data['topextraItems']) > 0 && $showFilter == 1)

                    @endif
                    @if(isset($data['productDetail']['combo_name']) && $data['productDetail']['combo_name']!='' )
                    <div>
                        <label class="checkbox-inner mb-15 pl-20">
                            <input name="comboPrice" id="comboPrice" value="{{$data['productDetail']['combo_price']}}" type="checkbox">
                            <input name="comboName" value="{{$data['productDetail']['combo_name']}}" type="hidden" checked="checked">
                            &nbsp;
                            <span></span>
                        </label>{{strtoupper($data['productDetail']['combo_name'])}}<span style="float:right">{{number_format($data['productDetail']['combo_price'])}}</span>
                    </div>
                    @endif
                    <div class="mb-30" id="comboProducts" style="display: none;">
                        @foreach($data['topextraItems'] as $extraItems)
                                                @endforeach
                    </div>

                    <div class="mb-30">

                        @foreach($data['topextraItems'] as $extraItems)
                                                @endforeach
                    </div>

                    @if(count($data['customizeTopLabelOptions']) > 0 && count($data['verticalCustomizeOptionsWithPrice']) > 0)
                    <div class="mb-20">
                        <h4 class="text-uppercase mb-10">CUSTOMIZE</h4>
                        <div class="table-responsive">
                            <table class="table table-product-cart">
                                <thead>
                                    <tr>
                                        @foreach($data['customizeTopLabelOptions'] as $label)
                                        <th>{{strtoupper($label['labelNames'])}}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                @foreach($data['verticalCustomizeOptionsWithPrice'] as $key => $options)
                                <tbody class="fs-18">
                                    <tr>
                                        <td>{{strtoupper($options['labelNames'])}}</td>
                                        @foreach($options['prices'] as $optionscheckbox)
                                        <td>
                                            <label class="checkbox-inner mb-0 pl-20">
                                                <input name="customizeItems[]" value="{{$options['custlabelOptionId'].'-'.$optionscheckbox['labelNames']}}" type="checkbox">
                                                &nbsp;
                                                <span></span>
                                            </label>
                                        </td>
                                        @endforeach
                                    </tr>
                                </tbody>
                                @endforeach
                            </table>
                        </div>
                    </div>
                    @endif

                    <div class="mb-30">
                        @if(count($data['additionalItems']) > 0)
                        @if(Request::get('subcat') != "BIG MEAL COMBOS")
                        <h4 class="text-uppercase mb-10">Additional Items</h4>
                        <div class="table-responsive mb-20">
                            <table class="table table-additional-items">
                                <tbody class="fs-18">
                                    @foreach($data['additionalItems'] as $additionalItems)
                                    <tr>
                                        <td>
                                            <label class="checkbox-inner mb-0 pl-20">
                                                <input name="additionalItems[]" value="{{$additionalItems['additionalProductId']}}" type="checkbox">
                                                &nbsp;
                                                <span></span>
                                            </label>
                                        </td>
                                        <td>{{strtoupper($additionalItems['itemName'])}}</td>
                                        <td>+{{number_format($additionalItems['price'])}}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @endif
                        @endif
                        <div class="d-flex flex-wrap">
                            {{ Form::hidden('id', $productId) }}
                            @if(!empty($dealId))
                            {{ Form::hidden('deal_id', base64_encode($dealId)) }}
                            @endif
                            <span id='currentHour' style="display: none;"></span>
                            <button id="add_to_cart" name="add_to_cart" type="button" value="1" class="btn btn-green mr-20 mb-10">ADD TO ORDER</button>
                            @if($data['productDetail']['isFavourite']<=0) <button id="add_to_favourite" name="add_to_favourite" type="submit" value="2" class="btn btn-green mb-10">ADD TO FAVOURITE</button>
                                @endif
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
<div class="popup" id="no_branch" data-popup="no_branch">
    <div class="popup-inner">
        <div class="popup-header"><h3 class="mt-0 fs-20 mb-10 text-dark-green">Breakfast products are available before 12PM only.</h3></div>
        <div class="popup-max-hgt">

        </div>
        <a class="popup-close" data-popup-close="no_branch" href="#"><i class="icon-cross"></i></a>
    </div>
    <div class="overlay overlay-click"></div>
</div>

<div class="popup" id="no_branch1" data-popup="no_branch">
    <div class="popup-inner">
        <div class="popup-header"><h3 class="mt-0 fs-20 mb-10 text-dark-green">Generous Big Meal products are available after 11AM only.</h3></div>
        <div class="popup-max-hgt">

        </div>
        <a class="popup-close" data-popup-close="no_branch" href="#"><i class="icon-cross"></i></a>
    </div>
    <div class="overlay overlay-click"></div>
</div>
{!! Form::close() !!}
@else

@endif


@endsection
@section('js')
<script>
    $(document).ready(function() {

        function refreshData()
        {
            d=new Date().toLocaleString("en-US", {timeZone: "Africa/Nairobi"});
            var a = new Date(d);
            console.log(a.getHours());
            console.log(a.getDay());
            $('#currentHour').text(a.getHours());
            setTimeout(refreshData, 1000);
        }
        refreshData(); 

        function submitForm() {
            var submit = true;
            $('#productForm').find('.required').each(function(index) {
                if ($(this).val() == null || $(this).val() == '' || $(this).val() == undefined) {
                    event.preventDefault();
                    submit = false;
                    console.log("Submit : ", submit);
                    alert("Please make a choice!");
                    return false;
                }
            });
            if (submit == true) {
                $('#productForm').submit();
            }
        }

        $('#comboPrice').change(function() {
            if (this.checked) {
                $('#comboItems').addClass("required");
            } else {
                $('#comboItems').removeClass("required");
            }
        });

        var boxes = $('#comboPrice:checkbox:checked').length;
        if (boxes) {
            $('#comboProducts').css('display', 'block');
        }
        $('input[type=checkbox][name=comboPrice]').change(function() {
            var checked = this.checked;
            if (checked) {
                $('#comboProducts').css('display', 'block');
            } else {
                $('#comboProducts').css('display', 'none');
            }
        });
        $('.extraItem').change(function() {
            // if ($('#comboPrice').prop("checked") == false) {
            //     alert("Please select combo");
            //     $(this).prop('selectedIndex', 0);
            //     return false;
            // } else {

            // }
        });
        $('#add_to_cart').click(function() {
            var currentHour = $('#currentHour').text();
            var url_string = window.location.href
            var url = new URL(url_string);
            var cat = url.searchParams.get("cat");
            if( (currentHour > 11) && (cat == 'BIG ON BREAKFAST')){
                $('#no_branch').css('display', 'block');
                return false;
            }else
             if( (currentHour < 11) && (cat == 'GENEROUS BIG MEALS')){
                $('#no_branch1').css('display', 'block');
                return false;
            }else{
                var formSubmit = true;
                if ($('#comboOption').prop("checked") == true) {
                    if ($('#comboPrice').prop("checked") == false) {
                        alert("111Please select combo");
                        return false;
                    } else {
                        $(".extraItem").each(function() {
                            var val = $(this).val();
                            if (!val) {
                                formSubmit = false;
                                alert("Please customize your product!");
                                return false;
                            }

                        });
                        if (formSubmit)
                            submitForm();
                    }
                } else {
                    if ($('#comboPrice:checkbox:checked').length) {
                        $(".extraItem").each(function() {
                            var val = $(this).val();
                            if (!val) {
                                formSubmit = false;
                                alert("Please make a choice.");
                                return false;
                            }

                        });
                    }

                    if (formSubmit)
                        submitForm();
                }
            }
        });
    });

    function removeFromFavourite(prodId) {
        if (confirm('Do you really want to remove this product from your favourite list?')) {
            var productId = prodId.split('-')[1];
            $.ajax({
                url: "{{route('remove.favourite')}}",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    'prodId': productId
                },
                success: function(result) {
                    location.reload();
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert("Status: " + textStatus);
                    alert("Error: " + errorThrown);
                    location.reload();
                }
            });
        } else {

        }
    }
</script>
@endsection