@extends('layouts.user-inner')
@section('content')
    <!-- Ec breadcrumb start -->
    <div class="sticky-header-next-sec  ec-breadcrumb">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="row ec_breadcrumb_inner">
                        <div class="col-md-12 col-sm-12">
                            <!-- ec-breadcrumb-list start -->
                            <ul class="ec-breadcrumb-list">
                                <li class="ec-breadcrumb-item"><a href="/">Home</a></li>
                                <li class="ec-breadcrumb-item active">Branches</li>
                            </ul>
                            <!-- ec-breadcrumb-list end -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Ec breadcrumb end -->


    <!-- locations starts-->
    <div class="container-fluid px-0 py-5" id="location">
        <div class="container px-0">
            <div class="row mx-0 px-0 justify-content-center">
                @foreach ($locations as $location)
                    <div class="col-12 col-sm-6 col-lg-4 py-3 h-100">
                        <div class="card p-2 rounded shadow ">
                            <div class="card-body   text-center">
                                <h5 class="card-title  text-uppercase"><b>{{ $location->location_name }}</b></h5>
                                <p class="card-text mb-0"><b>{{ $location->location_address }}</b></p>
                                <p class="location-phn mb-0">{!! nl2br($location->location_timings) !!}</p>
                                @if ($location->location_phone)
                                    <p class="phoneno mb-0"><b>Phone : {{ $location->location_phone }}</b></p>
                                @endif
                                @if ($location->location_whatsapp)
                                    <p class="phoneno mb-0"><b>Whastapp : {{ $location->location_whatsapp }}</b></p>
                                @endif
                                <div class="row mx-0 px-0 mt-3">
                                    <div class="col-6 p-2">
                                        <a href=" https://wa.me/15551234567?text=I'm%20interested%20in%20your%20sale"
                                            target="_blank" class="login-button w-100"> <i
                                                class="fa-solid fa-share-nodes mr-1"></i> Share</a>
                                    </div>
                                    <div class="col-6  p-2">
                                        <a href="#" class="login-button w-100" data-bs-toggle="modal"
                                            data-bs-target="#locaton{{ $location->location_id }}"> <i
                                                class="fa-solid fa-location-crosshairs mr-1"></i> location</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach


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

    @foreach ($locations as $location)
        <!-- Modal 1 starts -->
        <div class="modal fade" id="locaton{{ $location->location_id }}" tabindex="-1"
            aria-labelledby="locaton{{ $location->location_id }}" aria-hidden="true">
            <div class="modal-dialog  modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{ $location->location_name }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        {!! $location->location_map !!}
                        {{-- <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3922.821669171398!2d76.1968739!3d10.514707999999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ba7f367e872b3a5%3A0xeb28117c69e8ef23!2z4LSc4LS_4LSe4LWN4LSa4LW8IOC0n-C1huC0leC1jeC0qOC1i-C0s-C0nOC0v-C0uOC1jQ!5e0!3m2!1sml!2sin!4v1709718981707!5m2!1sml!2sin"
                        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe> --}}
                    </div>

                </div>
            </div>
        </div>
        <!-- Modal1 ends -->
    @endforeach

    <!--locations end-->
@endsection