@include('layouts.header')
<div class="container">
    <div role="tabpanel">

        <!-- Nav tabs -->
        <ul class="nav nav-tabs nav-justified d-flex justify-content-between branch-tab" role="tablist">
            <li role="presentation">
                <a href="#all" aria-controls="all" role="tab" data-toggle="tab" class="active">
                    All
                </a>
            </li>
            @foreach ($branchs as $key => $branch)
                <li role="presentation">
                    <a href="#{{ preg_replace('/\s+/', '', $key) }}"
                        aria-controls="{{ preg_replace('/\s+/', '', $key) }}" role="tab" data-toggle="tab">
                        {{ $key }}
                    </a>
                </li>
            @endforeach
        </ul>

        <!-- Tab panes -->
        <div class="tab-content" >
            <div role="tabpanel" class="tab-pane active" id="all" >
                <div class="row g-4 my-2">
                    @foreach ($branchs as $key => $branch)
                        @foreach ($branch as $list)
                            <div class="col-md-4">

                                <div class="branch-card" style="min-height:350px; ">
                                   <div   style="margin-top:-30px "> <h2>{{ $list->branch_name }}</h2></div>
                                    <p class="mt-3">{{ $list->supervisor }}</p>
                                    <p class="mt-3">{{ $list->designation }}</p>
                                    <p class="mt-3">{{$list->branch_address}}</p>
                                    <p class="mt-3">Mob: {{$list->branch_phone}}</p>
                                    <p class="mt-1">Email: {{$list->branch_email}}</p>
                                </div>
                            </div>
                        @endforeach
                    @endforeach
                </div>
            </div>
            @foreach ($branchs as $key => $branch)
                <div role="tabpanel" class="tab-pane " id="{{ preg_replace('/\s+/', '', $key) }}">
                    <div class="row g-4 my-3">
                        @foreach ($branch as $list)
                        <div class="col-md-4">

                            <div class="branch-card" style="min-height:350px; ">
                               <div   style="margin-top:-30px "> <h2>{{ $list->branch_name }}</h2></div>
                                <p class="mt-3">{{ $list->supervisor }}</p>
                                <p class="mt-3">{{ $list->designation }}</p>
                                <p class="mt-3">{{$list->branch_address}}</p>
                                <p class="mt-3">Mob: {{$list->branch_phone}}</p>
                                <p class="mt-1">Email: {{$list->branch_email}}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            @endforeach

        </div>
    </div>
</div>
@include('layouts.footer')