{{-- New-Unity ERP | app/Modules/Sales/Resources/Views/customers/index.blade.php | v3.1 | 30/07/2026 --}}
{{-- v3.1 — Agrega botón "Importar desde Excel" en panel-toolbar (→ /customers/import). --}}
{{-- v3.0 — Lazy loading AJAX por tab. Solo carga datos cuando el usuario activa el tab.         --}}
{{--         Una sola instancia DataTables por tab, inicializada on-demand. Sin conflictos.      --}}
{{-- v2.2 — responsive:false para evitar _DT_CellIndex en tabs ocultos. --}}
{{-- v2.1 — Modal Bootstrap para confirmar delete + modal Permission Required + @can. --}}
{{-- v2.0 — Vista rediseñada con tabs por customer_type, DataTables por tab. --}}
{{-- v1.0 — Vista inicial de listado de clientes. --}}

@extends('layouts.vertical', ['pageTitle' => __('customers.customers')])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-users"></i> {{ __('customers.customers') }}
        <small>{{ __('customers.management') }}</small>
    </h1>

</div>
@endsection

@section('content')

@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="fal fa-check-circle me-2"></i><strong>{{ __('customers.success') }}</strong> {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="fal fa-exclamation-circle me-2"></i><strong>{{ __('customers.error') }}</strong> {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

{{-- Stats Row --}}
<div class="row mb-3">
    <div class="col-xl col-md-4 col-sm-6 mb-2">
        <div class="card border-left-primary h-100 py-2">
            <div class="card-body py-2">
                <div class="d-flex align-items-center">
                    <div class="me-3"><i class="fal fa-users fa-2x text-primary opacity-50"></i></div>
                    <div>
                        <div class="text-xs text-muted text-uppercase fw-bold">{{ __('customers.all_customers') }}</div>
                        <div class="h4 mb-0 fw-bold">{{ $grouped['all']->count() }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl col-md-4 col-sm-6 mb-2">
        <div class="card h-100 py-2">
            <div class="card-body py-2">
                <div class="d-flex align-items-center">
                    <div class="me-3"><i class="fal fa-user fa-2x text-success opacity-50"></i></div>
                    <div>
                        <div class="text-xs text-muted text-uppercase fw-bold">{{ __('customers.end_users') }}</div>
                        <div class="h4 mb-0 fw-bold">{{ $grouped['end_user']->count() }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl col-md-4 col-sm-6 mb-2">
        <div class="card h-100 py-2">
            <div class="card-body py-2">
                <div class="d-flex align-items-center">
                    <div class="me-3"><i class="fal fa-boxes fa-2x text-info opacity-50"></i></div>
                    <div>
                        <div class="text-xs text-muted text-uppercase fw-bold">{{ __('customers.wholesale') }}</div>
                        <div class="h4 mb-0 fw-bold">{{ $grouped['wholesale']->count() }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl col-md-4 col-sm-6 mb-2">
        <div class="card h-100 py-2">
            <div class="card-body py-2">
                <div class="d-flex align-items-center">
                    <div class="me-3"><i class="fal fa-truck fa-2x text-warning opacity-50"></i></div>
                    <div>
                        <div class="text-xs text-muted text-uppercase fw-bold">{{ __('customers.distributors') }}</div>
                        <div class="h4 mb-0 fw-bold">{{ $grouped['distributor']->count() }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl col-md-4 col-sm-6 mb-2">
        <div class="card h-100 py-2">
            <div class="card-body py-2">
                <div class="d-flex align-items-center">
                    <div class="me-3"><i class="fal fa-globe fa-2x text-secondary opacity-50"></i></div>
                    <div>
                        <div class="text-xs text-muted text-uppercase fw-bold">{{ __('customers.online_special') }}</div>
                        <div class="h4 mb-0 fw-bold">{{ $grouped['online']->count() + $grouped['special']->count() }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Main Panel --}}
<div class="row">
    <div class="col-xl-12">
        <div id="panel-customers" class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-users me-2"></i> {{ __('customers.directory') }}</h2>
                <div class="panel-toolbar">
                    @can('customers.create')
                    <a href="{{ route('sales.customers.import') }}" class="btn btn-outline-success btn-sm">
                        <i class="bi bi-file-earmark-arrow-up me-1"></i> Importar Excel
                    </a>
                    <a href="{{ route('sales.customers.create') }}" class="btn btn-primary btn-sm">
                        <i class="fal fa-plus me-1"></i> {{ __('customers.newcustomer') }}
                    </a>
                    @else
                    <button type="button" class="btn btn-outline-success btn-sm" onclick="showNoPermission('customers.create')">
                        <i class="bi bi-file-earmark-arrow-up me-1"></i> Importar Excel
                    </button>
                    <button type="button" class="btn btn-primary btn-sm" onclick="showNoPermission('customers.create')">
                        <i class="fal fa-plus me-1"></i> {{ __('customers.newcustomer') }}
                    </button>
                    @endcan
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content">

                    {{-- Tabs --}}
                    <ul class="nav nav-tabs nav-tabs-clean" id="customerTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#tab-all-content" role="tab" data-type="all">
                                <i class="fal fa-list me-1"></i> {{ __('customers.tab_all') }}
                                <span class="badge bg-secondary ms-1">{{ $grouped['all']->count() }}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tab-enduser-content" role="tab" data-type="end_user">
                                <i class="fal fa-user me-1"></i> {{ __('customers.tab_end_user') }}
                                <span class="badge bg-success ms-1">{{ $grouped['end_user']->count() }}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tab-wholesale-content" role="tab" data-type="wholesale">
                                <i class="fal fa-boxes me-1"></i> {{ __('customers.tab_wholesale') }}
                                <span class="badge bg-info ms-1">{{ $grouped['wholesale']->count() }}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tab-distributor-content" role="tab" data-type="distributor">
                                <i class="fal fa-truck me-1"></i> {{ __('customers.tab_distributor') }}
                                <span class="badge bg-warning ms-1">{{ $grouped['distributor']->count() }}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tab-online-content" role="tab" data-type="online">
                                <i class="fal fa-globe me-1"></i> {{ __('customers.tab_online') }}
                                <span class="badge bg-secondary ms-1">{{ $grouped['online']->count() }}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tab-special-content" role="tab" data-type="special">
                                <i class="fal fa-star me-1"></i> {{ __('customers.tab_special') }}
                                <span class="badge bg-danger ms-1">{{ $grouped['special']->count() }}</span>
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content pt-3" id="customerTabsContent">

                        @php
                        $tabIds = [
                            'all'         => 'all',
                            'end_user'    => 'enduser',
                            'wholesale'   => 'wholesale',
                            'distributor' => 'distributor',
                            'online'      => 'online',
                            'special'     => 'special',
                        ];
                        @endphp

                        @foreach($tabIds as $type => $tabId)
                        <div class="tab-pane fade {{ $type === 'all' ? 'show active' : '' }}"
                             id="tab-{{ $tabId }}-content" role="tabpanel">
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover table-striped w-100"
                                       id="dt-{{ $tabId }}">
                                    <thead class="bg-primary-600">
                                        <tr>
                                            <th>{{ __('customers.col_no') }}</th>
                                            <th>{{ __('customers.col_rfc') }}</th>
                                            <th>{{ __('customers.col_business_name') }}</th>
                                            <th>{{ __('customers.col_commercial_name') }}</th>
                                            <th class="text-center">{{ __('customers.col_type') }}</th>
                                            <th>{{ __('customers.col_city') }}</th>
                                            <th>{{ __('customers.col_phone') }}</th>
                                            <th>{{ __('customers.col_email') }}</th>
                                            <th class="text-center">{{ __('customers.col_actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- Populated via AJAX --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @endforeach

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

{{-- Modal: Confirm Delete --}}
<div class="modal fade" id="deleteCustomerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="fal fa-exclamation-triangle me-2"></i>{{ __('customers.deletetitle') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="mb-1">{{ __('customers.delete_confirm') }}</p>
                <p class="fw-bold mb-1" id="deleteCustomerName"></p>
                <p class="text-muted small mb-0">{{ __('customers.delete_undone') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fal fa-times me-1"></i> {{ __('customers.cancel') }}
                </button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fal fa-trash me-1"></i> {{ __('customers.delete') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal: Permission Required --}}
<div class="modal fade" id="noPermissionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title"><i class="fal fa-lock-alt me-2"></i>{{ __('customers.permission_required') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center py-4">
                <i class="fal fa-user-lock mb-3" style="font-size:48px;color:#ffc107;"></i>
                <p class="fw-bold mb-1">{{ __('customers.no_permission') }}</p>
                <p class="text-muted small mb-0" id="noPermissionDetail">
                    {{ __('customers.contact_admin') }}
                </p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fal fa-check me-1"></i> {{ __('customers.understood') }}
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">

<script>
var AJAX_URL     = '{{ route("sales.customers.data") }}';
var SHOW_URL     = '{{ url("sales/customers") }}';
var EDIT_URL     = '{{ url("sales/customers") }}';
var DESTROY_URL  = '{{ url("sales/customers") }}';
var CSRF_TOKEN   = '{{ csrf_token() }}';
var CAN_EDIT     = {{ auth()->user()->can('customers.edit') ? 'true' : 'false' }};
var CAN_DELETE   = {{ auth()->user()->can('customers.delete') ? 'true' : 'false' }};

var typeColors = {
    end_user: 'success', wholesale: 'info', distributor: 'warning',
    online: 'secondary', special: 'danger'
};
var typeLabels = {
    end_user: '{{ __('customers.tab_end_user') }}', wholesale: '{{ __('customers.tab_wholesale') }}', distributor: '{{ __('customers.tab_distributor') }}',
    online: '{{ __('customers.tab_online') }}', special: '{{ __('customers.tab_special') }}'
};

var dtInstances  = {};
var loadedTypes  = {};
var customerToDelete = null;

var tabTypeMap = {
    'all': 'all', 'enduser': 'end_user', 'wholesale': 'wholesale',
    'distributor': 'distributor', 'online': 'online', 'special': 'special'
};

function buildActions(row) {
    var showBtn = '<a href="' + SHOW_URL + '/' + row.id + '" class="btn btn-sm btn-icon btn-outline-primary me-1" title="{{ __('customers.view') }}"><i class="fal fa-eye"></i></a>';
    var editBtn = CAN_EDIT
        ? '<a href="' + EDIT_URL + '/' + row.id + '/edit" class="btn btn-sm btn-icon btn-outline-warning me-1" title="{{ __('customers.edit') }}"><i class="fal fa-edit"></i></a>'
        : '<button class="btn btn-sm btn-icon btn-outline-warning me-1" onclick="showNoPermission(\'customers.edit\')"><i class="fal fa-edit"></i></button>';
    var delBtn = CAN_DELETE
        ? '<button class="btn btn-sm btn-icon btn-outline-danger" onclick="confirmDelete(' + row.id + ', \'' + row.commercial_name.replace(/'/g, "\\'") + '\')" title="{{ __('customers.delete') }}"><i class="fal fa-trash"></i></button>'
        : '<button class="btn btn-sm btn-icon btn-outline-danger" onclick="showNoPermission(\'customers.delete\')"><i class="fal fa-trash"></i></button>';
    return showBtn + editBtn + delBtn;
}

function buildTypeBadge(type) {
    var color = typeColors[type] || 'secondary';
    var label = typeLabels[type] || type;
    return '<span class="badge bg-' + color + '">' + label + '</span>';
}

function loadTab(tabId, type) {
    if (loadedTypes[tabId]) return;
    loadedTypes[tabId] = true;

    var tableId = '#dt-' + tabId;

    $.get(AJAX_URL, { type: type }, function(data) {
        var dtConfig = {
            responsive: false,
            pageLength: 25,
            order: [],
            columnDefs: [{ orderable: false, targets: -1 }],
            dom: '<"row mb-2"<"col-sm-12 col-md-6"B><"col-sm-12 col-md-6"f>>rt<"row mt-2"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
            buttons: [
                { extend: 'excelHtml5', text: '<i class="fal fa-file-excel me-1"></i> {{ __('customers.excel') }}', className: 'btn-sm btn-outline-success' },
                { extend: 'pdfHtml5',   text: '<i class="fal fa-file-pdf me-1"></i> {{ __('customers.pdf') }}',     className: 'btn-sm btn-outline-danger' },
                { extend: 'print',      text: '<i class="fal fa-print me-1"></i> {{ __('customers.print') }}',      className: 'btn-sm btn-outline-primary' }
            ],
            language: { url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/en-GB.json' },
            data: data,
            columns: [
                { data: 'customer_number' },
                { data: 'rfc', render: function(d) { return '<span class="fw-bold">' + (d || '') + '</span>'; } },
                { data: 'name' },
                { data: 'commercial_name' },
                { data: 'customer_type', render: function(d) { return buildTypeBadge(d); } },
                { data: 'city' },
                { data: 'phone' },
                { data: 'email' },
                { data: null, render: function(d, t, row) { return buildActions(row); } }
            ]
        };

        dtInstances[tabId] = $(tableId).DataTable(dtConfig);
    });
}

function confirmDelete(customerId, customerName) {
    customerToDelete = customerId;
    document.getElementById('deleteCustomerName').textContent = customerName;
    new bootstrap.Modal(document.getElementById('deleteCustomerModal')).show();
}

function showNoPermission(action) {
    var detail = document.getElementById('noPermissionDetail');
    detail.textContent = '{{ __('customers.required_permission') }} ' + action + '. {{ __('customers.contact_admin_short') }}';
    new bootstrap.Modal(document.getElementById('noPermissionModal')).show();
}

document.getElementById('confirmDeleteBtn').addEventListener('click', function () {
    if (customerToDelete) {
        var form = document.createElement('form');
        form.method = 'POST';
        form.action = DESTROY_URL + '/' + customerToDelete;
        form.innerHTML = '<input type="hidden" name="_token" value="' + CSRF_TOKEN + '"><input type="hidden" name="_method" value="DELETE">';
        document.body.appendChild(form);
        form.submit();
    }
});

$(document).ready(function () {
    // Cargar tab inicial (All)
    loadTab('all', 'all');

    // Lazy load al activar tabs
    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        var type    = $(e.target).data('type');
        var tabId   = $(e.target).attr('href').replace('#tab-', '').replace('-content', '');
        loadTab(tabId, type);
    });
});
</script>
@endsection