@extends('layouts.front.front')

@section('title', 'About Us | Apsys Network')

{{-- main content --}}

@section('content')



<main id="static">

    <section class="common-banner-wrapper" style="background-image: url('assets/images/page-banners/about-page-header-bg-image.webp');">

        <div class="container text-center py-5 my-sm-5">
            <div class="py-lg-5"> 
                <h1 class="h1 mb-2 text-white p-0" data-aos="fade-up" data-aos-delay="600">About Us</h1>
    
                <h2 class="color-white h2 opacity-75" data-aos="fade-up" data-aos-delay="600">Connecting To the world</h2>
            </div>

        </div>

    </section>







   <!--breacrumb-->

    <div class="container">

        <nav aria-label="breadcrumb" data-aos="fade-right" data-aos-delay="600">

            <ol class="breadcrumb">

                <li class="breadcrumb-item">

                    <a href="{{route("home")}}">

                        <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>

                    </a>

                </li>

                <li class="breadcrumb-item active" aria-current="page">about us</li>

            </ol>

        </nav>

        <div class="mobile--breadcrumbs">

            <a href="{{route("home")}}" class="back">

                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>

            </a>

            <a href="{{route("about")}}" class="page">about us</a>

        </div>

    </div>







    <section class="company-moto-wrapper">

        <div class="container">



            <div class="our-history-wrap">

                <div class="text-center">

                    <h1 data-aos="fade-up">Our <span>History</span></h1>

                    <p class="mb-4 col-lg-10 mx-auto">

                        {{$about->history->title}}

                    </p>

                </div>



                <div class="our-history-inner bg-white">

                    <div class="row g-2">

                        <div class="col-lg-6 order-lg-2">

                            <img src="./assets/images/company_moto/our_history.jpg" alt="banner-image" class="img-fluid h-100" data-aos="fade-right" data-aos-delay="500">

                        </div>

                        <div class="col-lg-6 order-lg-1">
                            <div class="" style="background-color: #ca2b37;">
                        
                                <div class="content about-cont" data-aos="fade-left">

                                    {!! html_entity_decode($about->history->description) !!}

                                </div>
                            </div>

                        </div>

                    </div>

                </div>

                <p class="mt-5 fw-medium" data-aos="fade-up">

                    {!! html_entity_decode($about->history->footer) !!}

                </p>

            </div>



            <!--video wrappr-->

            <div class="pb-3">

                <div class="col-lg-8 mx-auto">

                    <div class="video__wrapper position-relative overflow-hidden">

                        <img src="{{ asset('assets/images/video-intro-thumbnail.webp') }}" class="img-fluid rounded border border-dark" alt="video-banner-image">
 
                        <button type="button" class="btn p-0 bg-white position-center" data-bs-toggle="modal" data-bs-target="#videoModal"> 
                            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="red" class="bi bi-youtube" viewBox="0 0 16 16">
                            <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
                            </svg>
                        </button>

                    </div>

                </div>

            </div>
 

            <!-- Modal -->
            <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-center" style="max-width:1200px;">
                    <div class="modal-content"> 
                        <div class="modal-body p-0 position-relative">
                            <button type="button" class="btn-close p-3 rounded-circle bg-white position-absolute opacity-100" style="top: -.5rem;right: -.5rem;z-index: 99;box-shadow: 0 2px 3px rgba(0,0,0,0.5);" data-bs-dismiss="modal" aria-label="Close"></button> 
                             
                            <div class="video">
                                <iframe id="videoIframe" width="994" height="559" src="" title="Apsys Networks Connecting to the world" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                            </div>
                        </div> 
                    </div>
                </div>
            </div>

            <script>
                const myModal = document.getElementById('videoModal');
                const iframe = document.getElementById('videoIframe');                   
                myModal.addEventListener('shown.bs.modal', () => {
                    iframe.setAttribute('src', 'https://www.youtube.com/embed/lLwm3RsLpa4?autoplay=1');
                })
                myModal.addEventListener('hidden.bs.modal', () => {
                    iframe.setAttribute('src', '');
                })
            </script>                        




            <div class=" mt-5 scroller">

                <div class="row g-3 text-dark">

                    <div class="col-lg-4 col-md-6 d-flex flex-column text-center">

                        <h3 class="primary-color header mb-3">Mission</h3>
                        <div class="card p-4 rounded-0 text-center w-100 border-dark"> 
                            <p style="font-size:.937rem;height: 13rem;overflow-y: auto;">{!! html_entity_decode($about->mission) !!}</p>

                            <!-- <a href="#" class="primary-color link">Read more <br> <i class="fa fa-sort-down"></i></a> -->

                        </div>

                    </div>

                    <div class="col-lg-4 col-md-6 d-flex flex-column text-center">

                        <h3 class="primary-color header mb-3">Vision</h3>
                        <div class="card p-4 rounded-0 text-center w-100 border-dark">
 
                            <p style="font-size:.937rem;height: 13rem;overflow-y: auto;">{!! html_entity_decode($about->vision) !!}</p>

                            <!-- <a href="#" class="primary-color link">Read more <br> <i class="fa fa-sort-down"></i></a> -->

                        </div>

                    </div>

                    <div class="col-lg-4 col-md-6 d-flex flex-column text-center">

                        <h3 class="primary-color header mb-3">Value</h3>
                        <div class="card p-4 rounded-0 text-center w-100 border-dark"> 
                            <p style="font-size:.937rem;height: 13rem;overflow-y: auto;">{!! html_entity_decode($about->value) !!}</p>

                            <!-- <a href="#" class="primary-color link">Read more <br> <i class="fa fa-sort-down"></i></a> -->

                        </div>

                    </div>

                </div>

            </div>


<!-- 
            <div class="my-5">

                <h4 class="h2 primary-color mt-lg-5">Compliance & Certififactes</h4>

                <div class="mt-4 text-start">

                    <img src="./assets/images/company_moto/bicsi.webp" alt="image" class="img-fluid m-1" style="max-height: 2.75rem;width: auto;">

                    <img src="./assets/images/company_moto/ul.webp" alt="image" class="img-fluid m-1" style="max-height: 2.75rem;width: auto;">

                    <img src="./assets/images/company_moto/ce.webp" alt="image" class="img-fluid m-1" style="max-height: 2.75rem;width: auto;">

                    <img src="./assets/images/company_moto/rohs.webp" alt="image" class="img-fluid m-1" style="max-height: 2.75rem;width: auto;">

                    <img src="./assets/images/company_moto/intertek.webp" alt="image" class="img-fluid m-1" style="max-height: 2.75rem;width: auto;">

                </div>
                

            </div> -->

            



            <div class="our-history-wrap">

                

                <!--<div class="our-history-inner our-history-inverse mt-4 mt-md-5">-->

                <!--    <div class="row g-4 gx-lg-5 align-items-center"> -->

                <!--        <div class="col-lg-6 order-lg-2" data-aos="fade-up-right">-->

                <!--            <img src="./assets/images/company_moto/Structured-cabling.webp" alt="image" class="img-fluid h-100">-->

                <!--        </div>-->

                <!--        <div class="col-lg-6 order-lg-1">-->

                <!--            <h2 class="mb-3">Structured Cabling</h2>-->

                <!--            <p style="color: #747474;">Structured cabling solutions are well-known and fully certified solutions to meet-->

                <!--                specific requirements.Designed with assistance from network planners and-->

                <!--                installers,Apsys Networks guarantees ease of installation and the highest-->

                <!--                performance. Exceeding Standards, fulfilling highest requirements and ensuring-->

                <!--                warranty system for at least 25 years - these are the main goals, which we have-->

                <!--                in mind when designing our products. Undoubtedly, our dynamically developing-->

                <!--                R&D department and well-equipped laboratory are involved in a wide range of-->

                <!--                activities to achieve our aims and provide the best parameters.</p> -->

                             

                <!--        </div>-->

                <!--    </div>-->

                <!--</div>-->

                <!--<div class="our-history-inner our-history-inverse mt-4 mt-md-5">-->

                <!--    <div class="row g-4 gx-lg-5 align-items-center"> -->

                <!--        <div class="col-lg-6" data-aos="fade-up-right">-->

                <!--            <img src="./assets/images/company_moto/knowledge.webp" alt="image" class="img-fluid h-100">-->

                <!--        </div>-->

                <!--        <div class="col-lg-6">-->

                <!--            <h2 class="mb-3">Knowledge</h2>-->

                <!--            <p style="color: #747474;">-->

                <!--                Experienced employees in R&D, Structured Cabling Department and other department-->

                <!--                form a team of experts who are ready to take up any challenge.Having one of the best--->

                <!--                equipped laboratories in Europe, we are able to test our systems operation in different-->

                <!--                conditions. The appropriate choice of materials used for production of individual-->

                <!--                components ensure the best system’s transmission parameters and its operation-->

                <!--                during for at least 20 years.Our professional job attitude as well as commitment and-->

                <!--                highly qualified workers enable us to achieve the highest goals and ambitions,-->

                <!--                amongst others,being a world known leader in the telecommunications industry.-->

                <!--            </p>  -->

                <!--        </div>-->

                <!--    </div>-->

                <!--</div>-->

                <div class="our-history-inner our-history-inverse mt-5 pt-md-5">
                    <div class="text-center mb-5"> 
                        <h2 class="h1 d-inline-block text-center border-bottom pb-2">Research and Development</h2>
                    </div>
                   <div class="row g-3"> 

                       <div class="col-lg-6" data-aos="fade-up-right">

                           <img src="./assets/images/company_moto/research-and-development.webp" alt="image" class="img-fluid h-100">

                       </div>

                       <div class="col-lg-6 d-flex">

                           <div class="h-100 p-3 p-sm-4 border w-100 d-flex align-items-center" style="border-color: #757575 !important;" data-aos="fade-up-left" data-aos-delay="500">

                               

                               <p class="w-100">{!! html_entity_decode($about->research_and_dev) !!}</p>

                                 

                           </div>

                       </div>

                   </div>

               </div>

            </div>





            <div class="pb-3 pt-4 pt-md-5">

                <h2 class="h1 primary-color d-inline-block border-bottom pb-2" data-aos="fade-left">Quality Commitment</h2>

                <h3 class="text-dark mt-4">Quality at every stage of the production cycle</h3>

                <p class="text-dark fw-light" data-aos="fade-left">{{$about->quality_commitment->description}}</p>

 

                <div class="accordion accordion-flush quality__accordion" id="accordionFlushDetail" data-aos="fade-up" 
                    style="
                    --plus: url({{ asset('assets/images/icons/plus.svg') }});
                    --minus: url({{ asset('assets/images/icons/minus.svg') }});
                    "
                >

                @if(count($about->quality_commitment->items) > 0)

                @foreach($about->quality_commitment->items as $key => $item)

                    <div class="collapse__item border-bottom"> 

                        <h3> 

                            <a class="accordion-button collapsed px-0 bg-transparent" data-bs-toggle="collapse" href="#collapseItem{{$key}}" role="button" aria-expanded="false" aria-controls="collapseItem{{$key}}">

                                {{$item->title}}

                            </a>  

                        </h3>

                        <div class="collapse" id="collapseItem{{$key}}">

                            <div class="pb-3 pt-1">
                                {!! html_entity_decode($item->description) !!}
                            <!-- {{$item->description}} -->

                            </div>

                        </div>

                    </div>

                

                @endforeach

                @endif

                <!---->

                {{-- 

                    <div class="accordion-item">

                    <h2 class="accordion-header" id="flush-heading{{$key}}">

                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-heading{{$key}}" aria-expanded="false" aria-controls="flush-collapse{{$key}}">

                            {{$item->title}}

                          </button>

                    </h2>

                    <div id="flush-collapse{{$key}}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{$key}}" data-bs-parent="#accordionFlushDetail">

                        <div class="accordion-body p-2">

                            {{$item->description}}

                        </div>

                    </div>

                </div>

                    --}}

                    

                    
 
 

            </div><!--.//accordion-->







            



        </div>

    </section>





</main>





@endsection