@extends('vendor.header.header')
@section('content')

<div class="header bg-primary pb-6  pt-5">
      <div class="container-fluid">
        <div class="header-body">
          <div class="row align-items-center py-4">
            <div class="col-lg-6 col-7">
              <h6 class="h2 text-white d-inline-block mb-0">{{__('Branches Store')}}</h6>
              <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                  <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
                  <li class="breadcrumb-item"><a href="/">{{__('Dashboard')}}</a></li>
                  <li class="breadcrumb-item active" aria-current="page">{{__('Branch Store table')}}</li>
                </ol>
              </nav>
            </div><br>
            <div class="col-12 ">
                <a href="{{route('VshowAddBranchepage.show')}}" class="btn btn-sm btn-neutral">{{__("New Branch")}}+</a>            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="container-fluid mt--6">
      <div class="row">
        <div class="col">
          <div class="card">
            <!-- Card header -->
            <div class="card-header border-0">
              <h3 class="mb-0">{{__('Branch Store table')}}</h3>
            </div>
            <!-- Light table -->
            <div class="table-responsive">
              <table class="table align-items-center table-flush">
                <thead class="thead-light">
                <tr>
{{--                    <th scope="col" class="sort" data-sort="budget">{{__('Store Image')}}</th>--}}
                    <th scope="col" class="sort" data-sort="name">{{__('Branch name')}}</th>
                    <th scope="col" class="sort" data-sort="name">{{__('Arabic Branch  Name')}} </th>
                    <th scope="col" class="sort" data-sort="status">{{__('Status')}}</th>
                    <th scope="col" class="sort" data-sort="status">{{__('English Location Name')}}</th>
                    <th scope="col" class="sort" data-sort="status">{{__('Arabic Location Name')}}</th>
                    <th scope="col" class="sort" data-sort="status">{{__('Location')}}</th>
                    <th scope="col" class="sort" data-sort="completion">{{__('Action')}}</th>
                  </tr>
                </thead>
                <tbody class="list">
                    @foreach($Branches as $branch)
                    <tr id="Branch{{$branch->id}}">


{{--                        <td><img src="{{$branch->Store_image}}"  width="75" ></td>--}}
                        <td>{{$branch->lang->translate_title}}</td>
                        <td>{{$branch->lang->translate_title_ar}}</td>
                        <td>
                        <span class="badge badge-dot mr-4">
                        @if($branch->Status == 0)
                        <i class="bg-warning"></i>
                        @elseif($branch->Status == 1)
                        <i class="bg-success"></i>
                        @endif
                        </span>
                        <span class="status">
                        @if($branch->Status == 0)
                        InActive
                        @elseif($branch->Status == 1)
                        Active
                        @endif
                        </span>

                        </td>
                        <td>{{$branch->location_name_en}}</td>
                        <td>{{$branch->location_name_ar}}</td>
                        <td>
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Location{{$branch->id}}">
                                    {{__("View")}}
                                </button>
                                <div class="modal fade" id="Location{{$branch->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-xl">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">Location</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <iframe
                                                    id="map"
                                                    allowfullscreen
                                                    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyB23WrJBsj9Tw0ZkOSZvL90gjGA2OefgWE&q=31.438037,36.373535">
                                                </iframe>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </td>
                        <td>

                    <form method="GET"  class="makeITinline" action="{{route('VEditBranch.edit')}}">

                        <input type="hidden" name="branchId" value="{{$branch->id}}" >

                    <button type="submit" class="btn btn-outline-primary">
                    <i class="fas fa-pencil-alt"></i>
                    </button>
                    </form>

                    <form   class="makeITinline" method="post" action="{{route('VdeleteBranch.destroy',$branch->id)}}" >
                        @csrf
                        @method("delete")
                        <button type="submit" class="btn btn-outline-danger" id="DeleteStore"><i
                                class="fas fa-trash-alt"></i></button>
                    </form>
                        </td>

                    </tr>
                    @endforeach
                </tbody>
              </table>
            </div>
            <!-- Card footer -->
            <!--<div class="card-footer py-4">-->
            <!--  <nav aria-label="...">-->
            <!--    <ul class="pagination justify-content-end mb-0">-->
            <!--      <li class="page-item disabled">-->
            <!--        <a class="page-link" href="#" tabindex="-1">-->
            <!--          <i class="fas fa-angle-left"></i>-->
            <!--          <span class="sr-only">Previous</span>-->
            <!--        </a>-->
            <!--      </li>-->
            <!--      <li class="page-item active">-->
            <!--        <a class="page-link" href="#">1</a>-->
            <!--      </li>-->
            <!--      <li class="page-item">-->
            <!--        <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>-->
            <!--      </li>-->
            <!--      <li class="page-item"><a class="page-link" href="#">3</a></li>-->
            <!--      <li class="page-item">-->
            <!--        <a class="page-link" href="#">-->
            <!--          <i class="fas fa-angle-right"></i>-->
            <!--          <span class="sr-only">Next</span>-->
            <!--        </a>-->
            <!--      </li>-->
            <!--    </ul>-->
            <!--  </nav>-->
            <!--</div>-->
          </div>
        </div>
      </div>
      <!-- Dark table -->



@endsection