@extends('projetos.projetos');

@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">Tickets Externos</h1>
        <p class="text-blueblack mb-4 p-3">Aqui você pode visualizar os tickets recebidos pelos seus clientes.</p>
            <div class="my-4 w-[100%] flex flex-row justify-center items-center gap-2">
                <form action="{{route('ticketsout')}}" 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>
                        @foreach ($category as $item)
                            <option value="{{$item->id}}">{{$item->name}}</option>
                        @endforeach
                    </select>
                    <select name="status" id="status" class="inputFilter">
                        <option value="" selected disabled>Status</option>
                        @foreach ($status as $item)
                            <option value="{{$item->id}}">{{$item->name}}</option>
                        @endforeach
                    </select>
                    <select name="priority" id="priority" class="inputFilter">
                        <option value="" selected disabled>Prioridade</option>
                        @foreach ($priority as $item)
                            <option value="{{$item->id}}">{{$item->name}}</option>
                        @endforeach
                    </select>
              {{--       <select name="responsible" id="responsible" class="inputFilter">
                        <option value="" selected disabled>Responsavel</option>
                        @foreach ($users as $item)
                            <option value="{{$item->id}}">{{$item->name}}</option>
                        @endforeach
                    </select> --}}
                    <button type="submit" class="btn m-2 mx-2 px-2">Pesquisar</button>
                    <a href="{{route('ticketsout')}}" 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 Ticket
                            </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="ticket_name" name="ticket_name" class="inputModal w-[100%] mb-4" placeholder="Nome do usuário">
                                <input type="email" id="ticket_email" name="ticket_email" class="inputModal w-[100%]  mb-4" placeholder="Email do usuário">
                                <input type="tel" id="ticket_phone" name="ticket_phone" class="inputModal mb-4" placeholder="Telefone do usuário">
                            </div >
                            <div class="flex flex-row w-full">
                                <input type="text" id="ticket_subject" name="ticket_subject" class="inputModal w-[80%] mb-4" placeholder="Assunto">
                                <select id="ticket_category" name="ticket_category" class="inputModal w-full mb-4">
                                    <option value="" selected disabled>Categoria</option>
                                    @foreach ($category as $item)
                                        <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="flex flex-row w-full">
                                <select id="ticket_status" name="ticket_status" class="inputModal  h-auto w-full mb-4">
                                    <option value="" selected disabled>Status</option>
                                    @foreach ($status as $item)
                                        <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                                <select id="ticket_priority" name="ticket_priority" class="inputModal w-full  mb-4">
                                    <option value="" selected disabled>Prioridade</option>
                                    @foreach ($priority as $item)
                                        <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                                <select id="ticket_responsible" name="ticket_responsible" class="inputModal  h-[40px] mb-4">
                                    <option value="" selected disabled>Responsavel</option>
                                       @foreach ($users as $item)
                                            <option value="{{ $item['id'] }}">{{ $item['name'] }}</option>
                                        @endforeach
                                </select>
                            </div>
                            <textarea name="ticket_message" id="ticket_message" class="inputModal w-[200px]" cols="80" rows="10" placeholder="Mensagem do usuário"></textarea>
                        </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=" p-6 rounded-lg  w-[100%] mx-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 ">Ticket</th>
                        <th class="py-2 px-4 ">Nome</th>
                        <th class="py-2 px-4 ">Abertura</th>
                        <th class="py-2 px-4 ">Categoria</th>
                        <th class="py-2 px-4 ">Assunto</th>
                        <th class="py-2 px-4 ">Tipo Sistema</th>
                        <th class="py-2 px-4 ">Status</th>
                        <th class="py-2 px-4 ">Atualização</th>
                        <th class="py-2 px-4 ">Prioridade</th>
                        <th class="py-2 px-4 ">Responsável</th>
                        <th class="py-2 px-4 ">Editar</th>
                    </tr>
                </thead>
                <tbody class="text-blueblack shadow-lg rounded-lg">
                    @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>
                            <td class="py-2 px-4 border-b text-center">{{ucfirst($item->subject)}}</td>
                            <td class="py-2 px-4 border-b text-center">{{ucfirst($item->type_system)}}</td>
                            @if ($item->status->name == "Pendente")
                                        <td class="px-4 border-b rounded-lg  font-semibold text-white bg-purple-600 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-white bg-yellow-400 text-center">{{$item->status->name}}</td>
                                @elseif($item->status->name == "Aguardando retorno")
                                        <td class="py-2 px-4 border-b rounded-md font-semibold text-zinc-900 bg-zinc-400 text-center">{{$item->status->name}}</td>
                                @elseif($item->status->name == "Finalizado")
                                        <td class="py-2 px-4 border-b rounded-md font-semibold bg-green-500 text-green-900 text-center">{{$item->status->name}}</td>
                                @elseif($item->status->name == "Cancelado")
                                        <td class="py-2 px-4 border-b rounded-md font-semibold bg-red-600 text-white 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->priority->name}}</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-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>
            {{$tickets->links()}}

        </div>

    </div>
</div>
@vite(['resources/js/projetos/ticketsOut.js']);
@endsection