@extends('v2/fleet/layouts/contentNavbarLayout')

@section('title')
La list des convoyages
@endsection


@section('page-script')
@endsection

@section('content')

<div class="row py-3 mb-4">
    <div class="col-md-8">
        <h4 class="fw-bold text-dark">{{ __('client.conveyings') }}</h4>
        <p>Gérez facilement vos demandes de convoayage. Ajoutez des convoyages, surveillez leurs activités.</p>
    </div>
    <div class="col-md text-md-end">
        <a href="{{ route('fleet.conveying.create') }}" class="border-0 p-3 text-white bg-main-blue rounded">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_233_13057)">
                    <path d="M9.99996 18.3332C14.6023 18.3332 18.3333 14.6022 18.3333 9.99984C18.3333 5.39746 14.6023 1.6665 9.99996 1.6665C5.39759 1.6665 1.66663 5.39746 1.66663 9.99984C1.66663 14.6022 5.39759 18.3332 9.99996 18.3332Z" stroke="white" stroke-width="1.5" />
                    <path d="M12.5 10H10M10 10H7.5M10 10V7.5M10 10V12.5" stroke="white" stroke-width="1.5" stroke-linecap="round" />
                </g>
                <defs>
                    <clipPath id="clip0_233_13057">
                        <rect width="20" height="20" fill="white" />
                    </clipPath>
                </defs>
            </svg>
            &nbsp;
            {{ __('client.add') }}
        </a>
    </div>
</div>

<div class="row">
    <div class="form-group w-25">
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    @include('v2.fleet.partials.icons.search')
                  </span>        
            </div>
            <input type="text" class="form-control" id="searchInput" placeholder="{{ __('client.search') }}">
        </div>
    </div>
    {{-- <div class="form-group w-25">
        <select id="statusFilter" class="form-select">
            <option value="">Par Status</option>
            <option value="{{ Conveying::STATUS_PENDING }}">{{ __('client.pending') }}</option>
            <option value="{{ Conveying::STATUS_ACCEPTED }}">{{ __('client.accepted') }}</option>
            <option value="{{ Conveying::STATUS_IN_PROGRESS }}">{{ __('client.in_progress') }}</option>
            <option value="{{ Conveying::STATUS_FINISHED }}">{{ __('client.finished') }}</option>
            <option value="{{ Conveying::STATUS_CANCELED_BY_COMPANY }}">{{ __('client.canceled') }} {{ __('client.by') }} {{ __('client.you') }}</option>
            <option value="{{ Conveying::STATUS_CANCELED_BY_CLIENT }}">{{ __('client.canceled') }} <br><br> {{ __('client.by') }} {{ __('client.you') }}</option>
        </select>
    </div> --}}
</div>

<div class="col-12">
    @include('client.responses.messages')
    <div id="table-layout" class="table-responsive">
        <table class="table table-borderless" style="border-collapse: separate;border-spacing:0 10px;">
            <thead>
                <tr class="text-center">
                    <th style="min-width: 200px">{{ __('client.vehicle') }}</th>
                    <th style="min-width: 200px">Depart</th>
                    <th style="min-width: 200px">Arrive</th>
                    <th style="min-width: 125px">{{ __('client.driver') }}</th>
                    <th style="min-width: 140px">{{ __('client.distance') }} && <br> {{ __('client.price_ht') }}</th>
                    <th>Service</th>
                    <th>{{ __('client.status') }}</th>
                    <th>{{ __('client.actions') }}</th>
                </tr>
            </thead>
            <tbody class="table-border-bottom-0">
                @if($conveyings)
                @foreach ($conveyings['data']['conveyings'] as $conveying)
                <tr class="text-center rounded bg-white">
                    <td>{{ isset($conveying['vehicle_version']) ? $conveying['vehicle_mark'] . ' ' .  $conveying['vehicle_model'] . ' ' . $conveying['vehicle_version'] : $conveying['vehicle_mark'] . ' ' .  $conveying['vehicle_model'] }}</td>                  <td>
                    {{ $conveying['departure_address'] }}
                    <br>
                    {{ Carbon::parse($conveying['from_date'])->format('Y-m-d h:i') }}
                  </td>
                  <td>
                    {{ $conveying['arrival_address'] }}
                    <br>
                    {{  $conveying['to_date'] ? Carbon::parse($conveying['to_date'])->format('Y-m-d h:i') : null }}
                  </td>
                  <td>
                    {{ $conveying['driver'] ? $conveying['driver']['name'] : __('client.not_assigned_yet') }}
                    <br>
                  {{ $conveying['driver'] ? $conveying['driver']['phone'] : null  }}</td>
                  <td>
                    {{ $conveying['price_ht'] }} €
                    <br>
                    {{ $conveying['distance'] }} Km
                  </td>
                  <td>{{ $conveying['service_requested'] }}</td>
                  <td>
                      @include('client.conveying.status', ['status' => $conveying['status']['title'], 'size' => 'small'])
                  </td>
                  <td>
                      <div class="dropdown">
                          <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="bx bx-dots-vertical-rounded"></i></button>
                          <div class="dropdown-menu">
                              <a class="dropdown-item" href="{{ route('fleet.conveying.show', $conveying['id']) }}">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width="12">
                                    <path fill="#697a8d" d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM80 64h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16s7.2-16 16-16zm16 96H288c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V256c0-17.7 14.3-32 32-32zm0 32v64H288V256H96zM240 416h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H240c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/>
                                </svg> 
                                <span class="mx-2">{{ __('client.consult') }}</span>
                              </a>
                              @if ($conveying['departure_contract_scan'])
                                  <a class="dropdown-item" href="{{ env('DADYCAR_URL') . '/' . $conveying['departure_contract_scan'] }}" target="_blank">
                                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="18">
                                          <path fill="#697a8d" d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V428.7c-2.7 1.1-5.4 2-8.2 2.7l-60.1 15c-3 .7-6 1.2-9 1.4c-.9 .1-1.8 .2-2.7 .2H240c-6.1 0-11.6-3.4-14.3-8.8l-8.8-17.7c-1.7-3.4-5.1-5.5-8.8-5.5s-7.2 2.1-8.8 5.5l-8.8 17.7c-2.9 5.9-9.2 9.4-15.7 8.8s-12.1-5.1-13.9-11.3L144 381l-9.8 32.8c-6.1 20.3-24.8 34.2-46 34.2H80c-8.8 0-16-7.2-16-16s7.2-16 16-16h8.2c7.1 0 13.3-4.6 15.3-11.4l14.9-49.5c3.4-11.3 13.8-19.1 25.6-19.1s22.2 7.8 25.6 19.1l11.6 38.6c7.4-6.2 16.8-9.7 26.8-9.7c15.9 0 30.4 9 37.5 23.2l4.4 8.8h8.9c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7L384 203.6V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM549.8 139.7c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM311.9 321c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L512.1 262.7l-71-71L311.9 321z"/>
                                      </svg>
                                      <span class="mx-2">{{ __('client.departure_contract') }}</span>
                                  </a>
                              @endif
                              @if ($conveying['arrival_contract_scan'])
                                  <a class="dropdown-item" href="{{ env('DADYCAR_URL') . '/' . $conveying['arrival_contract_scan'] }}" target="_blank">
                                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width="18">
                                          <path fill="#697a8d" d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V428.7c-2.7 1.1-5.4 2-8.2 2.7l-60.1 15c-3 .7-6 1.2-9 1.4c-.9 .1-1.8 .2-2.7 .2H240c-6.1 0-11.6-3.4-14.3-8.8l-8.8-17.7c-1.7-3.4-5.1-5.5-8.8-5.5s-7.2 2.1-8.8 5.5l-8.8 17.7c-2.9 5.9-9.2 9.4-15.7 8.8s-12.1-5.1-13.9-11.3L144 381l-9.8 32.8c-6.1 20.3-24.8 34.2-46 34.2H80c-8.8 0-16-7.2-16-16s7.2-16 16-16h8.2c7.1 0 13.3-4.6 15.3-11.4l14.9-49.5c3.4-11.3 13.8-19.1 25.6-19.1s22.2 7.8 25.6 19.1l11.6 38.6c7.4-6.2 16.8-9.7 26.8-9.7c15.9 0 30.4 9 37.5 23.2l4.4 8.8h8.9c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7L384 203.6V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM549.8 139.7c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM311.9 321c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L512.1 262.7l-71-71L311.9 321z"/>
                                      </svg>
                                      <span class="mx-2">{{ __('client.arrival_contract') }}</span>
                                  </a>
                              @endif
                              @if($conveying['can_be_edited'])
                                  <a class="dropdown-item" href="{{ route('fleet.conveying.edit', $conveying['id']) }}"><i class="bx bx-edit-alt me-1"></i> {{ __('client.edit') }}</a>                                        
                              @endif
                              @if ($conveying['can_be_cancelled'])
                                  <button class="btn dropdown-item" onclick="cancelConveying('{{ route('fleet.conveying.cancel', $conveying['id']) }}')"><i class="bx bx-trash me-1"></i>{{ __('client.cancel_conveying') }}</button>
                              @endif
                          </div>
                      </div>
                  </td>
                </tr>
                @endforeach
              @endif
            </tbody>
        </table>
    </div>
</div>
@include('v2.fleet.conveyings.modals.cancel-conveying')
@endsection

@section('scripts')
<script>
    function cancelConveying(route) {
        $("#cancel-conveying-form").attr("action", route);
        $('#cancel-btn').trigger('click');
    }
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('searchInput');

        searchInput.addEventListener('input', function () {
            const filter = searchInput.value.toUpperCase();
            const tableRows = document.querySelectorAll('#table-layout tbody tr');

            tableRows.forEach(function (row) {
                let found = false;
                row.querySelectorAll('td').forEach(function (cell) {
                    const textValue = cell.textContent || cell.innerText;
                    if (textValue.toUpperCase().indexOf(filter) > -1) {
                        found = true;
                    }
                });

                if (found) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    });
</script>
@endsection