@extends('v2.layout.apps')

@section('content')
<div class="clearfix mt-5"></div>
<div class="row pl-5 pr-5">
    <div class="col-md-3">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <div class="nav-link card accordion bg-salutica" id="assembly-accordion">
                <a class="text-white text-decoration-none" type="button" data-toggle="collapse" data-target="#assembly" aria-expanded="true" aria-controls="assembly">
                    Assembly<i class="fas fa-chevron-down float-right pt-1"></i>
                </a>
            </div>
            <div id="assembly" class="collapse" aria-labelledby="assembly" data-parent="#assembly-accordion">
                <a class="nav-link card bg-light text-dark" href="/assembly">&nbsp;&nbsp;Product Assembly</a>
                <a class="nav-link card bg-light text-dark" href="/pcba">&nbsp;&nbsp;PCBA</a>
            </div>
            <a class="nav-link card text-white bg-salutica" href="/design">Design</a>
            <div class="nav-link card accordion bg-info" id="engineering-accordion">
                <a class="text-white text-decoration-none" type="button" data-toggle="collapse" data-target="#engineering-plastic" aria-expanded="true" aria-controls="engineering-plastic">
                    Engineering Plastics<i class="fas fa-chevron-down float-right pt-1"></i>
                </a>
            </div>
            <div id="engineering-plastic" class="collapse" aria-labelledby="engineering-plastic" data-parent="#engineering-accordion">
                <a class="nav-link card bg-light text-dark" href="/engineering-plastics">&nbsp;&nbsp;Precision Plastic Injection</a>
                <a class="nav-link card bg-light text-dark" href="/tooling">&nbsp;&nbsp;Tooling</a>
            </div>
            <div class="nav-link card accordion bg-salutica" id="quality-accordion">
                <a class="text-white text-decoration-none" type="button" data-toggle="collapse" data-target="#quality-assurance" aria-expanded="true" aria-controls="quality-assurance">
                    Quality Assurance<i class="fas fa-chevron-down float-right pt-1"></i>
                </a>
            </div>
            <div id="quality-assurance" class="collapse" aria-labelledby="quality-assurance" data-parent="#quality-accordion">
                <a class="nav-link card bg-light text-dark" href="/product-reliability">&nbsp;&nbsp;Product Reliability</a>
                <a class="nav-link card bg-light text-dark" href="/quality-assurance">&nbsp;&nbsp;Quality System</a>
            </div>
            <div class="nav-link card accordion bg-salutica" id="supply-accordion">
                <a class="text-white text-decoration-none" type="button" data-toggle="collapse" data-target="#supply-chain" aria-expanded="true" aria-controls="supply-chain">
                    Supply Chain Management<i class="fas fa-chevron-up float-right pt-1"></i>
                </a>
            </div>
            <div id="supply-chain" class="collapse show" aria-labelledby="supply-chain" data-parent="#supply-accordion">
                <a class="nav-link card bg-light text-dark" href="/supply-chain-management">&nbsp;&nbsp;Material Planning</a>
                <a class="nav-link card bg-secondary text-white" href="/sourcing">&nbsp;&nbsp;Sourcing</a>
            </div>
            <a class="nav-link card text-white bg-salutica" href="/surface-treatment">Surface Treatment</a>
            <div class="nav-link card accordion bg-salutica" id="technology-accordion">
                <a class="text-white text-decoration-none" type="button" data-toggle="collapse" data-target="#technology" aria-expanded="true" aria-controls="technology">
                    Technology<i class="fas fa-chevron-down float-right pt-1"></i>
                </a>
            </div>
            <div id="technology" class="collapse" aria-labelledby="technology" data-parent="#technology-accordion">
                <a class="nav-link card bg-light text-dark" href="/technology">&nbsp;&nbsp;Bluetooth Solutions</a>
                <a class="nav-link card bg-light text-dark" href="/optical-touch-system">&nbsp;&nbsp;Optical Touch System</a>
                <a class="nav-link card bg-light text-dark" href="/patent-pending-technology">&nbsp;&nbsp;Patent Pending Technologies</a>
            </div>
        </div>
    </div>
    <div class="col-md-9 border-left">
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                  <img src="/images/sourcing_550ffb12edd9b_555d56f9a8ac8.jpg" class="d-block w-100" alt="design-1">
              </div>
            </div>
        </div>
        <div class='clearfix'></div>
        <p class="mt-4">
            We have extensive sourcing network for:<br><br>
            • Electronics Components<br>
            • Engineering Resins<br>
            • Metal parts<br>
            • Mechanical components<br>
            • Batteries, Packaging<br>
        </p>
    </div>
</div>
<div class='clearfix mb-5'></div>
@endsection

@section('script')
<script>
    $(document).ready(function(){
        $(".accordion").click(function(){
            let children = $(this).children()[0].children;
            if($(children).hasClass('fa-chevron-up')){
                $(children).removeClass('fa-chevron-up').addClass('fa-chevron-down');
            }else{
                $(children).removeClass('fa-chevron-down').addClass('fa-chevron-up');
            }
        })
    })
</script>
@endsection