@extends('layouts.front.app')
@section('meta')
	<title>Branches | {{ env('APP_NAME') }}</title>
@endsection

@section('css')
    <style>
        #owl.owl-carousel .owl-nav {
            text-align: center;
            position: absolute;
            top: 50%;
            width: 100%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
        }
        #owl.owl-carousel .owl-nav button.owl-prev,
        #owl.owl-carousel .owl-nav button.owl-next {
            color: gray;
            border: #fff solid 1px;
            border-radius: 50%;
            height: 40px;
            width: 40px;
            background-color: #f7f9fc5c;
            margin: 0 5px;
        }
        #owl.owl-carousel .owl-nav button i{
            display: flex!important;
            justify-content: center!important;
            color: #fff;
        }

        .hp:hover{
            font-weight: bold;
            color: #185691  !important;
            background-color: unset !important;
            border-left: #208de8 solid 7px !important;
        }

        .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
            font-weight: bold;
            color: #185691  !important;
            background-color: unset !important;
            border-left: #208de8 solid 7px !important;
        }


		@media (max-width: 767.98px) {
			.border-end{
				border: unset !important;
			}
		}

    </style>
@endsection

@section('content')

<div class="py-5" style="background-image: url('{{asset('images/banners/banner.jpg')}}'); background-repeat: no-repeat; background-size: cover; background-position-y: top;">
    <div class="container py-sm-5 py-0">
        <div class="row py-5">
            <div class="col text-center">
                <h1 class="text-white text-uppercase ">Our Branches</h1>
                <p class="text-white">Home / Our Branches</p>
            </div>
        </div>
    </div>
</div>

<div class="container" style="transform: translateY(-100px);">
    <div class="row">
        <div class="col-lg-10 bg-white shadow-lg mx-auto">
            <div class="row py-5 ps-3">
                <div class="col-lg-4">
                    <div class="mb-5">
                        <h3 class="fw-bolder text-secondary ">Branch Offices & Service Centers</h3>
                        <div class="line-6-50 bg-secondary"></div>
                    </div>
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs flex-column nav-pills border-0" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                        <button class="mb-1 text-black border-bottom hp nav-link w-100 text-start active d-flex justify-content-between" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                           <span>Davao City - Head Office</span>  <i class="fa fa-arrow-right" aria-hidden="true"></i>
                        </button>
                        
                        </li>
                        <li class="nav-item" role="presentation">
                        <button class="mb-1 text-black border-bottom hp nav-link w-100 text-start  d-flex justify-content-between" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                           <span>Cagayan De Oro</span>  <i class="fa fa-arrow-right" aria-hidden="true"></i>
                        </button>
                        </li>
                        <li class="nav-item" role="presentation">
                        <button class="mb-1 text-black border-bottom hp nav-link w-100 text-start  d-flex justify-content-between" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">
                           <span>Bukidnon</span>  <i class="fa fa-arrow-right" aria-hidden="true"></i>
                        </button>
                        </li>
                        <li class="nav-item" role="presentation">
                        <button class="mb-1 text-black border-bottom hp nav-link w-100 text-start  d-flex justify-content-between" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">
                           <span>Butuan City</span>  <i class="fa fa-arrow-right" aria-hidden="true"></i>
                        </button>
                        </li>
                    </ul>

                </div>
                <div class="col-lg-8">
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane fade active show position-relative" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                            <div class="postion-absolute">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d651.1527026909616!2d125.60304127617462!3d7.0946929939349985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x32f96d0211598d9f%3A0x63e6a4aeb6489866!2sSerbis%20King!5e0!3m2!1sen!2sph!4v1661240890858!5m2!1sen!2sph" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                            <div class="position-absolute w-75 end-50 shadow-lg" style="transform: translate(50%, -190px);">
                                <div class="bg-white p-3">
                                    <div class="mb-2">
                                        <h5 class="fw-bolder text-secondary ">Davao City - Head Office</h4>
                                        <div class="line-6-50 bg-secondary"></div>
                                    </div>
                                    <div class="d-none d-xl-block">
                                        <ul class="list-unstyled">
                                            <li class="d-flex">
                                                <div class="me-2">
                                                    <img style="width: 15px;" src="{{asset('images/services/globe.png')}}" alt=""> 
                                                </div>
                                                <p class="mb-0"><a href="#" class="text-decoration-none text-black">Door#3 FAB Bldg F.S. Dizon Road Bacaca, Davao City</a></p>
                                            </li>
                                            <li class="d-flex">
                                                <div class="me-2">
                                                    <img style="width: 15px;" src="{{asset('images/services/phone.png')}}" alt=""> 
                                                </div>
                                                <p class="mb-0">(082) 226-8665 | 0933 850 2082</p>
                                            </li>
                                            <li class="d-flex">
                                                <div class="me-2">
                                                    <img style="width: 15px;" src="{{asset('images/services/email.png')}}" alt=""> 
                                                </div>
                                                <p class="mb-0">service@serbisking.ph</p>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade position-relative" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">

                            <div class="postion-absolute">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d493.27222751882636!2d124.6659686!3d8.4820843!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x32fff33b94b59cd1%3A0x9b40b53603fe80de!2s9497%20Business%20Ventures%20Corporation!5e0!3m2!1sen!2sph!4v1661236064437!5m2!1sen!2sph" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                            <div class="position-absolute w-75 end-50 shadow-lg" style="transform: translate(50%, -190px);">
                                <div class="bg-white p-3">
                                    <div class="mb-2">
                                        <h5 class="fw-bolder text-secondary ">Cagayan De Oro - Branch Office</h4>
                                        <div class="line-6-50 bg-secondary"></div>
                                    </div>
                                    <div class="d-none d-xl-block">
                                        <ul class="list-unstyled">
                                            <li class="d-flex">
                                                <div class="me-2">
                                                    <img style="width: 15px;" src="{{asset('images/services/globe.png')}}" alt=""> 
                                                </div>
                                                <p class="mb-0"><a href="#" class="text-decoration-none text-black">#73 Tantoy Bldg. Lapasan, Cagayan De Oro City</a></p>
                                            </li>
                                            <li class="d-flex">
                                                <div class="me-2">
                                                    <img style="width: 15px;" src="{{asset('images/services/phone.png')}}" alt=""> 
                                                </div>
                                                <p class="mb-0">(088) 323 1474 | 09459722190 09338143753>
                                            </li>
                                            <li class="d-flex">
                                                <div class="me-2">
                                                    <img style="width: 15px;" src="{{asset('images/services/email.png')}}" alt=""> 
                                                </div>
                                                
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            

                        </div>
                        <div class="tab-pane fade position-relative" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">
                            <div class="postion-absolute">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d987.9184914771741!2d125.09617762916501!3d7.929080299643031!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x32ff1bb97910000f%3A0xe7eaeb80ba287c47!2sDacayana%20Building%2C%20G%2FF%20Dacayana%20Bldg%2C%20Hagkol%2C%20Sayre%20Hwy%2C%20Valencia%2C%20Bukidnon!5e0!3m2!1sen!2sph!4v1661236112777!5m2!1sen!2sph" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                            <div class="position-absolute w-75 end-50 shadow-lg" style="transform: translate(50%, -190px);">
                                <div class="bg-white p-3">
                                    <div class="mb-2">
                                        <h5 class="fw-bolder text-secondary ">Bukidnon - Branch Office</h4>
                                        <div class="line-6-50 bg-secondary"></div>
                                    </div>
                                    <div class="d-none d-xl-block">
                                        <ul class="list-unstyled">
                                            <li class="d-flex">
                                                <div class="me-2">
                                                    <img style="width: 15px;" src="{{asset('images/services/globe.png')}}" alt=""> 
                                                </div>
                                                <p class="mb-0"><a href="#" class="text-decoration-none text-black">Sayre H-Way, Barangay Hagkol, Valencia City, Bukidnon</a></p>
                                            </li>
                                            <li class="d-flex">
                                                <div class="me-2">
                                                    <img style="width: 15px;" src="{{asset('images/services/phone.png')}}" alt=""> 
                                                </div>
                                                <p class="mb-0">(088) 828 7281 | 09564656431 09338143743</p>
                                            </li>
                                            <li class="d-flex">
                                                <div class="me-2">
                                                    <img style="width: 15px;" src="{{asset('images/services/email.png')}}" alt=""> 
                                                </div>
                                                
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade position-relative" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">
                            <div class="postion-absolute">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3941.31600249458!2d125.51038210000002!3d8.943000600000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3301c0e4a8a9664f%3A0x63f18c519d5aaaa8!2s9497%20Business%20Ventures%20Corp.!5e0!3m2!1sen!2sph!4v1661236152471!5m2!1sen!2sph" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                            <div class="position-absolute w-75 end-50 shadow-lg" style="transform: translate(50%, -190px);">
                                <div class="bg-white p-3">
                                    <div class="mb-2">
                                        <h5 class="fw-bolder text-secondary ">Bacolod City - Branch Office</h4>
                                        <div class="line-6-50 bg-secondary"></div>
                                    </div>
                                    <div class="d-none d-xl-block">
                                        <ul class="list-unstyled">
                                            <li class="d-flex">
                                                <div class="me-2">
                                                    <img style="width: 15px;" src="{{asset('images/services/globe.png')}}" alt=""> 
                                                </div>
                                                <p class="mb-0"><a href="#" class="text-decoration-none text-black">Door 2, Tan Bldg. KM 4, JC Aquino Avenue, Libertad, Butuan City</a></p>
                                            </li>
                                            <li class="d-flex">
                                                <div class="me-2">
                                                    <img style="width: 15px;" src="{{asset('images/services/phone.png')}}" alt=""> 
                                                </div>
                                                <p class="mb-0">09338523394 | 09177709018</p>
                                            </li>
                                            <li class="d-flex">
                                                <div class="me-2">
                                                    <img style="width: 15px;" src="{{asset('images/services/email.png')}}" alt=""> 
                                                </div>
                                                
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

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

@include('include.testimonial')
@include('layouts.front.contact-footer')

@endsection

@section('js')
	<script>
		//Gets the video src from the data-src on each button    
        // let $videoSrc;  
        // $('.play-btn').click(function() {
        // 	$videoSrc = $(this).data( "src" );      
        // });
        // //console.log($videoSrc);  
        // // when the modal is opened autoplay it  
        // $('#modalVideo').on('shown.bs.modal', function (e) {
        // 	// set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
        // 	$("#iframe").attr('src',$videoSrc + "?rel=0&amp;showinfo=0&amp;modestbranding=1&amp;autoplay=1" ); 
        // })
		
        // // stop playing the youtube video when I close the modal
        // $('#modalVideo').on('hide.bs.modal', function (e) {
        // 	$("#iframe").attr('src',$videoSrc); 
        // })

        $(document).ready(function() {
            $("#testimonial-owl").owlCarousel({
                loop:true,
                autoPlay: true,
                nav : false, // Show next and prev buttons
                navText: [
                    "<i class='fa-solid fa-arrow-left'></i>",
                    "<i class='fa-solid fa-arrow-right'></i></i>"
                ],
                dots: false,
                dataDots: true,
                slideSpeed : 300,
                smartSpeed: 800,
                paginationSpeed : 400,
                responsive:{
                    0:{
                        items:1
                    },
                    576:{
                        items:2
                    }
        
                }
            });
        });
	</script>
@endsection