@extends('layouts.app')

@section('title', 'POS Sales & Invoices')
@section('page_title', 'POS Database: Sales & Invoices')
@section('page_subtitle', 'Synchronized equipment purchases, sales orders, line items and warranty records from 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-outline 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-primary 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="salesFilterForm" style="display: flex; align-items: center; gap: 12px; flex: 1; max-width: 500px;">
            <input type="text" id="salesSearchInput" name="search" class="form-control" placeholder="Search invoice #, customer name..." value="{{ request('search') }}">
            <input type="hidden" id="salesCustomerId" name="customer_id" value="{{ request('customer_id') }}">
            <button type="submit" class="btn btn-primary">Search</button>
            <button type="button" id="btnResetSalesSearch" class="btn btn-outline">Reset</button>
        </form>
    </div>
</div>

<!-- Sales Invoices Table -->
<div class="card">
    <div class="card-header">
        <div>
            <h3 class="card-title">POS Sales Ledger</h3>
            <p class="card-subtitle">Real-time searchable live invoice transactions (5,600+ records) via Yajra DataTables</p>
        </div>
        <span class="badge badge-success">● Synchronized: {{ config('database.connections.pos.database', 'niduk22_pos') }}</span>
    </div>
    <div class="table-responsive" style="padding: 0;">
        <table class="table" id="posSalesTable" style="width: 100%;">
            <thead>
                <tr>
                    <th>Invoice #</th>
                    <th>Date</th>
                    <th>Customer Name</th>
                    <th>Equipment / Products Purchased</th>
                    <th style="text-align: right;">Total Amount</th>
                    <th>Payment Status</th>
                    <th>Payment Mode</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        const table = $('#posSalesTable').DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: "{{ route('pos.sales') }}",
                data: function (d) {
                    d.search_custom = $('#salesSearchInput').val();
                    d.customer_id = $('#salesCustomerId').val();
                }
            },
            columns: [
                { data: 'inv_number', name: 'invoice_number' },
                { data: 'date', name: 'invoice_date' },
                { data: 'customer_info', name: 'customer_name' },
                { data: 'products', name: 'items.product_name', orderable: false },
                { data: 'amount', name: 'total_amount', className: 'text-end' },
                { data: 'status_badge', name: 'payment_status' },
                { data: 'method', name: 'payment_method' }
            ],
            order: [[1, 'desc']]
        });

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

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

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