@extends('root')

@section('title', 'Phone Book - Contacts')

@push('styles')
<style>
    .contacts-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    .contacts-header h2 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
    }
    .btn-group-actions {
        display: flex;
        gap: 0.5rem;
    }
    .contacts-table-wrapper {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        overflow: hidden;
    }
    .search-bar {
        padding: 1rem;
        border-bottom: 1px solid #eee;
        display: flex;
        gap: 1rem;
    }
    .search-bar input {
        flex: 1;
        max-width: 280px;
        padding: 0.5rem 1rem;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 0.9rem;
    }
    .contacts-table {
        width: 100%;
        border-collapse: collapse;
    }
    .contacts-table th, .contacts-table td {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid #eee;
    }
    .contacts-table th {
        background: #f8f9fa;
        font-weight: 600;
        font-size: 0.85rem;
        color: #666;
    }
    .contacts-table tr:hover {
        background: #f8f9fa;
    }
    .contact-name {
        font-weight: 500;
    }
    .contact-phone {
        color: #666;
        font-size: 0.9rem;
    }
    .tag-badge {
        display: inline-block;
        padding: 2px 8px;
        background: #e8f4fd;
        color: #0066cc;
        border-radius: 12px;
        font-size: 0.75rem;
        margin-right: 4px;
    }
    .group-badge {
        display: inline-block;
        padding: 2px 8px;
        background: #f0fdf4;
        color: #16a34a;
        border-radius: 12px;
        font-size: 0.75rem;
        margin-right: 4px;
    }
    .action-btn {
        padding: 4px 8px;
        border: none;
        background: transparent;
        cursor: pointer;
        color: #666;
        border-radius: 4px;
    }
    .action-btn:hover {
        background: #f0f0f0;
    }
    #datatable-contacts_wrapper .dataTables_filter input { border-radius: 8px; padding: 0.35rem 0.75rem; }
    .empty-state {
        text-align: center;
        padding: 3rem;
        color: #888;
    }
    .empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    <div class="contacts-header">
        <h2><i class="ti ti-address-book me-2"></i>Contacts</h2>
        <div class="btn-group-actions">
            <div class="btn-group btn-group-sm">
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
                    <i class="ti ti-download me-1"></i>Export
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" id="export-csv"><i class="ti ti-file-text me-1"></i>Export CSV</a></li>
                    <li><a class="dropdown-item" href="#" id="export-excel"><i class="ti ti-file-spreadsheet me-1"></i>Export Excel</a></li>
                </ul>
            </div>
            <button class="btn btn-outline-secondary btn-sm" onclick="showImportModal()">
                <i class="ti ti-upload me-1"></i>Import CSV/Excel
            </button>
            <a href="{{ route('client.contacts.create') }}" class="btn btn-primary btn-sm">
                <i class="ti ti-plus me-1"></i>Add Contact
            </a>
        </div>
    </div>

    <div class="contacts-table-wrapper">
        <div class="search-bar">
            <select id="group-filter" class="form-select" style="width: auto;">
                <option value="">All Groups</option>
            </select>
        </div>
        
        <div class="table-responsive">
            <table class="contacts-table" id="datatable-contacts" style="width:100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Groups</th>
                        <th>Tags</th>
                        <th width="100">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Import Contacts (CSV/Excel)</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="import-form" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label class="form-label">File CSV atau Excel</label>
                        <input type="file" name="file" id="import-file" class="form-control" accept=".csv,.txt,.xlsx,.xls" required>
                        <small class="text-muted d-block mt-1">
                            Format: Name, Phone, Email (optional). Maks 10 MB.
                            <a href="{{ route('client.contacts.import.example') }}" class="me-2" download><i class="ti ti-download me-1"></i>Contoh CSV</a>
                            <a href="{{ route('client.contacts.import.example-excel') }}" download><i class="ti ti-download me-1"></i>Contoh Excel</a>
                        </small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Add to Group (optional)</label>
                        <select name="group_id" id="import-group" class="form-select">
                            <option value="">No Group</option>
                        </select>
                    </div>
                </form>

                <!-- Preview Section -->
                <div id="import-preview-section" class="mt-3" style="display:none;">
                    <hr>
                    <h6 class="mb-2"><i class="ti ti-table me-1"></i>Preview Data</h6>
                    <div id="import-preview-info" class="mb-2 text-muted small"></div>
                    <div id="import-preview-errors" class="alert alert-warning py-2 mb-2" style="display:none;"></div>
                    <div class="table-responsive" style="max-height: 200px; overflow-y: auto;">
                        <table class="table table-sm table-bordered">
                            <thead class="table-light sticky-top">
                                <tr><th>#</th><th>Name</th><th>Phone</th><th>Email</th></tr>
                            </thead>
                            <tbody id="import-preview-tbody"></tbody>
                        </table>
                    </div>
                    <div id="import-batch-notice" class="alert alert-info py-2 mt-2 small" style="display:none;">
                        <i class="ti ti-info-circle me-1"></i>
                        <span>File memiliki lebih dari 100 baris. Data akan diproses secara bertahap (batch 100 per batch).</span>
                    </div>
                </div>

                <div id="import-progress" class="mt-3" style="display:none;">
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
                    </div>
                    <small class="text-muted d-block mt-1" id="import-progress-text">Memproses...</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-outline-primary" id="btn-preview" onclick="doPreview()">
                    <i class="ti ti-eye me-1"></i>Preview
                </button>
                <button type="button" class="btn btn-primary" id="btn-import" onclick="doImport()" disabled>
                    <i class="ti ti-upload me-1"></i>Import
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let contactsTable;

$(document).ready(function() {
    loadGroups();

    contactsTable = $('#datatable-contacts').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 25,
        ajax: {
            url: '{{ route("client.contacts.data") }}',
            data: function(d) {
                d.group_id = $('#group-filter').val() || '';
            }
        },
        columns: [
            { data: 'name', name: 'name', className: 'contact-name' },
            { data: 'phone_number', name: 'phone_number', className: 'contact-phone' },
            { data: 'email', name: 'email', render: function(d) { return d || '-'; } },
            { data: 'groups_badge', name: 'groups_badge', orderable: false, searchable: false },
            { data: 'tags_badge', name: 'tags_badge', orderable: false, searchable: false },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ],
        order: [[0, 'asc']],
        language: {
            emptyTable: 'No contacts found',
            zeroRecords: 'No matching contacts',
            processing: '<i class="ti ti-loader ti-spin me-1"></i>Loading...'
        }
    });

    $('#group-filter').on('change', function() {
        contactsTable.ajax.reload();
    });

    $('#export-csv, #export-excel').on('click', function(e) {
        e.preventDefault();
        const format = $(this).attr('id') === 'export-csv' ? 'csv' : 'xlsx';
        const params = new URLSearchParams({ format: format });
        const search = contactsTable.search();
        if (search) params.set('search', search);
        const groupId = $('#group-filter').val();
        if (groupId) params.set('group_id', groupId);
        window.location.href = '{{ route("client.contacts.export") }}?' + params.toString();
    });

    $(document).on('click', '.btn-delete-contact', function() {
        const id = $(this).data('id');
        deleteContact(id);
    });
});

function loadGroups() {
    $.get('{{ route("client.contact-groups.data") }}')
        .done(function(response) {
            let options = '<option value="">All Groups</option>';
            (response.data || []).forEach(g => {
                options += `<option value="${g.id}">${g.name} (${g.contacts_count})</option>`;
            });
            $('#group-filter').html(options);
            $('#import-group').html(options.replace('All Groups', 'No Group'));
        });
}

function deleteContact(id) {
    if (!confirm('Delete this contact?')) return;
    
    $.ajax({
        url: `/client/contacts/${id}`,
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
    }).done(function() {
        showToast('Contact deleted', 'success');
        contactsTable.ajax.reload(null, false);
    }).fail(function(xhr) {
        showToast(xhr.responseJSON?.message || 'Failed to delete', 'error');
    });
}

function showImportModal() {
    $('#importModal').modal('show');
    $('#import-preview-section').hide();
    $('#import-progress').hide();
    $('#btn-import').prop('disabled', true);
    $('#import-form')[0].reset();
}

function doPreview() {
    const fileInput = document.getElementById('import-file');
    if (!fileInput.files.length) {
        showToast('Pilih file terlebih dahulu', 'error');
        return;
    }

    const formData = new FormData($('#import-form')[0]);
    formData.append('_token', '{{ csrf_token() }}');

    $('#btn-preview').prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Loading...');

    $.ajax({
        url: '{{ route("client.contacts.import.preview") }}',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false
    }).done(function(response) {
        $('#import-preview-section').show();
        $('#import-preview-info').text('Total ' + response.total_rows + ' baris data valid. Menampilkan 10 baris pertama.');
        
        if (response.errors && response.errors.length) {
            $('#import-preview-errors').show().html(response.errors.slice(0, 5).map(e => escapeHtml(e)).join('<br>'));
        } else {
            $('#import-preview-errors').hide();
        }

        let tbody = '';
        (response.preview || []).forEach((row, i) => {
            tbody += '<tr><td>' + (i + 1) + '</td><td>' + escapeHtml(row.name) + '</td><td>' + escapeHtml(row.phone) + '</td><td>' + escapeHtml(row.email || '-') + '</td></tr>';
        });
        $('#import-preview-tbody').html(tbody || '<tr><td colspan="4" class="text-center text-muted">Tidak ada data</td></tr>');

        if (response.is_batch) {
            $('#import-batch-notice').show();
        } else {
            $('#import-batch-notice').hide();
        }

        $('#btn-import').prop('disabled', response.total_rows === 0);
    }).fail(function(xhr) {
        showToast(xhr.responseJSON?.message || 'Preview gagal', 'error');
    }).always(function() {
        $('#btn-preview').prop('disabled', false).html('<i class="ti ti-eye me-1"></i>Preview');
    });
}

function doImport() {
    const fileInput = document.getElementById('import-file');
    if (!fileInput.files.length) {
        showToast('Pilih file terlebih dahulu', 'error');
        return;
    }

    const formData = new FormData($('#import-form')[0]);
    formData.append('_token', '{{ csrf_token() }}');

    $('#btn-import').prop('disabled', true);
    $('#btn-preview').prop('disabled', true);
    $('#import-progress').show();
    $('#import-progress .progress-bar').css('width', '50%');
    $('#import-progress-text').text('Memproses import...');

    $.ajax({
        url: '{{ route("client.contacts.import") }}',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false
    }).done(function(response) {
        $('#import-progress .progress-bar').css('width', '100%').removeClass('progress-bar-animated');
        $('#import-progress-text').text('Selesai! ' + response.imported + ' kontak diimport.');
        showToast(response.message, 'success');
        setTimeout(function() {
            $('#importModal').modal('hide');
            contactsTable.ajax.reload(null, false);
        }, 800);
    }).fail(function(xhr) {
        $('#import-progress').hide();
        showToast(xhr.responseJSON?.message || 'Import gagal', 'error');
        $('#btn-import').prop('disabled', false);
        $('#btn-preview').prop('disabled', false);
    });
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text || '';
    return div.innerHTML;
}

function showToast(msg, type) {
    const t = $(`<div class="position-fixed bottom-0 end-0 p-3" style="z-index:9999"><div class="toast show bg-${type==='error'?'danger':'success'} text-white" style="border-radius:12px"><div class="toast-body">${msg}</div></div></div>`);
    $('body').append(t);
    setTimeout(() => t.remove(), 3000);
}
</script>
@endpush