@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 p-3">Usuários Aplicativo DFL</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('ticketsin')}}" 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>
                    </select>
                    <select name="priority" id="priority" class="inputFilter">
                        <option value="" selected disabled>Prioridade</option>
                    </select>
                    <select name="responsible" id="responsible" class="inputFilter">
                        <option value="" selected disabled>Responsavel</option>
                    </select>
                    <button type="submit" class="btn m-2 mx-2 px-2">Pesquisar</button>
                    <a href="{{route('ticketsin')}}" 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 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-xl font-semibold text-orangeblack">
                                Atualizar 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>
                        <!-- Modal body -->
                        <form id="formUpdate" name="formUpdate" action="POST">
                        <div id="dataTicket" class=" p-4 md:p-5 flex  flex-wrap w-full ">
                            <input type="hidden" id="ticket_project_id">
                            <div class="flex flex-row w-full ">
                                <input type="text" id="name" name="name" class="inputModal w-[100%] mb-4" placeholder="Nome do usuário">
                                <input type="email" id="email" name="email" class="inputModal w-[100%]  mb-4" placeholder="Email do usuário">
                            </div >
                     
                            <div class="flex flex-row w-full">
                                <select id="category" name="category" class="inputModal w-full mb-4">
                                    <option value="" selected disabled>Categoria</option>
                                </select>
                                <select id="status" name="sta tus" class="inputModal  w-full mb-4">
                                    <option value="" selected disabled>Status</option>
                                </select>
                               
                            </div>
                            <textarea name="message" id=" message" class="inputModal w-full" cols="30" rows="10" placeholder="Observacao"></textarea>
                            <select id="responsible" name="responsible" class="inputModal  mb-4">
                                <option value="" selected disabled>Responsavel</option>
                            </select>
                        </div>
                        <div id="returnMsg" class="">
                        </div>
                        <!-- Modal footer -->
                        <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
                            <button  type="submit" id="btnUpdate" class="btn  btnUpdate w-full px-4">Salvar</button>
                            <button data-modal-hide="default-modal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-orange-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white 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 ">Email</th>
                            <th class="py-2 px-4 ">Categoria</th>
                            <th class="py-2 px-4 ">Status</th>
                            <th class="py-2 px-4 ">Atualização</th>
                            <th class="py-2 px-4 ">Responsável</th>
                            <th class="py-2 px-4 "></th>
                        </tr>
                    </thead>
                    <tbody class="text-blueblack shadow-lg rounded-lg">
                        @php
                            $ticket = new \stdClass();
                            $ticket->id = 1;
                            $ticket->name = "João Silva";
                            $ticket->created_at = \Carbon\Carbon::parse("2024-06-01 10:00");
                            $ticket->category = (object)["name" => "Motorista"];
                            $ticket->status = (object)["name" => "Pendente"];
                            $ticket->updated_at = \Carbon\Carbon::parse("2024-06-01 12:00");
                            $ticket->priority = (object)["name" => "Alta"];
                            $ticket->user = (object)["name" => "Maria Oliveira"];
                            $tickets = collect([$ticket]);
                        @endphp
                        @if ($tickets && $tickets->count() > 0)
                            @foreach ($tickets 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">{{$item->name}}</td>
                                <td class="py-2 px-4 border-b text-center">{{$item->created_at->format('d/m/Y H:i')}}</td>
                                <td class="py-2 px-4 border-b text-center">{{$item->category->name}}</td>
                                @if ($item->status->name == "Pendente")
                                        <td class="px-4 border-b rounded-lg  font-semibold text-zinc-700 text-center">{{$item->status->name}}</td>
                                @elseif($item->status->name == "Em andamento")
                                        <td class="py-2 px-4 border-b rounded-md font-semibold text-yellow-400 text-center">{{$item->status->name}}</td>
                                @elseif($item->status->name == "Finalizado")
                                        <td class="py-2 px-4 border-b rounded-md font-semibold text-green-500 text-center">{{$item->status->name}}</td>
                                @elseif($item->status->name == "Cancelado")
                                        <td class="py-2 px-4 border-b rounded-md font-semibold text-red-500 text-center">{{$item->status->name}}</td>
                                @else
                                        <td class="py-2 px-4 border-b text-center">{{$item->status->name}}</td>
                                @endif
                                <td class="py-2 px-4 border-b text-center">{{$item->updated_at->format('d/m/Y H:i')}}</td>
                                <td class="py-2 px-4 border-b text-center">{{$item->user->name}}</td>
                                <td class="py-2 px-4 border-b "><button id="editTicket" name="editTicket" class="editTicket w-full  flex justify-center" data-modal-target="default-modal" data-modal-toggle="default-modal" data-id="{{json_encode($item)}}" ><svg class="w-[25px] h-[25px] bg-yellow-500 text-white rounded-lg" 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="M10.779 17.779 4.36 19.918 6.5 13.5m4.279 4.279 8.364-8.643a3.027 3.027 0 0 0-2.14-5.165 3.03 3.03 0 0 0-2.14.886L6.5 13.5m4.279 4.279L6.499 13.5m2.14 2.14 6.213-6.504M12.75 7.04 17 11.28"/>
                                </svg>
                                </button></td>
                            </tr>
                        @endforeach
                        @else
                            <p class="textError">Nenhum ticket encontrado</p>
                        @endif
                    </tbody>
                </table>
                
{{--                 {{$tickets->links()}}
 --}}            </div>
        </div>
    </div>
</div>

@endsection