@extends('layouts.LayoutMaster')

@section('content')

<div class="container">
    <div class="card">

        <div class="card-header d-flex justify-content-between">
            <p class="lead m-0">Zone List</p>
            <a href="{{route('zones.create')}}" class="btn btn-primary waves-effect waves-light">Create</a>
        </div>

        <div class="card-body">

        <div class="table-responsive text-nowrap">
          <table class="table table-bordered">

            <thead>
              <tr>
              <x-table.header :headers="['name','livreur','observation','Action']" />
                
              </tr>
            </thead>

            <tbody>

                @forelse ($zones as $zone)
                    <tr>
                      <td>{{$zone->id}}</td>

                  <td>{{$zone->name}}</td>
        <td>{{$zone->shipper->name}}</td>
        
        <td>{{$zone->observation}}

          <br> <b>Villes</b>
          <ul>
            @foreach ($zone->cities as $city)
              <li>{{$city->name}}</li>
            @endforeach
          </ul>
        </td>
        
                        <x-list-button routeDestroy="{{route('zones.destroy', $zone->id ) }}"
                                       routeEdit="{{route('zones.edit', $zone->id) }}">
                        </x-list-button>

                    </tr>

                @empty
                    <td>No record</td>
                @endforelse

            </tbody>
          </table>

        </div>
        </div>
    </div>
</div>

@endsection