@extends('web.layouts.app')
@section('title',$company->company_name)
@section('content')


    <div class="about_img">
        <img style="height: 300px; width: 100%;" src="{{$slider_image ? $slider_image->image : asset('benaeilogo.png')}}">
    </div>

    <!-- start company details -->
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <div class="comp_det">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="com_img">
                                <img src="{{$company->logo}}" style="    width: 208px;
    height: 208px;" alt="">
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="comp_head">
                                <h4>شركة الزخف للسراميك<span class="span1">({{$visitors_count}} <span
                                            class="span2">زائر </span> )</span></h4>
                                <p class="card-text">
                                    @if($rate == 0)

                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    @elseif($rate == 1)
                                        <i class="color_star fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    @elseif($rate ==2 )
                                        <i class="color_star fas fa-star"></i>
                                        <i class="color_star fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    @elseif($rate ==3 )
                                        <i class="color_star fas fa-star"></i>
                                        <i class="color_star fas fa-star"></i>
                                        <i class="color_star fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    @elseif($rate ==4 )
                                        <i class="color_star fas fa-star"></i>
                                        <i class="color_star fas fa-star"></i>
                                        <i class="color_star fas fa-star"></i>
                                        <i class="color_star fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    @elseif($rate ==5 )

                                        <i class="color_star fas fa-star"></i>
                                        <i class="color_star fas fa-star"></i>
                                        <i class="color_star fas fa-star"></i>
                                        <i class="color_star fas fa-star"></i>
                                        <i class="color_star fas fa-star"></i>
                                    @endif


                                    <span>( {{$count}} )</span>
                                </p>
                                <p class="comp_information">{!! $company->company_details[App::getLocale()] !!}
                                </p>
                                <a href="{{$company->portfolio_file}}">
                                    <i class="fas fa-download"></i>
                                    تحميل بروتفوليو الشركة
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="this_comp_social">
                    <div class="social">
                        <ul class="firest">
                            <li><a href="{{$company->email}}"><i class="fH2 fab fa-google-plus "></i></a></li>
                            <li><a href="https://api.whatsapp.com/send?phone={{$company->whatsapp}}"><i
                                        class="fH2 fab fa-whatsapp "></i></a></li>
                            <li><a href="{{$company->instagram}}"><i class="fH2 fab fa-instagram "></i></a></li>
                            <li><a href="{{$company->twitter}}"><i class="fH2 fab fa-twitter "></i></a></li>
                            <li><a href="{{$company->facebook}}"><i class="fH2 fab fa-facebook-f "></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- start nav for company -->

    <div class="bac_nav">
        <div class="">
            <div class="row">
                <div class="col-12">
                    <div class="det_nav">
                        <div class="header-menu">
                            <ul class="navbar-nav all_products">
                                <li id="toog_allproduct" class="add_clic has-children" data-toggle="collapse"
                                    data-target="#allprod_thiscompany">
                                    جميع المنتجات
                                    <i class="fas fa-caret-down"></i>
                                    <ul class="all_products_2">
                                        @foreach($categories as $category)
                                            <li onclick="getCategoryId({{$category->id}},{{$company->id}})"
                                                value="{{$category->id}}">{{$category->name[\App::getLocale()]}}</li>
                                        @endforeach
                                    </ul>
                                </li>
                                <li id="toog_about" class="add_clic" data-toggle="collapse"
                                    data-target="#about_thiscompany">
                                    عن الشركة
                                </li>
                                <li id="toog_works" class="add_clic" data-toggle="collapse"
                                    data-target="#works_thiscompany">
                                    الأعمال
                                </li>
                                <li id="toog_location" class="add_clic" data-toggle="collapse"
                                    data-target="#location_thiscompany">
                                    مواقع الفرع
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <!-- start all products -->

    <div style="display: block;" id="allprod_thiscompany" class="collapse">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <div class="cop_deatil">
                        <h4 id="category_name">جميع منتجاتنا </h4>
                    </div>
                </div>
                <div class="col-6">
                    <div class="but_style">
                        <i id="bar_viwe" class="fas fa-bars" data-toggle="collapse"
                           data-target="#coll_horiztal_viwe"></i>
                        <i id="horiztal_viwe" class="fas fa-grip-horizontal" data-toggle="collapse"
                           data-target="#coll_bar_viwe"></i>
                    </div>
                </div>
            </div>
        </div>


        <!-- start viwe as card -->
        <div style="display: block;" id="coll_bar_viwe" class="collapse">
            <div class="b_viwe">
                <div class="container">
                    <div class="row" id="change_products">

                        @foreach($products as $row)
                            @include('web.products.item')
                        @endforeach
                    </div>
                </div>
            </div>

        </div>


        <!-- start viwe2 -->

        <div id="coll_horiztal_viwe" class="collapse">
            <div class="hor_viwe">
                <div class="container">
                    <div class="row" id="change_products_horizontal">

                        @foreach($products as $row)
                            @include('web.products.horizontal_item')
                        @endforeach

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















    <!-- start about company -->
    <div id="about_thiscompany" class="collapse">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="cop_deatil">
                        <h4>عن الشركة</h4>
                    </div>
                </div>
                <div class="col-sm-6">
                    <p class="comp_info">

                        {!! $company->company_details[\App::getLocale()] !!}
                    </p>
                </div>

                <div class="col-12">
                    <div class="down_cv_comp">
                        <a href="{{$company->portfolio_file}}">
                            <i class="fas fa-download"></i>
                            تحميل بروتفوليو الشركة
                        </a>
                    </div>
                </div>
                <div class="col-12">
                    <div class="fllow_thiscomp">
                        <div class="this_comp_social">
                            <h2 class="h_head">تواصل معنا عبر</h2>
                            <div class="this_comp_social">
                                <div class="social">
                                    <ul class="firest">
                                        <li><a href="{{$company->email}}"><i class="fH2 fab fa-google-plus "></i></a>
                                        </li>
                                        <li><a href="https://api.whatsapp.com/send?phone={{$company->whatsapp}}"><i
                                                    class="fH2 fab fa-whatsapp "></i></a></li>
                                        <li><a href="{{$company->instagram}}"><i class="fH2 fab fa-instagram "></i></a>
                                        </li>
                                        <li><a href="{{$company->twitter}}"><i class="fH2 fab fa-twitter "></i></a></li>
                                        <li><a href="{{$company->facebook}}"><i class="fH2 fab fa-facebook-f "></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="Privacy">
                        <h2 class="h_head">سياسة الخصوصية</h2>
                        <div class="privacy_p">
                            <p class="comp_info">
                                {!! $company->policy[\App::getLocale()] !!}
                            </p>

                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="Privacy">
                        <h2 class="h_head">سياسة الاستبدال والاسترجاع </h2>
                        <div class="privacy_p">
                            <p class="comp_info">
                                {!! $company->replacement[\App::getLocale()] !!}

                            </p>

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



    <!-- start works -->

    <div id="works_thiscompany" class="collapse">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="cop_deatil">
                        <h4 class="h_head">
                            الاعمال
                        </h4>
                    </div>
                </div>
                @foreach($company_works as $work)
                    <div class="col-md-3 col-sm-6">
                        <div class="work_img">
                            <img src="{{$work->image}}" alt="">
                        </div>
                        <div class="work_name">
                            <p>{{$work->name}}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>


    <!-- start location -->

    <div id="location_thiscompany" class="collapse">
        <div class="container">'
            <div class="row">
                <div class="col-12">
                    <div class="cop_deatil">
                        <h4 class="h_head">
                            مواقع الشركة علي الخريطة
                        </h4>
                    </div>
                </div>
                <div class="col-12">
                    <div class="map">
                        <div id='map_canvas'></div>
                    </div>

                    <div class="comp_map">

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






@stop


@section('script')
    <script>
        var locations = <br />
<b>Warning</b>:  Undefined variable $shops in <b>/home/alkhalaffamily/public_html/trial_benaee/resources/views/web/companies/index.blade.php</b> on line <b>348</b><br />
null;
        jQuery(function($) {
            <!-- Asynchronously Load the map API  -->
            var script = document.createElement('script');
            script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBKhmEeCCFWkzxpDjA7QKjDu4zdLLoqYVw&callback=initialize";
            document.body.appendChild(script);
        });
        function initialize() {
            var map;
            var bounds = new google.maps.LatLngBounds();
            var mapOptions = {
                mapTypeId: 'roadmap'
            };

            <!-- Display a map on the page -->
            map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            map.setTilt(45);


            <!-- Display multiple markers on a map -->
            var infoWindow = new google.maps.InfoWindow({
                content: ''
            });

            <!-- Loop through our array of markers & place each one on the map   -->
            for( i = 0; i < locations.length; i++ ) {
                var position = new google.maps.LatLng(locations[i].lat, locations[i].lng);
                bounds.extend(position);
                marker = new google.maps.Marker({
                    position: position,
                    map: map,
                    title: locations[i].title
                });

                <!-- Allow each marker to have an info window     -->
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infoWindow.setContent('<h1>'+locations[i].address+'</h1>');
                        infoWindow.open(map, marker);
                    }
                })(marker, i));
                <!-- Automatically center the map fitting all markers on the screen -->
                map.fitBounds(bounds);
            }
            <!-- Override our map zoom level once our fitBounds function runs (Make sure it only runs once) -->
            var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                this.setZoom(5);
                google.maps.event.removeListener(boundsListener);
            });

        }
    </script>
    <script>
        function getCategoryId(category_id, company_id) {

            $.ajax({
                type: 'GET',
                url: '{{route('get_category_products')}}',
                data: {category_id: category_id, company_id: company_id},
                beforeSend: function (data) {
                    // $("#post-search").html('');
                    // $('.ajax-load').show();

                },
                success: function (data) {
                    // console.log(data.html);
                    // $('.ajax-load').hide();

                    $("#change_products").html("");
                    $("#change_products_horizontal").html("");
                    $("#change_products").append(data.products_vertical);
                    $("#change_products_horizontal").append(data.products_horizontal);
                    $("#category_name").html("");
                    $("#category_name").html(data.category_name);


                },
                error: function (jqXHR, textStatus, errorThrown) {
                    errorFunction();
                }
            });
        }

    </script>
@stop