@extends('layouts.admin')

@section('title', 'Todos los Agentes')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Todos los Agentes</h2>
        <a href="{{ route('admin.agencies.index') }}" class="btn btn-primary">
            <i class="fas fa-briefcase"></i> Ver Agencias
        </a>
    </div>

    @if(session('message'))
        <div class="alert alert-success">{{ session('message') }}</div>
    @endif

    <div class="card">
        <div class="card-body">
            @if($users->count() === 0)
                <p class="text-muted text-center">No hay agentes registrados.</p>
            @else
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Email</th>
                                <th>Teléfono</th>
                                <th>Agencia</th>
                                <th>Posición</th>
                                <th>Estado</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($users as $user)
                            @php($agent = $user->agent)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        @if($agent && $agent->photo_file)
                                            <img src="{{ Storage::url($agent->photo_file) }}"
                                                 class="rounded-circle mr-2"
                                                 style="width: 32px; height: 32px; object-fit: cover;"
                                                 alt="">
                                        @else
                                            <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mr-2"
                                                 style="width: 32px; height: 32px;">
                                                <i class="fas fa-user text-muted"></i>
                                            </div>
                                        @endif
                                        <span>{{ $user->name }}</span>
                                    </div>
                                </td>
                                <td>{{ $user->email }}</td>
                                <td>{{ $agent->phone ?? '-' }}</td>
                                <td>
                                    @if($agent && $agent->agency)
                                        <a href="{{ route('admin.agency.agents.index', $agent->agency_id) }}">
                                            {{ $agent->agency->name }}
                                        </a>
                                    @else
                                        <span class="text-muted">Sin agencia</span>
                                    @endif
                                </td>
                                <td>{{ $agent->position ?? '-' }}</td>
                                <td>
                                    <span class="badge bg-{{ $agent->active ?? true ? 'success' : 'secondary' }}">
                                        {{ $agent->active ?? true ? 'Activo' : 'Inactivo' }}
                                    </span>
                                </td>
                                <td>
                                    <div class="d-flex gap-2">
                                        <button type="button"
                                                class="btn btn-info btn-sm"
                                                data-bs-toggle="modal"
                                                data-bs-target="#assignAgencyModal"
                                                data-user-id="{{ $user->id }}"
                                                data-agent-name="{{ $agent->full_name ?? $user->name }}"
                                                data-current-agency="{{ $agent->agency_id ?? '' }}">
                                            <i class="fas fa-building"></i>
                                        </button>
                                        @if($agent)
                                            <a href="{{ route('admin.agency.agents.edit', [$agent->agency_id ?? 0, $agent]) }}"
                                               class="btn btn-warning btn-sm">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <form action="{{ route('admin.agency.agents.destroy', [$agent->agency_id ?? 0, $agent]) }}"
                                                  method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm"
                                                        onclick="return confirm('¿Eliminar este agente? Se eliminará también su usuario.')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        @else
                                            <span class="text-muted small">Sin perfil</span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    {{ $users->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

{{-- Modal for assigning agency --}}
<div class="modal fade" id="assignAgencyModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" class="modal-content" id="assignAgencyForm">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Asignar Agencia</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <p id="assignAgentName" class="mb-3"></p>
                <div class="mb-3">
                    <label for="agencySelect" class="form-label">Seleccionar Agencia</label>
                    <select name="agency_id" id="agencySelect" class="form-select">
                        <option value="">-- Sin agencia --</option>
                        @foreach($agencies as $agency)
                            <option value="{{ $agency->id }}">{{ $agency->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-primary">Guardar</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var modal = document.getElementById('assignAgencyModal');

    modal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var userId = button.getAttribute('data-user-id');
        var agentName = button.getAttribute('data-agent-name');
        var currentAgency = button.getAttribute('data-current-agency');

        document.getElementById('assignAgentName').textContent =
            'Asignar agencia para: ' + agentName;

        document.getElementById('agencySelect').value = currentAgency;

        var form = document.getElementById('assignAgencyForm');
        form.action = '{{ url("admin/agents/assign-agency") }}/' + userId;
    });
});
</script>
@endpush