@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="bg-white p-6 rounded-2xl shadow-lg border border-gray-200 mb-6">

                {{-- GRID --}}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">

                    {{-- Código --}}
                    <div class="max-w-[100px]">
                        <label class="block text-xs font-semibold text-gray-500 mb-1">Código</label>
                        <input type="text" name="cod" id="cod"
                            class="w-full border border-gray-200 rounded-lg max-w-[100px] px-3 py-2 focus:ring-2 focus:ring-[#E55133] focus:outline-none"
                            placeholder="Ex: 123">
                    </div>

                    {{-- CNPJ --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1">CNPJ</label>
                        <input type="text" name="cnpj" id="cnpj"
                            class="w-full border border-gray-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-[#E55133] focus:outline-none"
                            placeholder="00.000.000/0001-00">
                    </div>


                     <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1">Empresa</label>
                        <input type="text" name="company" id="company"
                            class="w-full border border-gray-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-[#E55133] focus:outline-none"
                            placeholder="Ex: DFL Transferencia...">
                    </div>

                    {{-- Categoria --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1">Categoria</label>
                        <select name="category" id="category"
                            class="w-full border border-gray-200 rounded-lg px-3 py-2 bg-white focus:ring-2 focus:ring-[#E55133] focus:outline-none">
                            <option value="">Todas</option>
                            @foreach ($category as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Status --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1">Status</label>
                        <select name="status" id="status"
                            class="w-full border border-gray-200 rounded-lg px-3 py-2 bg-white focus:ring-2 focus:ring-[#E55133] focus:outline-none">
                            <option value="">Todos</option>
                            @foreach ($status as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Prioridade --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1">Prioridade</label>
                        <select name="priority" id="priority"
                            class="w-full border border-gray-200 rounded-lg px-3 py-2 bg-white focus:ring-2 focus:ring-[#E55133] focus:outline-none">
                            <option value="">Todas</option>
                            @foreach ($priority as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1">Data Inicial</label>
                        <input type="date" name="dateini" id="dateini" class="w-full border border-gray-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-[#E55133] focus:outline-none">
                    </div>

                      <div>
                        <label class="block text-xs font-semibold text-gray-500 mb-1">Data Final</label>
                        <input type="date" name="datefin" id="datefin" class="w-full border border-gray-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-[#E55133] focus:outline-none">
                    </div>
                </div>

                {{-- AÇÕES --}}
                <div class="flex flex-col md:flex-row justify-end items-center gap-3 mt-6">

                    {{-- LIMPAR --}}
                    <a href="{{route('ticketsout')}}"
                    class="w-full md:w-auto text-center border border-gray-200 text-gray-600 px-5 py-2 rounded-lg hover:bg-gray-100 transition">
                        Limpar
                    </a>

                    {{-- BUSCAR --}}
                    <button type="submit"
                        class="w-full md:w-auto bg-[#172554] hover:bg-[#E55133] text-white px-6 py-2 rounded-lg shadow-md transition">
                        Pesquisar
                    </button>

                </div>

            </form>

            </div>
               <!-- Main modal -->
<div id="default-modal" tabindex="-1" aria-hidden="true"
     class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-sm">

    <div class="relative w-full max-w-4xl mx-4">

        <div class="bg-white rounded-2xl shadow-2xl overflow-hidden">

            {{-- HEADER CLEAN --}}
            <div class="flex items-center justify-between px-8 py-6 border-b border-gray-100">
                <div>
                    <h3 class="text-xl font-semibold text-[#172554]">
                        Atualizar Ticket
                    </h3>
                    <p class="text-sm text-gray-500 mt-1">
                        Edite as informações do chamado
                    </p>
                </div>

                <button type="button"
                    data-modal-hide="default-modal"
                    class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 transition text-gray-500">
                    ✕
                </button>
            </div>

            <form id="formUpdate" name="formUpdate" action="POST">

                <div id="dataTicket"
                     class="px-8 py-8 space-y-8 max-h-[70vh] overflow-y-auto">

                    <input type="hidden" id="ticket_project_id">

                    {{-- BLOCO 1 --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                        <div>
                            <label for="ticket_name" class="text-xs font-medium text-gray-500 uppercase tracking-wide">
                                Nome do usuário
                            </label>
                            <input type="text" id="ticket_name" name="ticket_name"
                                class="mt-2 w-full border border-gray-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-[#E55133]/40 focus:border-[#E55133] outline-none transition"
                                placeholder="Nome do usuário">
                        </div>

                        <div>
                            <label for="ticket_email" class="text-xs font-medium text-gray-500 uppercase tracking-wide">
                                E-mail
                            </label>
                            <input type="email" id="ticket_email" name="ticket_email"
                                class="mt-2 w-full border border-gray-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-[#E55133]/40 focus:border-[#E55133] outline-none transition"
                                placeholder="email@empresa.com">
                        </div>

                    </div>

                    {{-- BLOCO 2 --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                       <div>
                            <label for="ticket_phone" class="text-xs font-medium text-gray-500 uppercase tracking-wide">
                                Telefone
                            </label>

                            <div class="relative mt-2">
                                <input 
                                    type="tel" 
                                    id="ticket_phone" 
                                    name="ticket_phone"
                                    class="w-full border border-gray-200 rounded-xl px-4 py-2.5 pr-12
                                        focus:ring-2 focus:ring-secondary/40 
                                        focus:border-secondary outline-none transition"
                                >

                                <!-- Botão WhatsApp -->
                                <button 
                                    type="button"
                                    onclick="sendWhatsApp()"
                                    class="absolute inset-y-0 right-2 flex flex-col items-center justify-center
                                        w-9 h-9 rounded-lg bg-green-500 text-white
                                        hover:bg-green-600/90 transition"
                                >
                                    <svg class="w-6 h-6 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                    <path fill="currentColor" fill-rule="evenodd" d="M12 4a8 8 0 0 0-6.895 12.06l.569.718-.697 2.359 2.32-.648.379.243A8 8 0 1 0 12 4ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.96 9.96 0 0 1-5.016-1.347l-4.948 1.382 1.426-4.829-.006-.007-.033-.055A9.958 9.958 0 0 1 2 12Z" clip-rule="evenodd"/>
                                    <path fill="currentColor" d="M16.735 13.492c-.038-.018-1.497-.736-1.756-.83a1.008 1.008 0 0 0-.34-.075c-.196 0-.362.098-.49.291-.146.217-.587.732-.723.886-.018.02-.042.045-.057.045-.013 0-.239-.093-.307-.123-1.564-.68-2.751-2.313-2.914-2.589-.023-.04-.024-.057-.024-.057.005-.021.058-.074.085-.101.08-.079.166-.182.249-.283l.117-.14c.121-.14.175-.25.237-.375l.033-.066a.68.68 0 0 0-.02-.64c-.034-.069-.65-1.555-.715-1.711-.158-.377-.366-.552-.655-.552-.027 0 0 0-.112.005-.137.005-.883.104-1.213.311-.35.22-.94.924-.94 2.16 0 1.112.705 2.162 1.008 2.561l.041.06c1.161 1.695 2.608 2.951 4.074 3.537 1.412.564 2.081.63 2.461.63.16 0 .288-.013.4-.024l.072-.007c.488-.043 1.56-.599 1.804-1.276.192-.534.243-1.117.115-1.329-.088-.144-.239-.216-.43-.308Z"/>
                                    </svg>

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


                        <div>
                            <label for="ticket_cnpj" class="text-xs font-medium text-gray-500 uppercase tracking-wide">
                                CNPJ
                            </label>
                            <input type="text" id="ticket_cnpj" name="ticket_cnpj"
                                class="mt-2 w-full border border-gray-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-[#E55133]/40 focus:border-[#E55133] outline-none transition">
                        </div>

                    </div>

                    {{-- BLOCO 3 --}}
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

                        <div class="md:col-span-2">
                            <label for="ticket_subject" class="text-xs font-medium text-gray-500 uppercase tracking-wide">
                                Assunto
                            </label>
                            <input type="text" id="ticket_subject" name="ticket_subject"
                                class="mt-2 w-full border border-gray-200 rounded-xl px-4 py-2.5 focus:ring-2 focus:ring-[#E55133]/40 focus:border-[#E55133] outline-none transition">
                        </div>

                        <div>
                            <label for="ticket_category" class="text-xs font-medium text-gray-500 uppercase tracking-wide">
                                Categoria
                            </label>
                            <select id="ticket_category" name="ticket_category"
                                class="mt-2 w-full border border-gray-200 rounded-xl px-4 py-2.5 bg-white focus:ring-2 focus:ring-[#E55133]/40 focus:border-[#E55133] outline-none transition">
                                <option value="" selected disabled>Selecionar</option>
                                @foreach ($category as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>

                    </div>

                    {{-- BLOCO 4 --}}
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

                        <div>
                            <label for="ticket_status" class="text-xs font-medium text-gray-500 uppercase tracking-wide">
                                Status
                            </label>
                            <select id="ticket_status" name="ticket_status"
                                class="mt-2 w-full border border-gray-200 rounded-xl px-4 py-2.5 bg-white focus:ring-2 focus:ring-[#E55133]/40 focus:border-[#E55133] outline-none transition">
                                <option value="" selected disabled>Selecionar</option>
                                @foreach ($status as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label for="ticket_priority" class="text-xs font-medium text-gray-500 uppercase tracking-wide">
                                Prioridade
                            </label>
                            <select id="ticket_priority" name="ticket_priority"
                                class="mt-2 w-full border border-gray-200 rounded-xl px-4 py-2.5 bg-white focus:ring-2 focus:ring-[#E55133]/40 focus:border-[#E55133] outline-none transition">
                                <option value="" selected disabled>Selecionar</option>
                                @foreach ($priority as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label for="ticket_responsible" class="text-xs font-medium text-gray-500 uppercase tracking-wide">
                                Responsável
                            </label>
                            <select id="ticket_responsible" name="ticket_responsible"
                                class="mt-2 w-full border border-gray-200 rounded-xl px-4 py-2.5 bg-white focus:ring-2 focus:ring-[#E55133]/40 focus:border-[#E55133] 
                                outline-none transition" required>
                                <option value="" selected disabled>Selecionar</option>
                                @foreach ($users as $item)
                                    <option value="{{ $item['id'] }}">{{ $item['name'] }}</option>
                                @endforeach
                            </select>
                        </div>

                    </div>

                    {{-- MENSAGEM --}}
                    <div>
                        <label for="ticket_message" class="text-xs font-medium text-gray-500 uppercase tracking-wide">
                            Mensagem
                        </label>
                        <textarea name="ticket_message" id="ticket_message"
                            rows="5"
                            class="mt-2 w-full border border-gray-200 rounded-xl px-4 py-3 focus:ring-2 focus:ring-[#E55133]/40 focus:border-[#E55133] outline-none transition"
                            placeholder="Descreva o problema..."></textarea>
                    </div>

                </div>

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

                {{-- FOOTER CLEAN --}}
                <div class="flex justify-end gap-4 px-8 py-6 border-t border-gray-100 bg-gray-50">

                    <button data-modal-hide="default-modal" type="button"
                        class="px-6 py-2.5 rounded-xl border border-gray-200 text-gray-600 hover:bg-gray-100 transition">
                        Cancelar
                    </button>

                    <button type="submit" id="btnUpdate"
                        class="px-7 py-2.5 rounded-xl bg-[#172554] text-white hover:bg-[#E55133] transition shadow-sm">
                        Salvar alterações
                    </button>

                </div>

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




            
            
            
                <div class="bg-white p-6 rounded-2xl shadow-lg w-full mx-auto">

                <div class="overflow-x-auto rounded-xl border border-gray-200">
                    <table class="w-full text-sm text-left text-gray-700">

                        {{-- HEADER --}}
                        <thead class="bg-[#172554] text-white text-xs uppercase tracking-wider">
                            <tr>
                                <th class="px-4 py-3">Ticket</th>
                                <th class="px-4 py-3">Nome</th>
                                <th class="px-4 py-3">Empresa</th>
                                <th class="px-4 py-3">Abertura</th>
                                <th class="px-4 py-3">Assunto</th>
                                <th class="px-4 py-3">Sistema</th>
                                <th class="px-4 py-3">Status</th>
                                <th class="px-4 py-3">Atualização</th>
                                <th class="px-4 py-3">Prioridade</th>
                                <th class="px-4 py-3 text-center">Ações</th>
                            </tr>
                        </thead>
                        {{-- BODY --}}
                        <tbody class="divide-y divide-gray-100">

                            @foreach ($tickets as $item)
                                <tr class="hover:bg-gray-50 transition">

                                    {{-- ID --}}
                                    <td class="px-4 py-4 font-bold text-[#172554]">
                                        #{{$item->id}}
                                    </td>

                                    {{-- Nome --}}
                                    <td class="px-4 py-4 font-medium">
                                        {{$item->name}}
                                    </td>
                                    <td class="px-4 py-4 font-medium">
                                        {{$item->company ?? "N/D"}}
                                    </td>

                                    {{-- Abertura --}}
                                    <td class="px-4 py-4 text-gray-500">
                                        {{$item->created_at->format('d/m/Y H:i')}}
                                    </td>

                                    {{-- Categoria --}}
                                 

                                    {{-- Assunto --}}
                                    <td class="px-4 py-4 max-w-[200px] truncate">
                                        {{ucfirst($item->subject)}}
                                    </td>

                                    {{-- Sistema --}}
                                    <td class="px-4 py-4 text-gray-500">
                                        {{ucfirst($item->type_system)}}
                                    </td>

                                    {{-- STATUS --}}
                                    <td class="px-4 py-4">
                                        @php
                                            $statusColors = [
                                                'Pendente' => 'bg-[#E55133]/10 text-[#E55133]',
                                                'Em andamento' => 'bg-yellow-100 text-yellow-700',
                                                'Aguardando retorno' => 'bg-gray-100 text-gray-600',
                                                'Finalizado' => 'bg-green-100 text-green-700',
                                                'Cancelado' => 'bg-red-100 text-red-600',
                                            ];
                                        @endphp

                                        <span class="px-3 py-1 text-xs font-semibold text-center rounded-full {{ $statusColors[$item->status->name] ?? 'bg-gray-100 text-gray-600' }}">
                                            {{$item->status->name}}
                                        </span>
                                    </td>

                                    {{-- Atualização --}}
                                    <td class="px-4 py-4 text-gray-500">
                                        {{$item->updated_at->format('d/m/Y H:i')}}
                                    </td>

                                    {{-- PRIORIDADE --}}
                                    <td class="px-4 py-4">
                                        @php
                                            $priorityColors = [
                                                'Baixa' => 'bg-blue-100 text-blue-700',
                                                'Média' => 'bg-[#E55133]/10 text-[#E55133]',
                                                'Alta' => 'bg-red-100 text-red-700',
                                            ];
                                        @endphp

                                        <span class="px-3 py-1 text-xs font-semibold rounded-full {{ $priorityColors[$item->priority->name] ?? 'bg-gray-100 text-gray-600' }}">
                                            {{$item->priority->name}}
                                        </span>
                                    </td>

                                  

                                    {{-- AÇÃO --}}
                                    <td class="px-4 py-4 text-center">
                                        <button
                                            class="editTicket border border-gray-200 hover:border-[#E55133] hover:bg-[#E55133] hover:text-white transition px-3 py-2 rounded-lg"
                                            data-modal-target="default-modal"
                                            data-modal-toggle="default-modal"
                                            data-id="{{json_encode($item)}}"
                                        >
                                            ⚙️
                                        </button>
                                    </td>

                                </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>

                {{-- PAGINAÇÃO --}}
                <div class="mt-6">
                    {{$tickets->links()}}
                </div>

            </div>

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