@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

@include('components.navbar')
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init();
</script>
<div class="bg-center bg-cover" style=" background-image: url('{{ url('/images/branches/Wallpaper.png') }}');">
    <div class="flex items-center justify-center">
        <div class="container mx-auto">
            <div class="py-40 ml-4 text-white md:ml-20">
                <h1 class="text-2xl font-bold md:text-6xl">Branches</h1>
                <p class="text-sm text-justify md:text-lg">
                    Michael Angelo Manpower Exponent Inc.
                </p>
            </div>
        </div>
    </div>
</div>
<div class="flex items-center justify-center">
    <div class="container mx-auto">
        <div class="grid grid-cols-1 mx-2 my-20 space-y-12 md:mx-12 lg:mx-20 xl:mx-32">
            @foreach($branch as $branches)
            <div class="grid grid-cols-1 space-x-8 md:grid-cols-2">
                <div>
                    <h1 class="text-2xl font-bold text-red-600 lg:text-4xl">{{$branches->branch_name}}</h1>
                    <iframe class="w-full" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3952.772156138094!2d125.61471571432992!3d7.068165317095751!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x33aee01526a0f3a9%3A0xc8d783f28a7d1b94!2sBermejo%20Building%2C%20105-A%20A.%20Pichon%20St.%2C%20Barangay%2039-D%2C%208000%20Davao%20City%2C%20Davao%20del%20Sur!5e0!3m2!1sen!2sph!4v1620624226808!5m2!1sen!2sph" allowfullscreen>
                    </iframe>
                </div>
                <div class="flex flex-col justify-center ">
                    <ul class="space-y-20 text-lg font-semibold text-red-600 lg:text-xl">
                        <div class="flex flex-row space-x-8 ">
                            <li><img src="{{asset('images/branches/treasure-map.png')}}" alt=""></li>
                            <li>
                                {{$branches->address}}
                            </li>
                        </div>
                        <div class="flex flex-row space-x-8">
                            <li>
                                <img src="{{asset('images/branches/PhoneCall.png')}}" alt="">
                            </li>
                            <li>
                                {{$branches->contact_number}}
                            </li>
                        </div>
                        <div class="flex flex-row space-x-8">
                            <li>
                                <img src="{{asset('images/branches/Schedule.png')}}" alt="">
                            </li>
                            <li>
                                Monday to Friday
                                <br>
                                8:00 AM to 5:00 PM
                            </li>
                        </div>

                    </ul>
                </div>
            </div>
            @endforeach




        </div>
    </div>
</div>
@include('components.footer2')


@endsection