@extends('layouts.front-end.app')

@section('title',\App\CPU\translate('Where To Find Us'))

@push('css_or_js')
    <meta property="og:image" content="{{asset('storage/app/public/company')}}/{{$web_config['web_logo']->value}}"/>
    <meta property="og:title" content="Contact {{$web_config['name']->value}} "/>
    <meta property="og:url" content="{{env('APP_URL')}}">
    <meta property="og:description" content="{!! substr($web_config['about']->value,0,100) !!}">

    <meta property="twitter:card" content="{{asset('storage/app/public/company')}}/{{$web_config['web_logo']->value}}"/>
    <meta property="twitter:title" content="Contact {{$web_config['name']->value}}"/>
    <meta property="twitter:url" content="{{env('APP_URL')}}">
    <meta property="twitter:description" content="{!! substr($web_config['about']->value,0,100) !!}">
@endpush
@section('content')
<style>
.head-title {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    margin-buttom: 20px;
    font-weight: 900;
    font-size: 22px;
    color: #000000;
    position: relative;
    z-index: 1;
}

.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.1rem;
}
.card {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.16);
    border: 0;
    margin-bottom: 15px;
}
.card-header {
    padding: 10px;
    text-align: right;
    background: #3a2611;
    font-weight: bold;
    font-size: 27px;
}
.table-responsive {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 5px 0 rgba(0, 0, 0, 0.16);
    text-align: start;
}
.inner-product .table{
    direction: rtl;
}
.inner-product ,.table thead th {
    direction: rtl;
    color: #3a2316;
    font-weight: bold;
    font-size: 20px;
}
@media only screen and (max-width: 600px) {
    .table th, .table td {
        font-size: 12px;
    }
}

</style>
	<div class="inner-product">
		<!-- End inner-product-head -->
            <div class="head-title">فروع شانة</div>
      		@foreach($main_branches as $main_branch)

				<div class="card" style="margin:20px;">
					<h5 class="card-header h5 text-white " style="background-color:#f7921c">{{$main_branch->name}}</h5>
					<div class="table-responsive" style="border:#f7921c">
						<table class=" table table-striped">
                            <thead >
                                <tr>
                                <th>العنوان</th>
                                <th>الهاتف</th>
                                <th>عرض التفاصيل </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach(App\Model\Branch::where('branch_id' , $main_branch->id)->where('type_id' , 'Branch')->orderBy('sort' , 'ASC')->get() as $child_branch)
                                    <tr>
                                        <td>{{$child_branch->name}}</td>
                                        <td>{{$child_branch->contact_number}}</td>
                                        <td>
                                            <div class="inner-product-breadcrumbs d-flex align-items-center justify-content-center">
                                                <a href="{{route('WhereToFindUsSlug',$child_branch->id)}}">
                                                    <i class="fa-solid fa-location-dot"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
						</table>
					</div>
				</div>

			@endforeach
            @if(count($franchise_branches) > 0)
                <div class="head-title">وكلاء فرنشايز</div>
                @foreach($franchise_branches as $key => $franchise_branch)
                    <div class="card" style="margin:20px;">
                        <h5 class="card-header h5 text-white " style="background-color:#f7921c">{{$franchise_branch->name}}</h5>
                        <div class="table-responsive" style="border:#f7921c">
                            <table class=" table table-striped">
                                <thead >
                                    <tr>
                                        <th>العنوان</th>
                                        <th>الهاتف</th>
                                        <th>عرض التفاصيل </th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach(App\Model\Branch::where('branch_id' , $franchise_branch->id)->where('type_id' , 'Franchise')->orderBy('sort' , 'ASC')->get() as $child_branch)
                                    <tr>
                                        <td>{{$child_branch->name}}</td>
                                        <td>{{$child_branch->contact_number}}</td>
                                        <td>
                                            <div class="inner-product-breadcrumbs d-flex align-items-center justify-content-center">
                                                <a href="{{route('WhereToFindUsSlug',$child_branch->id)}}">
                                                    <i class="fa-solid fa-location-dot"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endforeach
            @endif
	</div>
	<!-- End inner-product -->
@endsection


@push('script')
@endpush