@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('css')
<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
@endpush

<style>
/* WhatsApp Style Modal */
.whatsapp-modal {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.whatsapp-messages {
    background: #e5ddd5;
    background-image:
        linear-gradient(45deg, transparent 35%, rgba(255,255,255,.05) 35%, rgba(255,255,255,.05) 65%, transparent 65%),
        linear-gradient(-45deg, transparent 35%, rgba(0,0,0,.05) 35%, rgba(0,0,0,.05) 65%, transparent 65%);
    background-size: 20px 20px;
    position: relative;
}

.whatsapp-messages::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.05"/><circle cx="25" cy="25" r="0.5" fill="%23000000" opacity="0.03"/><circle cx="75" cy="75" r="0.5" fill="%23000000" opacity="0.03"/></svg>');
    background-size: 60px 60px;
    pointer-events: none;
}

.whatsapp-messages::-webkit-scrollbar {
    width: 6px;
}

.whatsapp-messages::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
}

.whatsapp-messages::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* DataTables controls alignment (match conversations page behavior) */
.dataTables_wrapper {
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: #67748e;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d2d6da;
    border-radius: 0.5rem;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #495057;
    min-width: 80px;
    margin: 0;
}

.dataTables_wrapper .dataTables_filter input[type="search"] {
    border: 1px solid #d2d6da;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #495057;
    min-width: 250px;
    margin-left: 0 !important;
}

.dataTables_wrapper .d-flex.align-items-center {
    gap: 0.75rem;
}

.dataTables_wrapper .dataTables_info {
    font-size: 0.875rem;
    color: #67748e;
}

@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label {
        flex-wrap: wrap;
    }

    .dataTables_wrapper .dataTables_filter input[type="search"] {
        min-width: 180px;
        width: 100%;
    }
}
</style>

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Contactos'])
    <div class="container-fluid py-4">
        <!-- Filtros y acciones -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                        <h6>Filtros de Búsqueda</h6>
                        <a href="{{ route('contacts.create') }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus"></i> Nuevo Contacto
                        </a>
                    </div>
                    <div class="card-body">
                        <form method="GET" action="{{ route('contacts.index') }}" id="contacts-filter-form">
                            <div class="row g-3">
                                <div class="col-md-7">
                                    <div class="form-group mb-0">
                                        <label for="contacts-search">Buscar</label>
                                        <input type="text" name="search" id="contacts-search" class="form-control filter-input"
                                            placeholder="Buscar por nombre o teléfono..." value="{{ request('search') }}">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group mb-0">
                                        <label for="contacts-lifecycle-stage">Estado</label>
                                        <select name="lifecycle_stage" id="contacts-lifecycle-stage" class="form-control filter-select">
                                            <option value="">Todos los estados</option>
                                            @foreach($lifecycleStages as $key => $label)
                                                <option value="{{ $key }}" {{ $currentStage === $key ? 'selected' : '' }}>
                                                    {{ $label }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="submit" class="btn btn-primary btn-filter mb-0 w-100">
                                        <i class="fas fa-search"></i> Buscar
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Lista de contactos -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between">
                            <h6>Contactos Registrados</h6>
                            <span class="badge bg-gradient-info" id="contacts-total-badge">
                                {{ $contacts->total() }} contacto{{ $contacts->total() !== 1 ? 's' : '' }}
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        @if(session('success'))
                            <div class="alert alert-success mx-4 mt-3">
                                {{ session('success') }}
                            </div>
                        @endif

                        @if(session('error'))
                            <div class="alert alert-danger mx-4 mt-3">
                                {{ session('error') }}
                            </div>
                        @endif

                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0" id="contacts-datatable" style="width:100%">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Contacto</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Estado</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Estadísticas</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($contacts as $contact)
                                    <tr>
                                        <td>
                                            <div class="d-flex px-2 py-1">
                                                <div>
                                                    <div class="avatar avatar-sm me-3 bg-gradient-info">
                                                        <span class="text-white text-xs">{{ strtoupper(substr($contact->name ?: $contact->phone, 0, 1)) }}</span>
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0 text-sm">{{ $contact->name ?: 'Sin nombre' }}</h6>
                                                    <p class="text-xs text-secondary mb-0">
                                                        <i class="fas fa-phone me-1"></i>{{ $contact->phone }}
                                                    </p>
                                                    <p class="text-xs text-secondary mb-0">
                                                        <i class="fas fa-clock me-1"></i>Última actividad: {{ $contact->last_conversation_at ? $contact->last_conversation_at->diffForHumans() : 'N/A' }}
                                                    </p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-{{ $contact->lifecycle_stage_color }}">
                                                {{ $contact->lifecycle_stage_label }}
                                            </span>
                                            @if($contact->source)
                                                <br><small class="text-muted">{{ $contact->source_label }}</small>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column">
                                                <span class="text-xs font-weight-bold text-primary">
                                                    {{ $contact->conversations_count ?? 0 }} conversaciones
                                                </span>
                                                <span class="text-xs text-secondary">
                                                    {{ $contact->appointments_count ?? 0 }} citas
                                                </span>
                                            </div>
                                        </td>
                                        <td class="align-middle text-center">
                                            @include('components.table-actions', ['actions' => [
                                                'view' => [
                                                    'url' => route('contacts.show', $contact),
                                                    'title' => 'Ver detalles',
                                                    'permission' => 'view-contacts'
                                                ],
                                                'edit' => [
                                                    'url' => route('contacts.edit', $contact),
                                                    'title' => 'Editar contacto',
                                                    'permission' => 'edit-contacts'
                                                ],
                                                'delete' => [
                                                    'url' => route('contacts.destroy', $contact),
                                                    'method' => 'DELETE',
                                                    'title' => 'Eliminar contacto',
                                                    'confirm' => '¿Estás seguro de eliminar este contacto? Esta acción no se puede deshacer.',
                                                    'permission' => 'delete-contacts'
                                                ],
                                            ]])
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="4" class="text-center py-4">
                                            <p class="text-sm text-secondary mb-0">No hay contactos registrados</p>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        @include('layouts.footers.auth.footer')
    </div>
@endsection

@push('js')
<!-- jQuery (required for DataTables) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (!window.jQuery || !jQuery.fn.DataTable) {
            return;
        }

        const contactsTable = jQuery('#contacts-datatable').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            pageLength: 20,
            order: [],
            dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex align-items-center"l><"d-flex align-items-center"f>>rt<"d-flex justify-content-between align-items-center mt-3"<"text-muted"i><"d-flex"p>>',
            ajax: {
                url: '{{ route('contacts.index') }}',
                type: 'GET',
                data: function (d) {
                    d.filter_search = jQuery('#contacts-search').val() || '';
                    d.lifecycle_stage = jQuery('#contacts-lifecycle-stage').val() || '';
                },
                dataSrc: function (json) {
                    const totalBadge = document.getElementById('contacts-total-badge');
                    if (totalBadge && typeof json.recordsFiltered === 'number') {
                        const total = json.recordsFiltered;
                        totalBadge.textContent = `${total} contacto${total === 1 ? '' : 's'}`;
                    }
                    return json.data || [];
                }
            },
            language: {
                lengthMenu: 'Mostrar _MENU_ contactos',
                search: 'Buscar contactos:',
                searchPlaceholder: 'Escriba para buscar...',
                info: 'Mostrando _START_ a _END_ de _TOTAL_ contactos',
                infoEmpty: 'Mostrando 0 a 0 de 0 contactos',
                infoFiltered: '(filtrado de _MAX_ contactos totales)',
                paginate: {
                    first: '«',
                    last: '»',
                    next: '›',
                    previous: '‹'
                },
                processing: 'Cargando contactos...',
                emptyTable: 'No hay contactos disponibles',
                zeroRecords: 'No se encontraron contactos que coincidan con la búsqueda'
            },
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'Todos']],
            columns: [
                {
                    data: null,
                    orderable: true,
                    render: function (data, type, row) {
                        return `
                            <div class="d-flex px-2 py-1">
                                <div>
                                    <div class="avatar avatar-sm me-3 bg-gradient-info">
                                        <span class="text-white text-xs">${row.avatar}</span>
                                    </div>
                                </div>
                                <div class="d-flex flex-column justify-content-center">
                                    <h6 class="mb-0 text-sm">${row.name}</h6>
                                    <p class="text-xs text-secondary mb-0">
                                        <i class="fas fa-phone me-1"></i>${row.phone}
                                    </p>
                                    <p class="text-xs text-secondary mb-0">
                                        <i class="fas fa-clock me-1"></i>Última actividad: ${row.last_activity}
                                    </p>
                                </div>
                            </div>
                        `;
                    }
                },
                {
                    data: null,
                    orderable: true,
                    render: function (data, type, row) {
                        const source = row.source ? `<br><small class="text-muted">${row.source_label}</small>` : '';
                        return `
                            <span class="badge bg-${row.lifecycle_stage_color}">
                                ${row.lifecycle_stage_label}
                            </span>
                            ${source}
                        `;
                    }
                },
                {
                    data: null,
                    orderable: true,
                    render: function (data, type, row) {
                        return `
                            <div class="d-flex flex-column">
                                <span class="text-xs font-weight-bold text-primary">
                                    ${row.conversations_count} conversaciones
                                </span>
                                <span class="text-xs text-secondary">
                                    ${row.appointments_count} citas
                                </span>
                            </div>
                        `;
                    }
                },
                {
                    data: 'actions_html',
                    orderable: false,
                    searchable: false
                }
            ],
            columnDefs: [
                { orderable: false, targets: [3] }
            ],
            initComplete: function () {
                jQuery('.dataTables_filter input[type="search"]').attr('placeholder', 'Buscar por nombre o teléfono...');
                jQuery('.dataTables_paginate .paginate_button.previous').attr('title', 'Página anterior');
                jQuery('.dataTables_paginate .paginate_button.next').attr('title', 'Página siguiente');
                jQuery('.dataTables_paginate .paginate_button.first').attr('title', 'Primera página');
                jQuery('.dataTables_paginate .paginate_button.last').attr('title', 'Última página');
            }
        });

        jQuery('#contacts-filter-form').on('submit', function (e) {
            e.preventDefault();
            contactsTable.ajax.reload();
        });

        jQuery('#contacts-lifecycle-stage').on('change', function () {
            contactsTable.ajax.reload();
        });
    });
</script>
@endpush