@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 font-bold bg-orangeblack text-white rounded-lg w-full  flex flex-row gap-[5px] justify-start items-center p-3 ">Checklist <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 4h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3m0 3h6m-6 7 2 2 4-4m-5-9v4h4V3h-4Z"/>
        </svg>
        </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.checklist')}}" 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">
                    <input type="text"  name="vehicle" id="vehicle" class="inputFilter w-[10%]" placeholder="Placa">

                    <select name="driver" id="driver" class="inputFilter">
                        <option value="" selected >Motorista</option>
                        @if ($motoristas)
                            @foreach ($motoristas as $motorista)
                            <option value="{{$motorista->id}}">{{$motorista->name}}</option>
                            @endforeach
                        @endif
                    </select>
                    <select name="status" id="status" class="inputFilter">
                        <option value="" selected>Status</option>
                        <option value="0">Pendente</option>
                        <option value="1">Finalizado</option>
                    </select>
                    <input type="date"  name="dateStart" id="dateStart" class="inputFilter w-[10%]" placeholder="Data Inicial">
                    <input type="date"  name="dateFinish" id="dateFinish" class="inputFilter w-[10%]" placeholder="Data Final">


                    <button type="submit" class="btn m-2 mx-2 px-2">Pesquisar</button>
                    <a href="{{route('frotas.checklist')}}" class="btnClear m-2 mx-2 text-center flex justify-center items-center px-2">Limpar</a>
                </form>

            </div>
            <div class=" w-full m-2">
               <button id="btnModalCreate" data-modal-target="create-modal" data-modal-toggle="create-modal" class="btn px-2 w-auto flex flex-row justify-center items-center gap-[5px]" type="button">Novo Checklist <svg class="w-6 h-6 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4.243a1 1 0 1 0-2 0V11H7.757a1 1 0 1 0 0 2H11v3.243a1 1 0 1 0 2 0V13h3.243a1 1 0 1 0 0-2H13V7.757Z" clip-rule="evenodd"/>
                </svg>
                </button>
            </div>

            <!-- Create modal -->
            <div id="create-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-lg max-h-full">
                    <!-- Modal content -->
                    <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
                        <!-- Modal header -->
                        <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                Criar novo Checklist
                            </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-toggle="create-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>
                        <!-- Modal body -->
                        <form id="formCreate" class="p-4 md:p-5">
                            @csrf
                            <div class="grid gap-4 mb-4 grid-cols-2">
                                <div class="col-span-2">
                                    <label for="nameCreate" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nome do Checklist</label>
                                    <input type="text" name="nameCreate" id="nameCreate" class="inputModal w-full" placeholder="Ex: Viagem RIO, Inicio Manutenção" required="">
                                </div>
                                <div class="col-span-2 ">
                                    <label for="vehicle" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Veiculo</label>
                                    <input type="text" name="vehicleCreate" id="vehicleCreate" class="inputModal" placeholder="ABC-1234" required="">
                                </div>
                                <div class="col-span-1 sm:col-span-1">
                                    <label for="driver" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Motorista</label>
                                    <select id="driverCreate"  name="driverCreate"class="inputModal">
                                        <option>Selecione</option>\
                                    @if ($motoristas)
                                            @foreach ($motoristas as $motorista)
                                            <option value="{{$motorista->id}}">{{$motorista->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>

                            </div>
                            <div id="returnMsgCreate" class="w-full rounded-lg text-center"></div>
                            <button id="btnCreate" type="button" class="text-white btn w-auto inline-flex p-2">
                                <svg class="me-1 -ms-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
                                Add Checklist
                            </button>
                        </form>
                    </div>
                </div>
            </div> 


            <!-- Main modal -->
            <!-- Update modal -->
            <!-- Modal de Update -->
            <div id="update-modal" tabindex="-1" aria-hidden="true"
            class="hidden overflow-y-auto overflow-x-hidden fixed inset-0 z-50 flex justify-center items-center w-full h-full">

            <div class="relative w-full max-w-lg p-4">

            <!-- Conteúdo -->
            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">

                <!-- Form -->
                <form id="formUpdate" name="formUpdate" method="POST">
                    @csrf
                    <input type="hidden" id="checklist_id" name="checklist_id">

                    <!-- Modal header -->
                    <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-600">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                            Editar Checklist
                        </h3>
                        <button type="button" data-modal-hide="update-modal"
                            class="text-gray-400 hover:text-gray-900 dark:hover:text-white">
                            ✖
                        </button>
                    </div>

                    <!-- Modal Body -->
                    <div class="p-4 md:p-5 space-y-4">

                        <!-- Nome + Veículo -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
                            <div>
                                <label class="modal-label">Nome</label>
                                <input type="text" id="nameUpdate" name="nameUpdate"
                                        class="inputModal w-full" placeholder="Nome do Checklist">
                            </div>

                            <div>
                                <label class="modal-label">Veículo</label>
                                <input type="text" id="vehicleUpdate" name="vehicleUpdate"
                                        class="inputModal w-full" placeholder="Placa">
                            </div>
                        </div>

                        <!-- Categoria + Status -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
                            <div>
                                <label class="modal-label">Status</label>
                                <select id="statusUpdate" name="statusUpdate" class="inputModal w-full">
                                    <option value="0">Pendente</option>
                                    <option value="1">Finalizado</option>
                                </select>
                                </div>
                                <div class="">
                                <label class="modal-label">Motorista</label>
                                <select id="driverUpdate" name="driverUpdate" class="inputModal w-full">
                                    <option disabled selected>Selecione</option>
                                    @foreach ($motoristas as $motorista)
                                        <option value="{{ $motorista->id }}">{{ $motorista->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            </div>
                            

                        <div id="returnMsg"></div>

                    </div>

                    <!-- Modal footer -->
                    <div class="flex items-center justify-end gap-3 p-4 border-t border-gray-200 dark:border-gray-600">
                        <button id="btnUpdate" type="submit"
                            class="btn btnUpdate w-full px-4">
                            Salvar
                        </button>

                        <button type="button" data-modal-hide="update-modal"
                            class="py-2.5 px-5 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700">
                            Cancelar
                        </button>
                    </div>

                </form>

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

          
            <div class="w-full overflow-x-auto">
                <table class="w-full text-white rounded-lg">
                    <thead class="bg-zinc-700 rounded-lg shadow-lg">
                        <tr class="">
                            <th class="py-2 px-4 ">Cod</th>
                            <th class="py-2 px-4 ">Nome</th>
                            <th class="py-2 px-4 ">Motorista</th>
                            <th class="py-2 px-4 ">Placa</th>
                            <th class="py-2 px-4 ">Data</th> 
                            <th class="py-2 px-4 ">Descrição</th>
                            <th class="py-2 px-4 ">Status</th>
                            <th class="py-2 px-4 ">Atualização</th>
                            <th class="py-2 px-4 "></th>
                        </tr>
                    </thead>
                    <tbody class="text-blueblack shadow-lg rounded-lg">
                          @foreach ($checklists as $item)
                        <tr>
                            <td class="py-2 px-4 border-b font-extrabold text-center">{{$item->id}}</td>
                            <td class="py-2 px-4 border-b text-center">{{ucfirst($item->nome)}}</td>
                            @foreach ($motoristas as $motorista)
                                @if ($motorista->id === $item->user_id)
                                    <td class="py-2 px-4 border-b text-center">{{ucfirst($motorista->name)}}</td>
                                @endif
                            @endforeach
                            <td class="py-2 px-4 border-b text-center">{{$item->placa}}</td>
                            <td class="py-2 px-4 border-b text-center">{{ \Carbon\Carbon::parse($item->created_at)->format('d/m/Y H:i') }}</td>
                            <td class="py-2 px-4 border-b text-center">{{ucfirst($item->ressalva ?? '-')}}</td>
                            <td class="py-2 px-4 border-b text-center">
                                @if ($item->status === 0)
                                    <span class="text-red-500 font-semibold">Pendente</span>
                                @else
                                    <span class="text-green-500 font-semibold">Finalizado</span>
                                @endif
                            </td>
                            <td class="py-2 px-4 border-b text-center">{{ \Carbon\Carbon::parse($item->updated_at)->format('d/m/Y H:i') }}</td>
                     
                            <td class="py-2 px-4 border-b "><button id="editChecklist" name="editChecklist" class="editChecklist w-full  flex justify-center" data-modal-target="update-modal" data-modal-toggle="update-modal" data-id="{{json_encode($item)}}" >
                                <svg class="w-6 h-6 text-orangeblack" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13v-2a1 1 0 0 0-1-1h-.757l-.707-1.707.535-.536a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0l-.536.535L14 4.757V4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v.757l-1.707.707-.536-.535a1 1 0 0 0-1.414 0L4.929 6.343a1 1 0 0 0 0 1.414l.536.536L4.757 10H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h.757l.707 1.707-.535.536a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l.536-.535 1.707.707V20a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-.757l1.707-.708.536.536a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-.535-.536.707-1.707H20a1 1 0 0 0 1-1Z"/>
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/>
                        </svg>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
             </div>
        </div>
    </div>
</div>
@vite(['resources/js/frota/checklist.js']);
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@endsection