@extends('layouts.app')

@section('title', 'POS Products & Spare Parts')
@section('page_title', 'POS Database: Products & Spare Parts')
@section('page_subtitle', 'Live catalog of machines, replacement spare parts, and pricing synchronized 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-primary 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-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-products') }}" method="POST" style="margin: 0;">
            @csrf
            <button type="submit" class="btn btn-outline btn-sm" title="Refresh products from POS database">
                <i class="fa-solid fa-arrows-rotate"></i> Sync Products
            </button>
        </form>
        @endpermission
        @permission('manage_custom_products')
        <button type="button" class="btn btn-accent btn-sm" onclick="openCustomProductModal()">
            <i class="fa-solid fa-plus"></i> Add Custom Product / Part
        </button>
        @endpermission
    </div>
</div>

<!-- Stats Counter Grid -->
<div class="stats-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 22px;">
    <div class="stat-card">
        <div class="stat-label">Total Catalog Products</div>
        <div class="stat-value mono" style="color: var(--cdl-primary);">{{ number_format($stats['total']) }}</div>
        <div class="stat-desc">Machines, components & consumables</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">POS Synced Items</div>
        <div class="stat-value mono" style="color: #4F46E5;">{{ number_format($stats['pos_synced']) }}</div>
        <div class="stat-desc">Imported from live POS database</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Workshop Custom Parts</div>
        <div class="stat-value mono" style="color: #D97706;">{{ number_format($stats['custom_parts']) }}</div>
        <div class="stat-desc">Parts added directly for repairs</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Categories</div>
        <div class="stat-value mono" style="color: #059669;">{{ number_format($stats['categories']) }}</div>
        <div class="stat-desc">Parts, local & imported machines</div>
    </div>
</div>

<!-- Search & Filters Toolbar -->
<div class="card" style="margin-bottom: 20px;">
    <div class="card-body" style="padding: 18px 24px;">
        <form id="productFilterForm" style="display: flex; gap: 14px; align-items: center; flex-wrap: wrap;">
            <div style="flex: 2; min-width: 240px;">
                <input type="text" id="productSearchInput" class="form-control" placeholder="Search product name, SKU / part code, brand...">
            </div>

            <div style="flex: 1; min-width: 170px;">
                <select id="productCategoryFilter" class="form-select">
                    <option value="all">All Categories</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat }}">{{ $cat }}</option>
                    @endforeach
                </select>
            </div>

            <div style="flex: 1; min-width: 150px;">
                <select id="productSourceFilter" class="form-select">
                    <option value="all">All Sources</option>
                    <option value="pos">POS Synced</option>
                    <option value="custom">Workshop Custom</option>
                </select>
            </div>

            <div style="display: flex; gap: 8px;">
                <button type="submit" class="btn btn-primary">
                    <i class="fa-solid fa-magnifying-glass"></i> Filter
                </button>
                <button type="button" id="btnResetFilters" class="btn btn-outline">Reset</button>
            </div>
        </form>
    </div>
</div>

<!-- Products DataTable Card -->
<div class="card">
    <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
        <div>
            <h3 class="card-title">Products & Spare Parts Register</h3>
            <p class="card-subtitle">Real-time synchronized parts list with official selling rates for workshop technicians</p>
        </div>
        <span class="badge badge-success">Live Sync Active</span>
    </div>
    <div class="table-responsive" style="padding: 0; overflow-x: auto;">
        <table class="table" id="posProductsTable" style="width: 100% !important;">
            <thead>
                <tr>
                    <th style="min-width: 110px;">Code / SKU</th>
                    <th style="min-width: 260px;">Product / Spare Part Description</th>
                    <th style="min-width: 110px;">Category</th>
                    <th style="text-align: right; min-width: 130px;">Selling Price (Rs.)</th>
                    @if(Auth::user()?->canViewProductCost())
                        <th style="text-align: right; min-width: 110px;">Cost (Rs.)</th>
                    @endif
                    <th style="text-align: center; min-width: 95px;">Status</th>
                    <th style="text-align: center; min-width: 95px;">Source</th>
                    <th style="text-align: center; min-width: 130px;">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

<!-- ================= MODALS ================= -->

<!-- Modal 1: Add Custom Product / Spare Part (Not in POS) -->
<div id="modalAddCustomProduct" class="custom-modal" style="display: none;">
    <div class="custom-modal-backdrop" onclick="closeCustomProductModal()"></div>
    <div class="custom-modal-content" style="max-width: 520px;">
        <div class="custom-modal-header">
            <div>
                <h4 style="font-weight: 800; margin: 0; font-size: 16px; color: var(--cdl-primary); display: flex; align-items: center; gap: 8px;">
                    <i class="fa-solid fa-plus-circle" style="color: var(--cdl-accent);"></i> Add Custom Product / Spare Part
                </h4>
                <p style="font-size: 12px; color: var(--text-muted); margin: 3px 0 0 0;">Add parts or consumables not currently listed in the main POS database</p>
            </div>
            <button type="button" class="close-btn" onclick="closeCustomProductModal()">&times;</button>
        </div>
        <form action="{{ route('pos.products.custom.store') }}" method="POST">
            @csrf
            <div style="padding: 20px 24px;">
                <div class="form-group" style="margin-bottom: 14px;">
                    <label class="form-label" style="font-size: 12px; font-weight: 600;">Part / Product Name <span style="color: red;">*</span></label>
                    <input type="text" name="name" class="form-control" placeholder="e.g. 6205RS Deep Groove Ball Bearing" required>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;">
                    <div>
                        <label class="form-label" style="font-size: 12px; font-weight: 600;">Part Code / SKU</label>
                        <input type="text" name="sku" class="form-control mono" placeholder="Auto-generated if empty">
                    </div>
                    <div>
                        <label class="form-label" style="font-size: 12px; font-weight: 600;">Category</label>
                        <input type="text" name="category_name" class="form-control" placeholder="e.g. Parts, Electrical" list="catList">
                        <datalist id="catList">
                            @foreach($categories as $cat)
                                <option value="{{ $cat }}">
                            @endforeach
                            <option value="Parts">
                            <option value="Bearings">
                            <option value="Motors">
                            <option value="Blades">
                            <option value="Belts">
                        </datalist>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;">
                    <div>
                        <label class="form-label" style="font-size: 12px; font-weight: 600;">Selling Price (Rs.) <span style="color: red;">*</span></label>
                        <input type="number" step="0.01" min="0" name="selling_price" class="form-control mono" placeholder="0.00" required>
                    </div>
                    <div>
                        <label class="form-label" style="font-size: 12px; font-weight: 600;">Unit of Measure</label>
                        <select name="unit" class="form-select">
                            <option value="Pcs" selected>Pcs</option>
                            <option value="Set">Set</option>
                            <option value="Nos">Nos</option>
                            <option value="Meters">Meters</option>
                            <option value="Kg">Kg</option>
                            <option value="Ltr">Ltr</option>
                        </select>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: {{ Auth::user()?->canViewProductCost() ? '1fr 1fr' : '1fr' }}; gap: 12px; margin-bottom: 14px;">
                    <div>
                        <label class="form-label" style="font-size: 12px; font-weight: 600;">Brand / Manufacturer</label>
                        <input type="text" name="brand_name" class="form-control" placeholder="e.g. SKF, NSK, CDL">
                    </div>
                    @if(Auth::user()?->canViewProductCost())
                    <div>
                        <label class="form-label" style="font-size: 12px; font-weight: 600;">Cost Price (Rs.) (Optional)</label>
                        <input type="number" step="0.01" min="0" name="purchase_price" class="form-control mono" placeholder="0.00">
                    </div>
                    @endif
                </div>

                <div class="form-group" style="margin-bottom: 0;">
                    <label class="form-label" style="font-size: 12px; font-weight: 600;">Notes / Technical Specs</label>
                    <textarea name="notes" class="form-control" rows="2" placeholder="e.g. Dimensions, compatible models, supplier info..."></textarea>
                </div>
            </div>
            <div class="custom-modal-footer">
                <button type="button" class="btn btn-outline btn-sm" onclick="closeCustomProductModal()">Cancel</button>
                <button type="submit" class="btn btn-primary btn-sm">+ Save Custom Product</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal 2: Select Part for Repair Job Ticket -->
<div id="modalUseInRepair" class="custom-modal" style="display: none;">
    <div class="custom-modal-backdrop" onclick="closeUseInRepairModal()"></div>
    <div class="custom-modal-content" style="max-width: 500px;">
        <div class="custom-modal-header">
            <div>
                <h4 style="font-weight: 800; margin: 0; font-size: 16px; color: var(--cdl-primary); display: flex; align-items: center; gap: 8px;">
                    <i class="fa-solid fa-wrench" style="color: var(--cdl-accent);"></i> Add Part to Active Repair Job
                </h4>
                <p style="font-size: 12px; color: var(--text-muted); margin: 3px 0 0 0;">Assign this component to an ongoing workshop ticket</p>
            </div>
            <button type="button" class="close-btn" onclick="closeUseInRepairModal()">&times;</button>
        </div>
        <form action="{{ route('pos.products.add-to-repair') }}" method="POST">
            @csrf
            <input type="hidden" name="pos_product_id" id="modalPartProductId">
            <input type="hidden" name="part_name" id="modalHiddenPartName">
            <input type="hidden" name="part_code" id="modalHiddenPartCode">

            <div style="padding: 20px 24px;">
                <!-- Selected Product Summary Box -->
                <div style="background: var(--bg-subtle); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;">
                    <div style="font-size: 11px; text-transform: uppercase; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px;">Selected Component</div>
                    <div id="modalPartNameDisplay" style="font-weight: 700; font-size: 14.5px; margin-top: 3px; color: var(--text-primary);">-</div>
                    <div style="display: flex; gap: 16px; font-size: 12px; margin-top: 5px;">
                        <span>Code: <span id="modalPartSkuDisplay" class="mono font-semibold" style="color: var(--cdl-primary);">-</span></span>
                        <span>Selling Rate: <strong id="modalPartPriceDisplay" class="mono" style="color: #047857;">Rs. 0.00</strong></span>
                    </div>
                </div>

                <div class="form-group" style="margin-bottom: 14px;">
                    <label class="form-label" style="font-size: 12px; font-weight: 600;">Select Repair Ticket <span style="color: red;">*</span></label>
                    @if($activeRepairs->isNotEmpty())
                        <select name="repair_job_id" class="form-select font-semibold" required>
                            <option value="">-- Choose active repair job --</option>
                            @foreach($activeRepairs as $job)
                                <option value="{{ $job->id }}">
                                    {{ $job->job_number }} — {{ $job->customer_name }} ({{ $job->product_name }})
                                </option>
                            @endforeach
                        </select>
                    @else
                        <div style="background: #FEF3C7; border: 1px solid #FDE68A; padding: 10px 14px; border-radius: 6px; font-size: 12px; color: #92400E;">
                            No active repair jobs found. <a href="{{ route('repairs.create') }}" style="font-weight: 700; color: #78350F; text-decoration: underline;">Create a new repair job</a> first.
                        </div>
                    @endif
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px;">
                    <div>
                        <label class="form-label" style="font-size: 12px; font-weight: 600;">Quantity <span style="color: red;">*</span></label>
                        <input type="number" name="quantity" id="modalPartQty" min="1" class="form-control mono font-semibold" value="1" required oninput="calculateModalTotal()">
                    </div>

                    <div>
                        <label class="form-label" style="font-size: 12px; font-weight: 600;">Unit Rate (Rs.) <span style="color: red;">*</span></label>
                        <input type="number" step="0.01" min="0" name="unit_cost" id="modalPartUnitCost" class="form-control mono font-semibold" required oninput="calculateModalTotal()">
                    </div>
                </div>

                <div style="margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;">
                    <span style="font-size: 12px; color: var(--text-muted); font-weight: 600;">Total Line Amount:</span>
                    <span id="modalLineTotalDisplay" class="mono font-bold" style="font-size: 16px; color: var(--cdl-primary);">Rs. 0.00</span>
                </div>
            </div>

            <div class="custom-modal-footer">
                <button type="button" class="btn btn-outline btn-sm" onclick="closeUseInRepairModal()">Cancel</button>
                <button type="submit" class="btn btn-primary btn-sm" {{ $activeRepairs->isEmpty() ? 'disabled' : '' }}>
                    <i class="fa-solid fa-wrench"></i> Add to Repair Job
                </button>
            </div>
        </form>
    </div>
</div>

<style>
/* Custom Modal Overlay Styles */
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
}
.custom-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}
.custom-modal-content {
    position: relative;
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 10px 20px -5px rgba(0, 0, 0, 0.1);
    width: 92%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1;
    animation: modalPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPopIn {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.custom-modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.custom-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-subtle);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.close-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s;
}
.close-btn:hover {
    color: var(--danger);
}

/* DataTable 100% Width & Clean Layout Enforcements */
#posProductsTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse;
}

#posProductsTable_wrapper {
    width: 100%;
}

#posProductsTable thead th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: var(--bg-subtle);
    padding: 12px 14px;
    border-bottom: 2px solid var(--border-color);
    vertical-align: middle;
}

#posProductsTable tbody td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-subtle);
}

#posProductsTable tbody tr:hover {
    background-color: rgba(56, 163, 220, 0.04);
}

/* Flexible Description column & clean wrapping */
#posProductsTable td,
#posProductsTable th {
    white-space: nowrap;
}

#posProductsTable td:nth-child(2),
#posProductsTable th:nth-child(2) {
    white-space: normal;
}

/* Hide duplicate default search box to avoid layout glitches */
#posProductsTable_wrapper .dataTables_filter {
    display: none;
}

#posProductsTable_wrapper .dataTables_length {
    padding: 12px 18px 8px;
    font-size: 12.5px;
    color: var(--text-muted);
}

#posProductsTable_wrapper .dataTables_info,
#posProductsTable_wrapper .dataTables_paginate {
    padding: 14px 18px;
    font-size: 13px;
}
</style>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        const canViewCost = {{ Auth::user()?->canViewProductCost() ? 'true' : 'false' }};

        const tableColumns = [
            { data: 'code', name: 'sku' },
            { data: 'name_formatted', name: 'name' },
            { data: 'category_badge', name: 'category_name' },
            { data: 'price_formatted', name: 'selling_price', className: 'text-end' }
        ];

        if (canViewCost) {
            tableColumns.push({ data: 'purchase_price_formatted', name: 'purchase_price', className: 'text-end' });
        }

        tableColumns.push(
            { data: 'stock_badge', name: 'enable_stock', className: 'text-center' },
            { data: 'source_badge', name: 'is_custom', className: 'text-center' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center' }
        );

        const table = $('#posProductsTable').DataTable({
            serverSide: true,
            processing: true,
            autoWidth: false,
            responsive: false,
            scrollX: false,
            ajax: {
                url: "{{ route('pos.products') }}",
                data: function (d) {
                    d.search_custom = $('#productSearchInput').val();
                    d.category = $('#productCategoryFilter').val();
                    d.source = $('#productSourceFilter').val();
                }
            },
            columns: tableColumns,
            order: [[1, 'asc']]
        });

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

        $('#productCategoryFilter, #productSourceFilter').on('change', function () {
            table.draw();
        });

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

        $('#btnResetFilters').on('click', function () {
            $('#productSearchInput').val('');
            $('#productCategoryFilter').val('all');
            $('#productSourceFilter').val('all');
            table.draw();
        });

        // Delegate "Use in Repair" button click
        $(document).on('click', '.btn-use-in-repair', function () {
            const id = $(this).data('id');
            const sku = $(this).data('sku');
            const name = $(this).data('name');
            const price = parseFloat($(this).data('price')) || 0;

            $('#modalPartProductId').val(id);
            $('#modalHiddenPartName').val(name);
            $('#modalHiddenPartCode').val(sku);
            $('#modalPartNameDisplay').text(name);
            $('#modalPartSkuDisplay').text(sku);
            $('#modalPartPriceDisplay').text('Rs. ' + price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
            $('#modalPartUnitCost').val(price.toFixed(2));
            $('#modalPartQty').val(1);

            calculateModalTotal();
            openUseInRepairModal();
        });

        // Close modals on Escape key
        $(document).on('keydown', function (e) {
            if (e.key === 'Escape') {
                closeCustomProductModal();
                closeUseInRepairModal();
            }
        });
    });

    function calculateModalTotal() {
        const qty = parseFloat($('#modalPartQty').val()) || 0;
        const unit = parseFloat($('#modalPartUnitCost').val()) || 0;
        const total = qty * unit;
        $('#modalLineTotalDisplay').text('Rs. ' + total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
    }

    function openCustomProductModal() {
        $('#modalAddCustomProduct').css('display', 'flex');
    }

    function closeCustomProductModal() {
        $('#modalAddCustomProduct').hide();
    }

    function openUseInRepairModal() {
        $('#modalUseInRepair').css('display', 'flex');
    }

    function closeUseInRepairModal() {
        $('#modalUseInRepair').hide();
    }
</script>
@endpush