@extends('frontend.m9')

@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/findstore.css') }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        iframe{
            width: 100%;
            height: 650px;
        }
    </style>
@endsection

@section('content')

<div id="content" role="main">
    <div class="gb-gnb__bar"></div>
    <div class="cm-breadcrumb">
       <div class="cm-breadcrumb__inner">
          <ul class="cm-breadcrumb__path">
             <li><a href="{{ url('/') }}"><span>Home</span></a> / </li>
             <li><span>Locations</span></li>
          </ul>
       </div>
    </div>
    <div class="cl-g-sticky-navigation-text section">
       <div id="navbarforfindstore">
          <a href="javascript:void(0)">Locations</a>
       </div>
    </div>
    @foreach ($servicecenters as $sc)
        @if ($sc->status == 1)
            <div class="par cm-g-ses-store-locator">
                <div class="store-locator">
                    <div id="content">
                        <div class="maps-container accomodate-navbar">
                            <div class="enclosing-reference">
                                <div class="store-locator-container store-container">
                                    <div class="store-locator-title">
                                        {{ $sc->service_center_name ?? '' }}
                                    </div>
                                    <div class="store-locator-desc">
                                        @isset($sc->address)
                                            <strong>Address</strong>
                                            <p>{{ $sc->address ?? '' }}</p>
                                        @endisset
                                        @isset($sc->phone)
                                            <strong>Phone</strong>
                                            <p>{{ $sc->phone ?? '' }}</p>
                                        @endisset
                                        @if (isset($sc->open_from) && isset($sc->open_to))
                                            <p><strong>Opening Hours:<br />
                                                {{ !empty($sc->open_from) ? date('h:i A',strtotime($sc->open_from)) : '-' ?? ''}} to {{ !empty($sc->open_to) ? date('h:i A',strtotime($sc->open_to)) : '-' ?? ''}} Daily</strong></p>
                                        @endif
                                        @isset($sc->description)
                                            <p>
                                                <strong>Description</strong><br>
                                                {{ $sc->description ?? '' }}
                                            </p>
                                        @endisset
                                    </div>
                                </div>
                                @if (isset($sc->map_location))
                                    {!! $sc->map_location !!}
                                @else
                                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30562.876419462726!2d96.23989077126053!3d16.758777911310823!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30c1f22aca108c37%3A0x52d856b9812af5b3!2sThanlyin!5e0!3m2!1sen!2smm!4v1598419456165!5m2!1sen!2smm" width="100%" height="650" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endforeach
    <div class="set_visit_us_section">
    <section class="ma-g-c-feature-general s-margin-verywide ma-g-c-feature-general--bg-white">
       <div class="ma-g-c-feature-general__content">
          <h2 class="ma-g-c-feature-general__title s-font-sharpsans contrast-target" data-font-size-pc="64" data-font-size-mo="70" data-omni="">Visit us</h2>
          <div class="ma-g-c-feature-general__text-area">
             <p class="ma-g-c-feature-general__text contrast-target" data-font-size-pc="18" data-font-size-mo="28">Schedule a visit for repairs, help or support.</p>
          </div>
       </div>
    </section>
    <!-- model column side -->
    <div class="section ma-g-two-column">
        <section class="ma-g-c-two-column ma-g-c-two-column--center s-margin-none">
          <!-- model box left side -->
          @foreach($servicecenters as $sc)
            @if($sc->status == 0)
            <div class="ma-g-c-two-column__column">
                <div class="ma-g-c-two-column__content">
                    <div class="ma-g-c-two-column__title contrast-target">
                        <h2>{{ $sc->service_center_name ?? '' }}</h2>
                    </div>
                    <div class="ma-g-c-two-column__sub-title contrast-target">
                        @if (isset($sc->open_from) && isset($sc->open_to))
                            <strong>Opening Hours:<br />
                                {{ !empty($sc->open_from) ? date('h:i A',strtotime($sc->open_from)) : '-' ?? ''}} to {{ !empty($sc->open_to) ? date('h:i A',strtotime($sc->open_to)) : '-' ?? ''}} Daily</strong>
                        @endif
                    </div>
                    <div class="ma-g-c-two-column__text contrast-target">
                        <p>{!! $sc->description ?? '' !!}</p>
                    </div>
                    <div class="s-marketing-cta">
                        <button type="button" class="contrast-target s-btn-cta" data-toggle="modal" data-target="#service{{ $sc->id }}">DETAIL</button>
                    </div>
                    <!-- Modal -->
                    <div class="modal fade" id="service{{ $sc->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h3 class="modal-title" id="exampleModalLabel">{{ $sc->service_center_name ?? '' }}</h3>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    @isset($sc->address)
                                        <strong>Address</strong>
                                        <p>{{ $sc->address ?? '' }}</p>
                                    @endisset
                                    @isset($sc->phone)
                                        <strong>Phone</strong>
                                        <p>{{ $sc->phone ?? '' }}</p>
                                    @endisset
                                    @if(isset($sc->open_from) && isset($sc->open_to))
                                        <strong>Opening Hours</strong>
                                        <p>
                                            @if (isset($sc->open_from) && isset($sc->open_to))
                                                {{ !empty($sc->open_from) ? date('h:i A',strtotime($sc->open_from)) : '-' ?? ''}} to {{ !empty($sc->open_to) ? date('h:i A',strtotime($sc->open_to)) : '-' ?? ''}} Daily
                                            @endif
                                        </p>
                                    @endif
                                    @isset($sc->description)
                                        <strong>Description</strong>
                                        <p>{{ $sc->description ?? '' }}</p>
                                    @endisset
                                    @isset($sc->map_location)
                                        <strong>Map Locations</strong>
                                        <div class="embed-responsive embed-responsive-16by9">
                                            {!! $sc->map_location !!}
                                        </div>
                                    @endisset
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
          @endforeach
          <!-- model box left side -->
        </section>
    </div>
    <!-- model column side -->

@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
@endsection