@extends('index')

@section('content')
<section class="mb-5">
    <div class="container">
        <ul class="d-flex my-5 color_808080">
            <li>{{__('custom.門市據點')}}</li>
        </ul>

        <picture>
            <source media="(max-width: 991.98px)" srcset="{{asset('images/StoreLocationTopMb.jpg')}}">
            <img class="img-fluid" src="{{asset('images/StoreLocationTop.jpg')}}" alt="">
        </picture>
        <div class="StoreLocationBox">
            <h1 class="Title">{{__('custom.門市據點')}}</h1>
            <div>
                @foreach($store_list as $location => $store_item)
                <div class="content mt-5">
                    <div class="AreaBox">{{$location}}</div>
                    @foreach($store_item as $store)
                    <div class="Item">
                        <img class="StoreLocationImg" src="{{'https://changshun.nouveau0713.com/uploadimages/store_location/'.$store->store_location_id.'/'.$store->store_photo}}" alt="">
                        <div class="ms-lg-5 d-flex flex-column">
                            <h2 class="mt-4">{{$store->store_title}}</h2>
                            <ul class="mt-auto mb-4">
                                <li><img src="{{asset('images/icons_map.svg')}}" alt="">
                                    <div class="ms-2">
                                        <a class="btn_text_74" href="{{url(unserialize($store->google_map)['href'])}}" target="{{ unserialize($store->google_map)['target'] ? '_blank': '_self' }}">
                                            {{$store->store_address}}
                                        </a>
                                    </div>
                                </li>
                                <li><img src="{{asset('images/icons_phone.svg')}}" alt="">
                                    <div class="ms-2">{{$store->store_tel}}</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
@endsection