@extends('frontend.layouts.app')
@section('page_content')
<script src="{{asset('frontend/vendor/sweetalert2/dist/sweetalert2.min.js')}}"></script>
<link rel="stylesheet" href="{{asset('frontend/vendor/sweetalert2/dist/sweetalert2.min.css')}}">
<link href="{{asset('frontend/vendor/lightbox/css/lightgallery.css')}}" rel="stylesheet">
<script>
    function updateFeatureProject(icon, title, text) {
        Swal.fire({
            icon: icon,
            title: title,
            text: text,
        }).then((result) => {
            if (result['isConfirmed']){
              window.location.reload();
            }
        });
    }
   function isNumber(evt) 
   {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
   }
</script>
<div class="inner_page_without_banner">
    <section class="breadcrumb_sec header-width">
        <ol class="breadcrumb">
            @include('frontend.products.product_details_breadcrum')
        </ol>
    </section>
    <section class="main_content">
        <section class="header-width">
            <div class="row">
                <div class="col-lg-6">
                    <div class="product-slider-for slider">
                        @if(count($product->product_gallery) > 0)
                            @foreach($product->product_gallery as $key => $product_gallery)
                                @if(checkURLExistency($product_gallery->image))
                                    <div class="lightgallery">
                                        <div class="item" data-src="{{asset($product_gallery->image)}}">
                                            <a href="javascript:0;">
                                                <img src="{{asset($product_gallery->image)}}">
                                                @if($product_gallery->title)
                                                    <p class="gallery_title">{{$product_gallery->title}}</p>
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                @endif 
                            @endforeach
                        @else
                            <div class="lightgallery">
                                <div class="item" data-src="{{asset('images/default.jpg')}}">
                                    <a href="javascript:0;">
                                        <img src="{{asset('images/default.jpg')}}">
                                    </a>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="slider-nav slider">
                        @if(count($product->product_gallery) > 0)
                            @foreach($product->product_gallery as $key => $product_gallery)
                                @if(checkURLExistency($product_gallery->image))
                                    <div class="item-slick">
                                        <img src="{{asset($product_gallery->image)}}">
                                    </div>
                                @endif
                            @endforeach
                        @else
                            <div class="item-slick">
                                <img src="{{asset('images/default.jpg')}}">
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="pp_details">
                        <h2 class="title">{{ strtoupper((!empty($product->dp_series)) ? $product->dp_series : $product->model) }}</h2>
                        <p class="categoty mb-1">{{LangTranslate::translate($product->product_category->name??'',$product->product_category->ar_name??'')}}</p>
                        @if(!empty($product->dp_heading))
                            <p class="fs-18 mb-3">{{LangTranslate::translate($product->dp_heading ?? '',$product->ar_dp_heading ?? '')}}</p>
                        @endif
                        <a href="#get-quote" class="green_filled_btn fw-medium px-5 fs-14 w-auto">{{LangTranslate::translate(config('global.get_in_touch.en'),config('global.get_in_touch.ar'))}}</a>

                        @if(count($product->key_features) > 0)
                            <div class="row d-flex key-features pt-5">
                                <h4 class="col-12 w-100">Key Features</h4>
                                <div class="list">
                                    <ul>
                                        @foreach($product->key_features as $key => $value)
                                            <li><i class="fa fa-check"></i> {{LangTranslate::translate($value->title??'',$value->ar_title ?? '')}}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif
                        
                        @if((!empty($product->en_1_en) && !empty($product->en_1_op)) || (!empty($product->en_2_en) && !empty($product->en_2_op)) || (!empty($product->en_3_en) && !empty($product->en_3_op)) || (!empty($product->en_4_en) && !empty($product->en_4_op)))
                            <div class="row d-flex key-features pt-5">
                                <h4 class="col-12 w-100">EN Values</h4>
                                <div class="list">
                                    <ul>
                                        @if(!empty($product->en_1_en) && !empty($product->en_1_op))
                                            <li>
                                                <i class="fa fa-check"></i> <span>EN 1</span> :
                                                {{'EN - '.$product->en_1_en}} | {{'EN O/P - '.$product->en_1_op}}
                                            </li>
                                        @endif

                                        @if(!empty($product->en_2_en) && !empty($product->en_2_op))
                                            <li>
                                                <i class="fa fa-check"></i> <span>EN 2</span> :
                                                {{'EN - '.$product->en_2_en}} | {{'EN O/P - '.$product->en_2_op}}
                                            </li>
                                        @endif

                                        @if(!empty($product->en_3_en) && !empty($product->en_3_op))
                                            <li>
                                                <i class="fa fa-check"></i> <span>EN 3</span> :
                                                {{'EN - '.$product->en_3_en}} | {{'EN O/P - '.$product->en_3_op}}
                                            </li>
                                        @endif
                                        @if(!empty($product->en_4_en) && !empty($product->en_4_op))
                                            <li>
                                                <i class="fa fa-check"></i> <span>EN 4</span> :
                                                {{'EN - '.$product->en_4_en}} | {{'EN O/P - '.$product->en_4_op}}
                                            </li>
                                        @endif
                                    </ul>
                                </div>
                            </div>
                            
                        @endif
                        
                        @if(!empty($product->download_datasheet) || !empty($product->download_ies_files))
                            <div class="row d-flex downloads">
                                <h4 class="col-12 w-100">{{LangTranslate::translate(config('global.downloads.en'),config('global.downloads.ar'))}}</h4>
                                @if(!empty($product->download_datasheet) && file_exists($product->download_datasheet))
                                    <div class="col-md-6">
                                        <div class="outline-div">
                                            Datasheet
                                            <div class="d-flex">
                                                <a href="{{asset($product->download_datasheet)}}" target="_blank" class="view"><i class="fa fa-eye"></i></a>
                                                <a href="javascript:0;" onclick="download_file('{{asset($product->download_datasheet)}}','{{$product->model}}.pdf');" class="download"><i class="fa fa-download"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                @if(!empty($product->download_ies_files) && file_exists($product->download_ies_files))
                                    <div class="col-md-6">
                                        <div class="outline-div">
                                            IES Files
                                            <div class="d-flex">
                                                @php(
                                                    $ies_ext = pathinfo($product->download_ies_files, PATHINFO_EXTENSION)
                                                )
                                                <a href="{{asset($product->download_ies_files)}}" download="{{$product->model}}.{{$ies_ext}}" target="_blank" class="download"><i class="fa fa-download"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>

        <section class="product_specifications product_accessories">
            <div class="container py-lg-4">
                <div class="row">
                    <div class="col-12">
                        @if(!empty($product->length) || !empty($product->dia) || !empty($product->cutout) || !empty($product->height || !empty($product->width)) || !empty($product->mh_wattage) || !empty($product->mh_io_op_vac_in_min) || !empty($product->mh_degree_of_protection) || !empty($product->mh_warranty))
                            <h2>{{LangTranslate::translate(config('global.specifications.en'),config('global.specifications.ar'))}}</h2>
                        @endif
                        <div id="spec_accordion" class="spec_accordion">
                            <div class="card mb-0"> 
                                @if(!empty($product->length) || !empty($product->dia) || !empty($product->cutout) || !empty($product->height || !empty($product->width)))
                                    <div class="card-header collapsed" data-toggle="collapse"
                                        data-parent="#spec_accordion" href="#fOne">
                                        <a class="card-title">{{LangTranslate::translate(config('global.mechanical_data.en'),config('global.mechanical_data.ar'))}}</a>
                                    </div>
                                    <div id="fOne" class="collapse" data-parent="#spec_accordion">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-8">
                                                    <div class="list_view">
                                                        <ul>
                                                            @if(!empty($product->width))
                                                                <li>
                                                                    <span>Width (mm)</span>
                                                                    <label>{{$product->width}}</label>
                                                                </li>
                                                            @endif

                                                            @if(!empty($product->height))
                                                                <li>
                                                                    <span>Height (mm)</span>
                                                                    <label>{{$product->height}}</label>
                                                                </li>
                                                            @endif
                                                            
                                                            
                                                            @if(!empty($product->length))
                                                                <li>
                                                                    <span>Length (mm)</span>
                                                                    <label>{{$product->length}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->dia))
                                                                <li>
                                                                    <span>Dia</span>
                                                                    <label>{{$product->dia}}</label>
                                                                </li>
                                                            @endif 

                                                            @if(!empty($product->cutout))
                                                                <li>
                                                                    <span>Cutout</span>
                                                                    <label>{{$product->cutout}}</label>
                                                                </li>
                                                            @endif       
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif  
                                @if(!empty($product->mh_wattage) || !empty($product->mh_io_op_vac_in_min) || !empty($product->mh_degree_of_protection) || !empty($product->mh_warranty))
                                    <div class="card-header collapsed" data-toggle="collapse"
                                        data-parent="#spec_accordion" href="#fTwo">
                                        <a class="card-title">{{LangTranslate::translate(config('global.electrical_data.en'),config('global.electrical_data.ar'))}}</a>
                                    </div>
                                    <div id="fTwo" class="collapse" data-parent="#spec_accordion">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-8">
                                                    <div class="list_view">
                                                        <ul>
                                                            @if(!empty($product->mh_wattage))
                                                                <li>
                                                                    <span>Wattage (W)</span>
                                                                    <label>{{$product->mh_wattage}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->mh_io_op_vac_in_min))
                                                                <li>
                                                                    <span>I/P (Vac)</span>
                                                                    <label>{{$product->mh_io_op_vac_in_min}} {{(!empty($product->mh_io_op_vac_in_max))? ' - '.$product->mh_io_op_vac_in_max:''}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->mh_io_op_vac_out))
                                                                <li>
                                                                    <span>O/P (Vdc)</span>
                                                                    <label>{{$product->mh_io_op_vac_out}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->mh_degree_of_protection))
                                                                <li>
                                                                    <span>Degree of protection (IP)</span>
                                                                    <label>{{strtoupper($product->mh_degree_of_protection)}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->mh_warranty))
                                                                <li>
                                                                    <span>Warranty (Years)</span>
                                                                    <label>{{$product->mh_warranty}}</label>
                                                                </li>
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        @php($accessories = DB::table('products_accessories')->where(['category_id'=>$product->category_id, 'series_id'=>$product->series_id,'status'=>1])->get())
        @if(count($accessories) > 0)
            <section class="product_accessories pt-0 mb-3">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div id="accessories_accordion" class="accessories_accordion">
                                <div class="card mb-0">
                                    <div class="card-header collapsed" data-toggle="collapse" data-parent="#accessories_accordion" href="#aOne">
                                        <a class="card-title"><h2>{{LangTranslate::translate(config('global.accessories.en'),config('global.accessories.ar'))}}</h2></a>
                                    </div>
                                    <div id="aOne" class="collapse" data-parent="#accessories_accordion" >
                                        <div class="card-body"> 
                                            <div class="row d-flex">
                                                @foreach($accessories as $key => $value)
                                                    <div class="col-lg-3 col-md-6">
                                                        <div class="item">
                                                            <div class="image">
                                                                @if(file_exists($value->image))
                                                                    <img src="{{asset($value->image)}}">
                                                                @else
                                                                    <img src="{{asset('images/default.jpg')}}">
                                                                @endif
                                                            </div>
                                                            <div class="desc">
                                                                <h6>{{LangTranslate::translate($value->title??'',$value->ar_title??'')}}</h6>
                                                                <p class="accs_short_desc">{{LangTranslate::translate($value->description && strlen($value->description) > 30?substr($value->description,0,30)."...":$value->description,
                                                                    $value->description && strlen($value->ar_description) > 30?substr($value->ar_description,0,30)."...":$value->ar_description)}}</p>
                                                                
                                                                @if(strlen($value->description) > 30)
                                                                <span data-desc="{{LangTranslate::translate($value->description ??'',
                                                                    $value->description ?? '')}}" data-toggle="modal" data-target="#displayAccsDesc" class="accs_desc_readmore">Read More</span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @php($frames = $product->getAllFrames($product->category_id, $product->id))
        @if(count($frames) > 0)
            <section class="product_frames pt-0 pb-5">
                <div class="container py-lg-4">
                    <div class="row">
                        <div class="col-12">
                            <h2>{{LangTranslate::translate(config('global.frams.en'),config('global.frams.ar'))}}</h2>
                            <div class="row d-flex">
                                @foreach($frames as $key => $frame)
                                    @if(file_exists($frame->thumb_image))
                                    <div class="col-lg-3 col-md-4 col-sm-6">
                                        <div class="item">
                                            <div class="image">
                                                @if(file_exists($frame->thumb_image))
                                                    <img src="{{asset($frame->thumb_image)}}">
                                                @else
                                                    <img src="{{asset('images/default.jpg')}}">
                                                @endif
                                            </div>
                                            <div class="desc">
                                                <ul>
                                                    <li><span>{{LangTranslate::translate($frame->name??'',$frame->ar_name??'')}}</span></li>
                                                    <li><label>Size</label> : <span>
                                                        {{LangTranslate::translate($frame->size??'',$frame->ar_size??'')}}</span></li>
                                                    <li><label>Cut out</label> : <span>{{LangTranslate::translate($frame->cutout??'',$frame->ar_cutout??'')}}</span></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        @if(count($products) > 0)
            <section class="gray_bg py-5">
                <div class="container py-lg-5">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="sec_title text-left mb-4">
                                <h2 class="text_black fs-24 fw-medium mb-0">{{LangTranslate::translate(config('global.related_products.en'),config('global.related_products.ar'))}}</h2>
                            </div>
                            <div class="slick-slider related-products">
                                @foreach($products as $key => $related_product)
                                    <div class="item">
                                        <a href="{{route('products.item.details',['id'=>$related_product->category_id,'title_name'=>strtolower(urlencode($category->name)),'product_id'=>$related_product->id,'model'=>$related_product->model])}}">
                                            <div class="figure">
                                                @if(file_exists($related_product->thumb_image))
                                                    <img src="{{asset($related_product->thumb_image)}}">
                                                @else
                                                    <img src="{{asset('images/default.jpg')}}">
                                                @endif
                                            </div>
                                            <p class="fw-regular">{{$related_product->model}}</p>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        <section class="py-5" id="get-quote">
            <div class="container py-lg-5">
                <div class="row">
                    <div class="col-md-12">
                        <div class="quote_form_div p-md-5">
                            <div class="row d-flex">
                                <div class="col-lg-5">
                                    <div class="desc">
                                        <h2>Have questions about this product?</h2>
                                        <h3>Get a quote!</h3>
                                    </div>
                                </div>
                                <div class="col-lg-7">
                                    <div class="quote_form mt-5">
                                        <form method="post" id="productFeedbackDetailsForm">
                                            @csrf
                                            <input type="hidden" name="type" value="2">
                                            <input type="hidden" name="category_id" value="{{$product->category_id}}">
                                            <input type="hidden" name="product_id" value="{{$product->id}}">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="form-group is-floating-label">
                                                        <input type="email" name="email" class="form-control email" id="productRequestEmail" required>
                                                        <label for="productRequestEmail">Enter Your Email ID *</label>
                                                    </div>
                                                    <small id="emailInfoStatus"></small>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group is-floating-label req_quote_fields_cls disabled">
                                                        <input type="text" disabled name="first_name" class="form-control" id="fname" required>
                                                        <label for="fname">First Name *</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group is-floating-label req_quote_fields_cls disabled">
                                                        <input type="text" disabled name="last_name" class="form-control" id="lname" required>
                                                        <label for="lname">Last Name *</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group is-floating-label req_quote_fields_cls disabled">
                                                        <input type="text" disabled name="company" class="form-control" id="country">
                                                        <label for="country">Your Company</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group is-floating-label req_quote_fields_cls disabled">
                                                        <input type="text" disabled name="phone" class="form-control" id="phone" required="" onkeypress="return isNumber(event)">
                                                        <label for="phone" class="phone_lanel">Phone *</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="form-group is-floating-label textarea req_quote_fields_cls disabled">
                                                        <textarea class="form-control" disabled name="message" id="comments"></textarea>
                                                        <label for="comments">Your Comments</label>
                                                    </div>
                                                </div>
                                            </div>
                                        
                                            <button type="submit" disabled id="sendBtnFeedbackContact" class="green_filled_btn fw-medium px-5 fs-14 w-auto">Get a Quote</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
</div>
<script src="{{asset('frontend/vendor/sweetalert2/dist/sweetalert2.all.min.js')}}"></script>

<!-- Include a polyfill for ES6 Promises (optional) for IE11 -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>
<script src="{{asset('frontend/vendor/intl-tel/js/intlTelInput.js')}}"></script>
<script>
    $("#phone").intlTelInput({
        //       allowDropdown: false,
        //       autoHideDialCode: false,
        //       autoPlaceholder: "off",
        //       dropdownContainer: "body",
        //       excludeCountries: ["us"],
        //       formatOnDisplay: false,
        //       hiddenInput: "full_number",
        //       initialCountry: "auto",
        //       nationalMode: false,
        //       onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
        //        placeholderNumberType: "MOBILE",
        preferredCountries: ['ae', 'in'],
        separateDialCode: true,
        utilsScript: "intl-tel/js/utils.js"
    });

    function isValidEmailAddress(emailAddress) {
        var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
        return pattern.test(emailAddress);
    };
    $("#productRequestEmail").blur(function (e) { 
        e.preventDefault();
        let email = $(this).val();
        if(email != '' && isValidEmailAddress(email)){
            $.ajax({
                type: "GET",
                url: "{{route('admin.product.contact.details.email.save')}}?email="+email,
                success: function (response) {
                    console.log(response);
                    if(response.res == false){
                        // $("#emailInfoStatus").text(response.message);
                        // $("#sendBtnFeedbackContact").attr('disabled', 'disabled');
                    }else{
                        $("#emailInfoStatus").text('');
                        // $("#sendBtnFeedbackContact").removeAttr('disabled');
                    }
                }
            });
            //$("#sendBtnFeedbackContact").removeAttr('disabled');
            $('.req_quote_fields_cls').removeClass('disabled');
            $("#sendBtnFeedbackContact").removeAttr('disabled');
            $("#fname").removeAttr('disabled');
            $("#lname").removeAttr('disabled');
            $("#country").removeAttr('disabled');
            $("#phone").removeAttr('disabled');
            $("#comments").removeAttr('disabled');
        }else{
            // $("#emailInfoStatus").text("Please Enter Valid Email id!");
            //$("#sendBtnFeedbackContact").attr('disabled', 'disabled');
            $('.req_quote_fields_cls').addClass('disabled');

            $("#sendBtnFeedbackContact, #fname, #lname, #country, #phone, #comments").attr('disabled', 'disabled');
        }
    });

    $('#productFeedbackDetailsForm').submit(function (eve) {  
        eve.preventDefault();
        $("#sendBtnFeedbackContact").text('Sending wait...');
        $.ajax({
            type: "POST",
            url: "{{route('admin.product.contact.details.save')}}",
            data: $(this).serialize(),
            dataType: "JSON",
            success: function (response) {
                console.log(response);
                $("#sendBtnFeedbackContact").text('Get a Quote');
                if(response.res == true){
                    updateFeatureProject('success', response.title, response.message);
                }else{
                    updateFeatureProject('error', response.title, response.message);
                }
                $('#productFeedbackDetailsForm').trigger('reset');
                $("#productFeedbackDetailsForm .form-group.is-floating-label").removeClass('is-focused');
            }
        });
    });
</script>
<script src="{{asset('frontend/vendor/lightbox/js/lightgallery-all.min.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".lightgallery").lightGallery({
            share: false,
            actualSize: false,
            counter: false,
            thumbnail: false,
            fullScreen: false,
            enableDrag: true,
            download: false,
        });
    });
</script>
@endsection