@extends('layouts.app')
@section('title', 'Prioridades y SLA')
@section('content')

<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Prioridades y SLA</h1>
    <p class="text-sm text-gray-500 mt-1">Configura los tiempos de respuesta y resolución por prioridad</p>
</div>

@if(session('success'))
<div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-xl text-green-800 text-sm">✓ {{ session('success') }}</div>
@endif

<div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden mb-6">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b border-gray-200">
            <tr>
                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Prioridad</th>
                <th class="px-5 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Respuesta (horas)</th>
                <th class="px-5 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Resolución (horas)</th>
                <th class="px-5 py-3 text-center text-xs font-semibold text-gray-500 uppercase">Acción</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @foreach($priorities as $priority)
            <tr>
                <td class="px-5 py-4">
                    <div class="flex items-center gap-2">
                        <div class="w-3 h-3 rounded-full" style="background-color: {{ $priority->color ?? '#6b7280' }}"></div>
                        <span class="font-medium text-gray-900">{{ $priority->name }}</span>
                    </div>
                </td>
                <td class="px-5 py-4 text-center text-gray-700">{{ $priority->sla_response_hours }}h</td>
                <td class="px-5 py-4 text-center text-gray-700">{{ $priority->sla_resolution_hours }}h</td>
                <td class="px-5 py-4 text-center">
                    <button onclick="openEdit({{ $priority->id }}, '{{ $priority->name }}', {{ $priority->sla_response_hours }}, {{ $priority->sla_resolution_hours }})"
                            class="text-xs text-blue-600 hover:underline font-medium">
                        Editar SLA
                    </button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

{{-- Modal edición --}}
<div id="edit-modal" class="hidden fixed inset-0 bg-black bg-opacity-40 z-50 flex items-center justify-center">
    <div class="bg-white rounded-2xl shadow-xl p-6 w-full max-w-md mx-4">
        <h2 class="text-base font-bold text-gray-900 mb-4">Editar SLA — <span id="modal-name"></span></h2>
        <form method="POST" id="edit-form">
            @csrf @method('PATCH')
            <div class="space-y-4">
                <div>
                    <label class="block text-xs font-medium text-gray-700 mb-1">Tiempo de primera respuesta (horas)</label>
                    <input type="number" name="sla_response_hours" id="modal-response" min="1"
                           class="w-full rounded-xl border-gray-300 text-sm focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-700 mb-1">Tiempo de resolución (horas)</label>
                    <input type="number" name="sla_resolution_hours" id="modal-resolution" min="1"
                           class="w-full rounded-xl border-gray-300 text-sm focus:ring-blue-500 focus:border-blue-500">
                </div>
                <input type="hidden" name="name" id="modal-name-input">
            </div>
            <div class="flex gap-3 mt-6">
                <button type="submit"
                        class="flex-1 py-2.5 bg-blue-600 text-white text-sm font-semibold rounded-xl hover:bg-blue-700 transition">
                    Guardar
                </button>
                <button type="button" onclick="closeEdit()"
                        class="flex-1 py-2.5 bg-gray-100 text-gray-700 text-sm font-semibold rounded-xl hover:bg-gray-200 transition">
                    Cancelar
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function openEdit(id, name, response, resolution) {
    document.getElementById('modal-name').textContent = name;
    document.getElementById('modal-name-input').value = name;
    document.getElementById('modal-response').value = response;
    document.getElementById('modal-resolution').value = resolution;
    document.getElementById('edit-form').action = '/admin/tickets/priorities/' + id;
    document.getElementById('edit-modal').classList.remove('hidden');
}
function closeEdit() {
    document.getElementById('edit-modal').classList.add('hidden');
}
</script>
@endsection
