@extends('layouts.front.app')
@section('meta')
	<title>Engineering Design and Drafting Service | {{ env('APP_NAME') }}</title>
    <meta name="description" content="Providing high-quality workforce and hosted services to Quanta Operating units" />

@stop
@section('css')
<style>
</style>
@endsection
@section('content')
<div class="primary-content position-relative">
            
    <div class="d-none d-md-block fixed bg-light position-fixed my-5 wow fadeInLeft animated"  style="width: 25%; z-index: 3; visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInLeft;" data-wow-duration="1500ms" data-wow-delay="0ms">
        <div class="py-4 px-3 ps-lg-5" style="background: var(--thm-primary);">
            <h3 class="text-white text-uppercase">Services</h3>
        </div>
        <ul class="mx-3 mx-lg-5 widget__links-lis list-unstyled py-5">
            <li class="mb-3">
                <h5 class="">
                    <a class="border-bottom pb-1 link hover-primary active-insidenav" type="button" data-bs-toggle="collapse" data-bs-target="#eddsCollapse" aria-expanded="true" aria-controls="eddsCollapse" href="#"><img src="{{asset('images/cross.png')}}" alt=""> Engineering Design and Drafting Service</a>
                </h5>
                <div class="collapse show" id="eddsCollapse">
                  <div class="card card-body bg-transparent border-0">
                      <ul class="mb-1 widget__links-lis list-unstyled">
                          <li class="mb-3">
                            <h6>
                                {{-- <a href="#" class="modal-btn" data-bs-toggle="modal" data-bs-target="#modal" data-title="{{$item->heading}}" data-description="{{$item->description}}" data-img="{{$item->modal_image}}"> --}}
                                    
                                <a class="border-bottom pb-1 link hover-primary modal-btn" type="button" data-bs-toggle="modal" data-bs-target="#modal" aria-expanded="false" aria-controls="teCollapse" href="#"
                                data-content='
                                <section class="my-5">
                                    <div class="container">
                                        <div class="section-title text-center">
                                            <span class="section-title__tagline">Engineering Design and Drafting Service</span>
                                        </div>
                                        <h2 class="section-title__title text-center mb-5">TELECOMMUNICATION
                                        </h2>
                                        <div class="row">
                                            <div class="col-lg-8 mx-auto">
                                                <p>We offer design and drafting services for Fibre optic cable routing in outside plant from small to large communities for green field and brown.
                                                </p>
                                                <div>
                                                    <ul>
                                                        <li>FIBER TO THE HOME (FTTH)</li>
                                                        <li>PERMITTING</li>
                                                        <li>BASE MAPPING</li>
                                                        <li>LAYOUT OF STRANDS, COAX AND FIBER CABLE</li>
                                                        <li>GPS POINTS</li>
                                                            
                                                        
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                '
                                > <img src="{{asset('images/square.png')}}" > Telecommunication Engineering</a>
                            </h6>
                            {{-- <div class="collapse" id="teCollapse">
                                <div class="card card-body bg-transparent border-0">
                                    <ul class="widget__links-lis list-unstyled">
                                        <li> <a class="border-bottom pb-1" href="#" id="ftth" role="button" data-bs-toggle="modal" data-bs-target="#ftthModal"><img src="{{asset('images/square.png')}}" >  Fiber-To-The-Home (FTTH)  </a> </li>
                                        <li> <a class="border-bottom pb-1" href="#" id="permitting" role="button" data-bs-toggle="modal" data-bs-target="#permittingModal"><img src="{{asset('images/square.png')}}" >  Permitting</a> </li>
                                        <li> <a class="border-bottom pb-1" href="#" id="bs" role="button" data-bs-toggle="modal" data-bs-target="#bsModal"><img src="{{asset('images/square.png')}}" >  Base Mapping</a> </li>
                                        <li> <a class="border-bottom pb-1" href="#" id="layout" role="button" data-bs-toggle="modal" data-bs-target="#layoutModal"><img src="{{asset('images/square.png')}}" >  Layout of Strand, Coax and Fibel Cable</a> </li>
                                        <li> <a class="border-bottom pb-1" href="#" id="gps" role="button" data-bs-toggle="modal" data-bs-target="#gpsModal"><img src="{{asset('images/square.png')}}" >  GPS Points</a> </li>
                                    </ul>
                                </div>
                            </div> --}}
                          </li>
                          <li class="mb-3">
                            <h6>
                                <a class="border-bottom pb-1 link hover-primary modal-btn" type="button" data-bs-toggle="modal" data-bs-target="#modal" aria-expanded="false" aria-controls="teCollapse" href="#"
                                data-content='
                                <section class="my-5">
                                    <div class="container">
                                        <div class="section-title text-center">
                                            <span class="section-title__tagline">Engineering Design and Drafting Service</span>
                                        </div>
                                        <h2 class="section-title__title text-center mb-5">MECHANICAL / PIPING</h2>
                                        <div class="row">
                                            <div class="col-lg-8 mx-auto">
                                                <p>Project development, pipeline route selection and planning, design of oil and gas pipelines and other facilities, general drafting works in 2D and 3D model.</p>
                                                <div>
                                                    <ul>
                                                        <li>OIL AND GAS</li>
                                                        <li>PETROCHEMICAL / CHEMICAL</li>
                                                        <li>REFINERY PLANT</li>
                                                        <li>COMPRESSOR STATIONS</li>
                                                        <li>INDUSTRIAL / STORAGE FACILITIES</li>
                                                        <li>RENEWABLES</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                '
                                > <img src="{{asset('images/square.png')}}" >  Mechanical / Piping Engineering</a>
                            </h6>
                            {{-- <div class="collapse" id="mpeCollapse">
                                <div class="card card-body bg-transparent border-0">
                                    <ul class="widget__links-lis list-unstyled"> 
                                        <li> <a class="border-bottom pb-1" href="#" id="oilGas" role="button" data-bs-toggle="modal" data-bs-target="#oilGasModal"> <img src="{{asset('images/square.png')}}" > Oil and Gas</a> </li>
                                        <li> <a class="border-bottom pb-1" href="#" id="pc" role="button" data-bs-toggle="modal" data-bs-target="#pcModal"> <img src="{{asset('images/square.png')}}" > Petrochemical / Chemical </a> </li>
                                        <li> <a class="border-bottom pb-1" href="#" id="rp" role="button" data-bs-toggle="modal" data-bs-target="#rpModal"> <img src="{{asset('images/square.png')}}" > Refinery Plant </a> </li>
                                        <li> <a class="border-bottom pb-1" href="#" id="cs" role="button" data-bs-toggle="modal" data-bs-target="#csModal"> <img src="{{asset('images/square.png')}}" > Compressor Stations </a> </li>
                                        <li> <a class="border-bottom pb-1" href="#" id="isf" role="button" data-bs-toggle="modal" data-bs-target="#isfModal"> <img src="{{asset('images/square.png')}}" > Industrial / Storage Facilities </a> </li>
                                        <li> <a class="border-bottom pb-1" href="#" id="renewable" role="button" data-bs-toggle="modal" data-bs-target="#renewableModal"> <img src="{{asset('images/square.png')}}" > Renewable </a> </li>
                                    </ul>
                                </div>
                            </div> --}}
                          </li>
                          <li class="mb-3">
                            <h6>
                                <a class="border-bottom pb-1 link hover-primary modal-btn" type="button" data-bs-toggle="modal" data-bs-target="#modal" aria-expanded="false" aria-controls="teCollapse" href="#"
                                data-content='
                                <section class="my-5">
                                    <div class="container">
                                        <div class="section-title text-center">
                                            <span class="section-title__tagline">Engineering Design and Drafting Service</span>
                                        </div>
                                        <h2 class="section-title__title text-center mb-5">ELECTRICAL / INSTRUMENTATION
                                        </h2>
                                        <div class="row">
                                            <div class="col-lg-8 mx-auto">
                                                <p>Drawing preparation of key one-line models, schematic diagrams, termination box and panel, cable tray/conduit routing, schedule of load, cable/wire sizing and creation of Bill of Materials (BOM).
                                                </p>
                                                {{-- <div>
                                                    <ul>
                                                        <li>RENEWABLES</li>
                                                    </ul>
                                                </div> --}}
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                '> <img src="{{asset('images/square.png')}}" >  Electrical / Instrumentation</a>
                            </h6>
                             <div class="collapse" id="wiCollapse">
                                <div class="card card-body bg-transparent border-0">
                                    <ul class="widget__links-lis list-unstyled"> 
                                        <li> <a class="border-bottom" href="#" id="oilGas" role="button" data-bs-toggle="modal" data-bs-target="#oilGasModal">Oil and Gas</a> </li>
                                        <li> <a class="border-bottom" href="#" id="pc" role="button" data-bs-toggle="modal" data-bs-target="#pcModal">Petrochemical / Chemical </a> </li>
                                        <li> <a class="border-bottom" href="#" id="rp" role="button" data-bs-toggle="modal" data-bs-target="#rpModal">Refinery Plant </a> </li>
                                        <li> <a class="border-bottom" href="#" id="cs" role="button" data-bs-toggle="modal" data-bs-target="#csModal">Compressor Stations </a> </li>
                                        <li> <a class="border-bottom" href="#" id="isf" role="button" data-bs-toggle="modal" data-bs-target="#isfModal">Industrial / Storage Facilities </a> </li>
                                        <li> <a class="border-bottom" href="#" id="renewable" role="button" data-bs-toggle="modal" data-bs-target="#renewableModal">Renewable </a> </li>
                                    </ul>
                                </div>
                            </div> 
                          </li>
                          <li class="mb-3">
                            <h6>
                                <a class="border-bottom pb-1 link hover-primary modal-btn" type="button" data-bs-toggle="modal" data-bs-target="#modal" aria-expanded="false" aria-controls="teCollapse" href="#"
                                data-content='
                                <section class="my-5">
                                    <div class="container">
                                        <div class="section-title text-center">
                                            <span class="section-title__tagline">Engineering Design and Drafting Service</span>
                                        </div>
                                        <h2 class="section-title__title text-center mb-5">RENEWABLES</h2>
                                        <div class="row">
                                            <div class="col-lg-8 mx-auto">
                                                <p>Process of designing of solar power system, grid tie and off-grid configuration, evaluation of property for solar PV system, and calculation of ROI.
                                                </p>
                                                {{-- <div>
                                                    <ul>
                                                        <li>RENEWABLES</li>
                                                    </ul>
                                                </div> --}}
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                '> <img src="{{asset('images/square.png')}}" >  Renewables</a>
                            </h6>
                             <div class="collapse" id="sdCollapse">
                                <div class="card card-body bg-transparent border-0">
                                    <ul class="widget__links-lis list-unstyled"> 
                                        <li> <a class="border-bottom" href="#" id="oilGas" role="button" data-bs-toggle="modal" data-bs-target="#oilGasModal">Oil and Gas</a> </li>
                                        <li> <a class="border-bottom" href="#" id="pc" role="button" data-bs-toggle="modal" data-bs-target="#pcModal">Petrochemical / Chemical </a> </li>
                                        <li> <a class="border-bottom" href="#" id="rp" role="button" data-bs-toggle="modal" data-bs-target="#rpModal">Refinery Plant </a> </li>
                                        <li> <a class="border-bottom" href="#" id="cs" role="button" data-bs-toggle="modal" data-bs-target="#csModal">Compressor Stations </a> </li>
                                        <li> <a class="border-bottom" href="#" id="isf" role="button" data-bs-toggle="modal" data-bs-target="#isfModal">Industrial / Storage Facilities </a> </li>
                                        <li> <a class="border-bottom" href="#" id="renewable" role="button" data-bs-toggle="modal" data-bs-target="#renewableModal">Renewable </a> </li>
                                    </ul>
                                </div>
                            </div> 
                          </li>
                      </ul>
                  </div>
                </div>
            </li>
            <li class="mb-3">
                <h5 class="">
                    <a class="border-bottom pb-1 link hover-primary" href="{{url('services/information-technology')}}"><img src="{{asset('images/cross.png')}}" > Information Technology</a>
                </h5>
                
            </li>
            <li class="mb-3">
                <h5 class="">
                    <a class="border-bottom pb-1 link hover-primary" href="{{url('services/others')}}"><img src="{{asset('images/cross.png')}}" > Others</a>
                </h5>
                
            </li>
        </ul>
    </div>

    <!--Page Header Start-->
    <section class="page-header" style="background-position:center; background-size: cover; background-image: url({{asset('/images/backgrounds/eng-banner.jpg')}});">

        <div class="container">
            <div class="offset-md-3 page-header__inner">
                {{-- <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="index.html">Home</a></li>
                    <li><span>/</span></li>
                    <li>services</li>
                </ul> --}}
                <!--<h2 class="text-uppercase text-website-secondary">Engineering Design and Drafting Service</h2>-->
            </div>
        </div>
    </section>
    <!--Page Header End-->
    
    <section class="services-one services-page">
        <div class="container">
            <div class="row">
                <div class="col offset-md-3">
                    <div class="section-title text-start">
                        {{-- <span class="section-title__tagline">Services</span> --}}
                        <p>Quanta Philippines ROHQ is here to support and assist you in any stage of your business process. And by partnering with us, your company will assuredly reduce significant costs and increase profits without compromising quality.
                        </p>
                    </div>
                    {{-- <h2 class="section-title__title text-start mb-5">Engineering Design and Drafting Services</h2> --}}
                    {{-- <div class="row">
                        <div class="col-xl-6 col-lg-6 wow fadeInLeft animated" data-wow-duration="1500ms" data-wow-delay="0ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInLeft;">
    
                            <div class="services-one__single">
                                <div class="services-one__img">
                                    <img src="{{asset('/images/resources/services-one-img-1.jpg')}}" alt="">
                                    <div class="services-one__icon">
                                        <span class="icon-industrial"></span>
                                    </div>
                                </div>
                                <div class="services-one__content">
                                    <h3 class="services-one__title"><a href="telecomunication-engineering.html">Telecommunication Engineering</a>
                                    </h3>
                                    <p class="services-one__text">Fibre optic cable routing in outside plant from small to large communities for green field and brown.</p>
                                    <ul class="widget__links-lis list-unstyled">
                                        <li> <a class="border-bottom" href="#" id="ftth" role="button" data-bs-toggle="modal" data-bs-target="#ftthModal">Fiber-To-The-Home (FTTH)  </a> </li>
                                        <li> <a class="border-bottom" href="#" id="permitting" role="button" data-bs-toggle="modal" data-bs-target="#permittingModal">Permitting</a> </li>
                                        <li> <a class="border-bottom" href="#" id="bs" role="button" data-bs-toggle="modal" data-bs-target="#bsModal">Base Mapping</a> </li>
                                        <li> <a class="border-bottom" href="#" id="layout" role="button" data-bs-toggle="modal" data-bs-target="#layoutModal">Layout of Strand, Coax and Fibel Cable</a> </li>
                                        <li> <a class="border-bottom" href="#" id="gps" role="button" data-bs-toggle="modal" data-bs-target="#gpsModal">GPS Points</a> </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 wow fadeInDown animated" data-wow-duration="1500ms" data-wow-delay="100ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 100ms; animation-name: fadeInDown;">
    
                            <div class="services-one__single">
                                <div class="services-one__img">
                                    <img src="{{asset('/images/resources/services-one-img-2.jpg')}}" alt="">
                                    <div class="services-one__icon">
                                        <span class="icon-petroleum"></span>
                                    </div>
                                </div>
                                <div class="services-one__content">
                                    <h3 class="services-one__title"><a href="petrolium-gas.html">Mechanical / Piping Engineering</a>
                                    </h3>
                                    <p class="services-one__text">Project development, pipeline route selection and planning, design of oil and gas pipelines and other facilities, general drafting works in 2D and 3D model.</p>
                                    <ul class="widget__links-lis list-unstyled"> 
                                        <li> <a class="border-bottom" href="#" id="oilGas" role="button" data-bs-toggle="modal" data-bs-target="#oilGasModal">Oil and Gas</a> </li>
                                        <li> <a class="border-bottom" href="#" id="pc" role="button" data-bs-toggle="modal" data-bs-target="#pcModal">Petrochemical / Chemical </a> </li>
                                        <li> <a class="border-bottom" href="#" id="rp" role="button" data-bs-toggle="modal" data-bs-target="#rpModal">Refinery Plant </a> </li>
                                        <li> <a class="border-bottom" href="#" id="cs" role="button" data-bs-toggle="modal" data-bs-target="#csModal">Compressor Stations </a> </li>
                                        <li> <a class="border-bottom" href="#" id="isf" role="button" data-bs-toggle="modal" data-bs-target="#isfModal">Industrial / Storage Facilities </a> </li>
                                        <li> <a class="border-bottom" href="#" id="renewable" role="button" data-bs-toggle="modal" data-bs-target="#renewableModal">Renewable </a> </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 wow fadeInRight animated" data-wow-duration="1500ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInRight;">
    
                            <div class="services-one__single">
                                <div class="services-one__img">
                                    <img src="{{asset('/images/resources/services-one-img-3.jpg')}}" alt="">
                                    <div class="services-one__icon">
                                        <span class="icon-engineering"></span>
                                    </div>
                                </div>
                                <div class="services-one__content">
                                    <h3 class="services-one__title"><a href="#">Electrical / Instrumentation</a></h3>
                                    <p class="services-one__text">Drawing preparation of key one-line models, schematic diagrams, termination box and panel, cable tray/conduit routing, schedule of load, cable/wire sizing and creation of BOM.</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-6 wow fadeInRight animate" data-wow-duration="1500ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInRight;">
    
                            <div class="services-one__single">
                                <div class="services-one__img">
                                    <img src="{{asset('/images/resources/services-one-img-4.jpg')}}" alt="">
                                    <div class="services-one__icon">
                                        <span class="icon-engineering"></span>
                                    </div>
                                </div>
                                <div class="services-one__content">
                                    <h3 class="services-one__title"><a href="#">Solar Design</a></h3>
                                    <p class="services-one__text">Process of designing of solar power system, grid tie and off-grid configuration, evaluation of property for solar PV system, and calculation of ROI.</p>
                                    
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-xl-6 col-lg-6 wow fadeInRight animate" data-wow-duration="1500ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInRight;">
    
                            <div class="services-one__single">
                                <div class="services-one__img">
                                    <img src="{{asset('/images/resources/services-one-img-5.jpg')}}" alt="">
                                    <div class="services-one__icon">
                                        <span class="icon-engineering"></span>
                                    </div>
                                </div>
                                <div class="services-one__content">
                                    <h3 class="services-one__title"><a href="#">Information Technology</a></h3>
                                    <p class="services-one__text">
                                        <ul>
                                            <li>I.T Service Helpdesk</li>
                                            <li>I.T. Compliance</li>
                                            <li>I.T. Security</li>
                                            <li>Software Development</li>
                                            <li>Back Office Support (Finance and Admin)</li>
                                        </ul>
                                        </p>
                                    
                                </div>
                            </div>
                        </div>
                        
                            <div class="col-xl-6 col-lg-6 wow fadeInRight animate" data-wow-duration="1500ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInRight;">
    
                            <div class="services-one__single">
                                <div class="services-one__img">
                                    <img src="{{asset('/images/resources/services-one-img-6.jpg')}}" alt="">
                                    <div class="services-one__icon">
                                        <span class="icon-engineering"></span>
                                    </div>
                                </div>
                                <div class="services-one__content">
                                    <h3 class="services-one__title"><a href="#">Other Services</a></h3>
                                    <p class="services-one__text">
                                        <ul>
                                            <li>Labor Recruitment</li>
                                            <li>Journey Lineman</li>
                                            <li>Safety Consultation</li>
                                            <li>Project Management</li>
                                            <li>Back Office Support (Finance and Admin)</li>
                                        </ul>
                                        </p>
                                    
                                </div>
                            </div>
                        </div>
    
                    </div> --}}
    
                </div>
            </div>
        </div>
    </section>
    <!--Services One End-->
</div>

<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modal" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content rounded-0">
            <div class="modal-header border-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="content">

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

@endsection

@section('js')
    <script>
        $('.modal-btn').click(function() {
            // alert()
            // console.log($(this))
            // $("#title").text($(this).data( "title" ))
            $("#content").html($(this).data("content"))
            // $("#img").attr('src', 'uploads/trusted-providers/'+ $(this).data( "img" ) )
        });

    </script>
@endsection