@extends('layouts.app')

@section('title', 'POS Customers')
@section('page_title', 'POS Database: Customers')
@section('page_subtitle', 'Live customer records synced directly from external POS database (niduk22_pos)')

@section('content')
<!-- Navigation Sub-Tabs & Live Status -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px;">
    <div style="display: flex; gap: 8px; flex-wrap: wrap;">
        @permission('view_pos_products')
        <a href="{{ route('pos.products') }}" class="btn btn-outline btn-sm">
            <i class="fa-solid fa-boxes-stacked"></i> Products & Parts
        </a>
        @endpermission
        @permission('view_pos_customers')
        <a href="{{ route('pos.customers') }}" class="btn btn-primary btn-sm">
            <i class="fa-solid fa-address-book"></i> POS Customers
        </a>
        @endpermission
        @permission('view_pos_sales')
        <a href="{{ route('pos.sales') }}" class="btn btn-outline btn-sm">
            <i class="fa-solid fa-receipt"></i> POS Sales / Invoices
        </a>
        @endpermission
    </div>

    <div style="display: flex; gap: 10px; align-items: center;">
        <span class="badge badge-success" style="font-size: 11px;">
            <i class="fa-solid fa-signal"></i> Live POS DB: {{ config('database.connections.pos.database', 'niduk22_pos') }}
        </span>
        @permission('sync_pos_employees', 'manage_settings')
        <form action="{{ route('pos.sync-all') }}" method="POST" style="margin: 0;" onsubmit="return confirm('Sync all customer and sales data from external POS database?');">
            @csrf
            <button type="submit" class="btn btn-outline btn-sm">
                <i class="fa-solid fa-arrows-rotate"></i> Sync Data from POS
            </button>
        </form>
        @endpermission
        @permission('manage_repairs')
        <a href="{{ route('repairs.create') }}" class="btn btn-accent btn-sm">
            <span>+ Book In Machine Repair</span>
        </a>
        @endpermission
    </div>
</div>

<!-- Search & Status Bar -->
<div class="card" style="margin-bottom: 20px;">
    <div class="card-body" style="padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
        <form id="customerFilterForm" style="display: flex; align-items: center; gap: 12px; flex: 1; max-width: 500px;">
            <input type="text" id="customerSearchInput" name="search" class="form-control" placeholder="Search POS customer name, phone, code, city...">
            <button type="submit" class="btn btn-primary">Search</button>
            <button type="button" id="btnResetCustomerSearch" class="btn btn-outline">Reset</button>
        </form>
    </div>
</div>

<!-- Customer Table -->
<div class="card">
    <div class="card-header">
        <div>
            <h3 class="card-title">POS Customer Register</h3>
            <p class="card-subtitle">Local synchronized customer records (4,300+ accounts) via Yajra DataTables</p>
        </div>
        <span class="badge badge-success">● Connected: {{ config('database.connections.pos.database', 'niduk22_pos') }}</span>
    </div>
    <div class="table-responsive" style="padding: 0;">
        <table class="table" id="posCustomersTable" style="width: 100%;">
            <thead>
                <tr>
                    <th>Customer Code</th>
                    <th>Customer Name</th>
                    <th>Contact Phone</th>
                    <th>Email Address</th>
                    <th>Address / City</th>
                    <th style="text-align: right;">Outstanding Balance</th>
                    <th style="text-align: center;">Actions</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        const table = $('#posCustomersTable').DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: "{{ route('pos.customers') }}",
                data: function (d) {
                    d.search_custom = $('#customerSearchInput').val();
                }
            },
            columns: [
                { data: 'code', name: 'customer_code' },
                { data: 'name_formatted', name: 'name' },
                { data: 'phone_formatted', name: 'phone' },
                { data: 'email_formatted', name: 'email' },
                { data: 'address_city', name: 'city' },
                { data: 'balance', name: 'outstanding_balance', className: 'text-end' },
                { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center' }
            ],
            order: [[1, 'asc']]
        });

        $('#customerFilterForm').on('submit', function (e) {
            e.preventDefault();
            table.draw();
        });

        let searchTimeout;
        $('#customerSearchInput').on('keyup', function () {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(function () {
                table.draw();
            }, 350);
        });

        $('#btnResetCustomerSearch').on('click', function () {
            $('#customerSearchInput').val('');
            table.draw();
        });
    });
</script>
@endpush