@extends('layouts.LayoutMaster')

@section('content')

<div class="container">
  <div class="card">
    @include('_partials.alerts')

    <div class="card-header d-flex justify-content-between">
      <p class="lead m-0">ShipperBox List</p>
      <a href="{{route('shipper-boxes.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="['Informations','status','tracking_number','Total','Action']" />
            </tr>
          </thead>

          <tbody>

            @forelse ($shipperBoxes as $shipperBox)
            <tr>
              <td>{{$shipperBox->id}}</td>

              <td>
                <b>Reference : </b> {{$shipperBox->reference}} <br>
                <b>Date : </b> {{$shipperBox->created_at}} <br>
                <b>Livreur : </b> {{$shipperBox->shipper->name}} <br>
                <b>Zone : </b> <a href="{{route('zones.show',$shipperBox->zone_id)}}" target="_blank">
                  {{$shipperBox->zone->name}}
                </a> <br>
              </td>

              <td>
                <span class="badge rounded-pill bg-{{ $shipperBox->statusDetails()['color'] }}  bg-glow">
                  {{ $shipperBox->statusDetails()['name'] }}
                </span>
              </td>

              <td>{{$shipperBox->tracking_number}}</td>


              <td>{{$shipperBox->parcels->count()}} / {{$shipperBox->candidateParcels()}}</td>


              <x-list-button-perm permName="shipperBox" routeShow="{{route('shipper-boxes.show', $shipperBox->id) }}"
                routeDestroy="{{route('shipper-boxes.destroy', $shipperBox->id ) }}"
                routeEdit="{{route('shipper-boxes.edit', $shipperBox->id) }}">
              </x-list-button-perm>
            </tr>

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

          </tbody>
        </table>

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

@endsection