@extends('client/layouts/contentNavbarLayout')

@section('title')
{{ __('client.parkings_list') }}
@endsection


@section('page-script')

@endsection

@section('content')


<div class="row py-3 mb-4">
    <div class="col-md">
        <h4 class="fw-bold">{{ __('client.parkings_list') }}</h4>
    </div>
    <div class="col-md text-md-end">
        <a class="btn btn-primary" href="{{ route('client.parking.create') }}">{{ __('client.add_new_parking') }}</a>
    </div>
</div>

<div class="col-12">
    @include('client.responses.messages')
    <div class="card">
        <h5 class="card-header">{{ __('client.parkings_list') }}</h5>
        <div class="table-responsive text-nowrap">
            <table class="table">
                <thead>
                    <tr class="text-center">
                        <th>{{ __('client.name') }}</th>
                        <th>{{ __('client.address') }}</th>
                        <th>{{ __('client.city') }}</th>
                        <th>{{ __('client.parking_map') }}</th>
                        <th>{{ __('client.actions') }}</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @if($parkings)
                      @foreach ($parkings as $parking)
                        <tr class="text-center">
                            <td>{{ $parking->name }}</td>
                            <td>{{ $parking->address }}</td>
                            <td>{{ $parking->city }}</td>
                            <td>
                              @if ($parking->parking_map)
                                <a class="btn btn-primary" href="{{ asset($parking->parking_map) }}" target="_blank">{{ __('client.consult') }}</a></td>                            
                              @endif
                            <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('client.parking.edit', $parking->id) }}"><i class="bx bx-edit-alt me-1"></i>{{ __('client.edit') }}</a>
                                        <button class="dropdown-item" onclick="deleteParking('{{ route('client.parking.delete', $parking->id) }}')"><i class="bx bx-trash me-1"></i>{{ __('client.delete') }}</button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                      @endforeach
                    @endif
                </tbody>
            </table>
        </div>
        <div class="mt-4 d-flex flex-row-reverse px-4 pt-4">
            {{ $parkings }}
        </div>
    </div>
</div>

<button hidden type="button" data-bs-toggle="modal" id="delete-btn" data-bs-target="#delete-parking"></button>
<div class="modal fade" id="delete-parking" tabindex="-1" aria-modal="true" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="exampleModalLabel1">{{ __("client.validation_window") }}</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="h5">
                    {{ __("client.delete_parking_validation") }}
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __("client.close") }}</button>
                <form id="delete-parking-form" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-danger">{{ __("client.delete") }}</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function deleteParking(route) {
        $("#delete-parking-form").attr("action", route);
        $('#delete-btn').trigger('click');
    }
</script>
@endsection