@extends('frota.frota')

@section('content')
<div class="bg-white  h-auto  mx-auto w-[90%] rounded-lg my-2">
    <div class="">
        <h1 class="text-2xl montserrat-600 bg-orangeblack text-white rounded-lg w-full p-3">Usuários APP Motorista</h1>
        <div class=" p-6 rounded-lg  w-[100%] mx-auto  flex flex-col justify-center items-center">
           {{--  <div class="my-4 w-[80%] flex flex-row justify-center items-center gap-2">
                <form action="{{route('frotas.motoristas')}}" method="GET" class="flex flex-col lg:flex-row lg:justify-center lg:items-center ">
                    <input type="text"  name="cod" id="cod" class="inputFilter w-[10%]" placeholder="Codigo">
                    <select name="category" id="category" class="inputFilter">
                        <option value="" selected disabled>Categoria</option>
                    </select>
                    <select name="status" id="status" class="inputFilter">
                        <option value="" selected disabled>Status</option>
                        <option value="1">Ativo</option>
                        <option value="0">Inativo</option>
                    </select>
              
                  
                    <button type="submit" class="btn m-2 mx-2 px-2">Pesquisar</button>
                    <a href="{{route('frotas.motoristas')}}" class="btnClear m-2 mx-2 text-center flex justify-center items-center px-2">Limpar</a>
                </form>
            </div> --}}

            <!-- Main modal -->
            <div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
                <div class="relative p-4 w-full max-w-3xl max-h-full">
                    <!-- Modal content -->
                    <div class="relative bg-white rounded-lg shadow-sm ">
                        <!-- Modal header -->
                        <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t  border-gray-200">
                            <h3 class="text-xl font-semibold text-orangeblack">
                                Detalhes do Cadastro
                            </h3>
                            <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                                </svg>
                                <span class="sr-only">Close modal</span>
                            </button>
                        </div>
                        <div class="p-3 flex flex-col gap-2">
                            <div class="flex flex-row gap-[15px] items-center">
                                <img class="w-[100px] h-[100px] p-1 rounded-full ring-2 ring-orange-500" src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Bordered avatar">
                                <div class="gap-[5px]">
                                    <p class="text-[15px]" id="driverId">Codigo:</p>
                                    <p class="text-[15px]" id="driverName">Nome completo:</p>
                                    <p class="text-[15px]" id="driverCPF">CPF</p>
                                    <p class="text-[15px]" id="driverEmail">Email:</p>
                                    <p class="text-[15px]" id="driverCategory">Categoria:</p>
                                    <p class="text-[15px]" id="driverStatus">Status:</p>
                                </div>
                            </div>
                        </div>
                        
                       
                    </div>
                </div>
            </div>
            <div class="w-full overflow-x-auto">    
                <table class="w-full text-zinc-600 rounded-lg">
                    <thead class="bg-zinc-300 rounded-lg shadow-lg">
                        <tr class="">
                            <th class="montserrat-800 py-2 px-4 text-left ">Cod</th>
                            <th class="montserrat-600 py-2 text-left ">Nome</th>
                            <th class="montserrat-600 py-2 px-4 text-left ">Email</th>
                            <th class="montserrat-600 py-2 px-4  text-left">Categoria</th>
                            <th class="montserrat-600 py-2 px-4 text-left">CPF</th>
                            <th class="montserrat-600 py-2 px-4 "></th>
                            <th class="montserrat-600 py-2 px-4 "></th>
                        </tr>
                    </thead>
                    <tbody class="text-blueblack shadow-lg rounded-lg">
                        @if ($motoristas)
                            @foreach ($motoristas as $item)
                            <tr>
                                <td class="montserrat-400 py-2 px-4 border-b text-left">{{$item['id']}}</td>
                                <td class="montserrat-400 py-2  border-b text-left ">{{$item['name']}}</td>
                                <td class="montserrat-400 py-2 px-4 border-b text-left">{{$item['email']}}</td>
                                <td class="montserrat-400 py-2 px-4 border-b text-left">{{ucfirst($item['tipo'])}}</td>
                                <td class="montserrat-400 py-2 px-4 border-b text-left">{{preg_replace('/(\d{3})(\d{3})(\d{3})(\d{2})/', '$1.$2.$3-$4', $item['cpf'])}}</td>
                                 <td class="montserrat-400 py-2 px-4 border-b "><button id="details" name="details" class="details w-full  flex justify-center" data-modal-target="default-modal" data-modal-toggle="default-modal" data-id="{{json_encode($item)}}" >
                                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" />
                                </svg>
                                </button></td>
                                @if ($item['status'] === 1)
                                    <td class="montserrat-500 py-2 px-4 border-b text-center ">
                                        <button type="button" id="toggleStatus" class="btn-danger toggleStatus" data-id="{{$item['id']}}" data-status="{{$item['status']}}">Desativar</button>
                                    </td>
                                @else
                                    <td class="montserrat-500 py-2 px-4 border-b text-center ">
                                        <button type="button" id="toggleStatus" class="btn-success toggleStatus" data-id="{{$item['id']}}" data-status="{{$item['status']}}">Ativar</button>
                                    </td>

                                @endif
                            </tr>
                        @endforeach
                        @else
                            <p class="textError">Nenhum motorista encontrado</p>
                        @endif
                    </tbody>
                </table>
           </div>
        </div>
    </div>
</div>
@vite(["resources/js/frota/drivers.js"]);
@endsection