@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,
        });
    }
</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(file_exists($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)}}">
                                            </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(file_exists($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">{{$product->model}}</h2>
                        <p class="categoty">{{$product->translate($product->product_category->name, $product->product_category->ar_name)}}</p>
                        <a href="#get-quote" class="green_filled_btn fw-medium px-5 fs-14 w-auto">Request a
                            Quote</a>
                        <div class="series">
                            <p class="">Series</p>
                            <h3 class="">{{$product->product_serices->name}}</h3>
                        </div>
                        <div class="row d-flex">
                            @if(isset($product->electrical_wattage) && !empty($product->electrical_wattage))
                                <div class="col-md-3 col-6">
                                    <div class="box green-bg">
                                        <div>
                                            <p>Wattage</p>
                                            <span class="lg">{{$product->electrical_wattage}}</span>
                                        </div>
                                        <div class="icon">
                                            <img src="{{asset('frontend/images/icons/wattage.svg')}}">
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if(isset($product->light_tech_color_temperature) && !empty($product->light_tech_color_temperature))
                                <div class="col-md-3 col-6">
                                    <div class="box green-bg">
                                        <div>
                                            <p>Colour Temperature</p>
                                            <span class="sm">{{$product->light_tech_color_temperature}}</span>
                                        </div>
                                        <div class="icon">
                                            <img src="{{asset('frontend/images/icons/colour-temperature.svg')}}">
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if(isset($product->light_tech_luminous_flux_min) && !empty($product->light_tech_luminous_flux_min))
                                <div class="col-md-3 col-6">
                                    <div class="box gray-bg">
                                        <div>
                                            <p>Lumens</p>
                                            <span class="md">{{$product->light_tech_luminous_flux_min}}</span>
                                        </div>
                                        <div class="icon">
                                            <img src="{{asset('frontend/images/icons/luminous%20.svg')}}">
                                        </div>
                                    </div>
                                </div>
                            @endif
                            @if(isset($product->light_tech_smd) && !empty($product->light_tech_smd))
                                <div class="col-md-3 col-6">
                                    <div class="box white-bg">
                                        <div>
                                            <p>SMD</p>
                                            <span class="xs">{{$product->light_tech_smd}}</span>
                                        </div>
                                        <div class="icon">
                                            <img src="{{asset('frontend/images/icons/degree.svg')}}">
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                        
                        @if(!empty($product->download_datasheet) || !empty($product->download_ies_files))
                            <div class="row d-flex downloads">
                                <h4 class="col-12 w-100">Downloads</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="{{asset($product->download_datasheet)}}" target="_blank" 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">
                                                <a href="{{asset($product->download_ies_files)}}" 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 py-5">
            <div class="container py-lg-4">
                <div class="row">
                    <div class="col-12">
                        <h2>Specifications</h2>
                        <div id="spec_accordion" class="spec_accordion">
                            <div class="card mb-0">
                                @if(!empty($product->mechanical_width_min) || !empty($product->mechanical_height_min) || !empty($product->mechanical_length) || !empty($product->mechanical_degree_of_protection || !empty($product->mechanical_cut_length)))
                                    <div class="card-header collapsed" data-toggle="collapse"
                                        data-parent="#spec_accordion" href="#fOne">
                                        <a class="card-title">Mechanical Data</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->mechanical_width_min))
                                                                <li>
                                                                    <span>Width (mm)</span>
                                                                    <label>{{$product->mechanical_width_min}} {{(!empty($product->mechanical_width_max))? ' - '.$product->mechanical_width_max:''}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->mechanical_height_min))
                                                                <li>
                                                                    <span>Height (mm)</span>
                                                                    <label>{{$product->mechanical_height_min}} {{(!empty($product->mechanical_height_max))? ' - '.$product->mechanical_height_max:''}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->mechanical_length))
                                                                <li>
                                                                    <span>Length (mm) / Reel</span>
                                                                    <label>{{$product->mechanical_length}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->mechanical_degree_of_protection))
                                                                <li>
                                                                    <span>Degree of protection (IP)</span>
                                                                    <label>{{strtoupper($product->mechanical_degree_of_protection)}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->mechanical_cut_length))
                                                                <li>
                                                                    <span>Cut Length (mm)</span>
                                                                    <label>{{$product->mechanical_cut_length}}</label>
                                                                </li>
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                @if(!empty($product->electrical_efficacy) || !empty($product->electrical_wattage) || !empty($product->electrical_voltage))
                                    <div class="card-header collapsed" data-toggle="collapse"
                                        data-parent="#spec_accordion" href="#fTwo">
                                        <a class="card-title">Electrical Data</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->electrical_efficacy))
                                                                <li>
                                                                    <span>Efficacy (Lm/w)</span>
                                                                    <label>{{$product->electrical_efficacy}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->electrical_wattage))
                                                                <li>
                                                                    <span>Wattage(W/M)</span>
                                                                    <label>{{$product->electrical_wattage}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->electrical_voltage))
                                                                <li>
                                                                    <span>Voltage (VDC)</span>
                                                                    <label>{{$product->electrical_voltage}}</label>
                                                                </li>
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                @if(!empty($product->light_tech_smd) || !empty($product->light_tech_no_of_leds) || !empty($product->light_tech_color_temperature) || !empty($product->light_tech_luminous_flux_min) || !empty($product->light_tech_beam_angle) || !empty($product->light_tech_color_consistency) || !empty($product->light_tech_binning) || !empty($product->light_tech_color_rendering) || !empty($product->light_tech_life_span) || !empty($product->light_tech_warranty) || !empty($product->light_tech_dimmable))
                                    <div class="card-header collapsed" data-toggle="collapse" data-parent="#spec_accordion" href="#fThree">
                                        <a class="card-title">Light Technical Data</a>
                                    </div>
                                    <div id="fThree" 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->light_tech_smd))
                                                                <li>
                                                                    <span>SMD</span>
                                                                    <label>{{$product->light_tech_smd}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->light_tech_no_of_leds))
                                                                <li>
                                                                    <span>No of Leds / M</span>
                                                                    <label>{{$product->light_tech_no_of_leds}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->light_tech_color_temperature))
                                                                <li>
                                                                    <span>Colour temperature (CCT)</span>
                                                                    <label>{{$product->light_tech_color_temperature}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->light_tech_luminous_flux_min))
                                                                <li>
                                                                    <span>Luminous Flux (Lm/M)</span>
                                                                    <label>{{$product->light_tech_luminous_flux_min}} {{(!empty($product->light_tech_luminous_flux_max))? ' - '.$product->light_tech_luminous_flux_max:''}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->light_tech_beam_angle))
                                                                <li>
                                                                    <span>Beam angle</span>
                                                                    <label>{{$product->light_tech_beam_angle}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->light_tech_color_consistency))
                                                                <li>
                                                                    <span>Colour consistency (McAdam ellipse)</span>
                                                                    <label>{{$product->light_tech_color_consistency}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->light_tech_binning))
                                                                <li>
                                                                    <span>Binning</span>
                                                                    <label>{{$product->light_tech_binning}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->light_tech_color_rendering))
                                                                <li>
                                                                    <span>Colour rendering index (CRI)</span>
                                                                    <label>{{$product->light_tech_color_rendering}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->light_tech_life_span))
                                                                <li>
                                                                    <span>Life Span (hrs)</span>
                                                                    <label>{{$product->light_tech_life_span}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->light_tech_warranty))
                                                                <li>
                                                                    <span>Warranty (Years)</span>
                                                                    <label>{{$product->light_tech_warranty}}</label>
                                                                </li>
                                                            @endif
                                                            @if(!empty($product->light_tech_dimmable))
                                                                <li>
                                                                    <span>Dimmable</span>
                                                                    <label>{{$product->light_tech_dimmable}}</label>
                                                                </li>
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                @if(!empty($product->temprature_operating_temp))
                                    <div class="card-header collapsed" data-toggle="collapse"
                                        data-parent="#spec_accordion" href="#fFour">
                                        <a class="card-title">
                                            Temperature Data
                                        </a>
                                    </div>
                                    <div id="fFour" 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->temprature_operating_temp))
                                                                <li>
                                                                    <span>Operating Temp (°C)</span>
                                                                    <label>{{$product->temprature_operating_temp}}</label>
                                                                </li>
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        @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>Frames</h2>
                            <div class="row d-flex">
                                @foreach($frames as $key => $frame)
                                    <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>{{$frame->name}}</span></li>
                                                    <li><label>Size</label> : <span>{{$frame->size}}mm</span></li>
                                                    <li><label>Cut out</label> : <span>{{$frame->cutout}}mm</span></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                @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">Related Products</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"><img src="{{asset($related_product->thumb_image)}}"></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" 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">
                                                        <input type="text" 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">
                                                        <input type="text" 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">
                                                        <input type="text" 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">
                                                        <input type="text" name="phone" class="form-control" id="phone" required>
                                                        <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">
                                                        <textarea class="form-control" 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');
        }else{
            // $("#emailInfoStatus").text("Please Enter Valid Email id!");
            $("#sendBtnFeedbackContact").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