@extends('admin.layouts')
@section('title', 'Products')
@section('header')
<!-- DataTable CSS -->
<link rel="stylesheet" type="text/css" href="{{ asset('/assets/css/datatable/dataTables.bootstrap5.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('/assets/css/datatable/responsive.bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('/assets/css/datatable/buttons.dataTables.min.css') }}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<!-- Page CSS -->
<link rel="stylesheet" type="text/css" href="{{ asset('/assets/css/formILY.css') }}">
<style>
    table td,
    table th {
        vertical-align: middle;
        white-space: normal !important;
    }
</style>
@endsection
@section('content')
@php
$totalPurchaseValue = 0;
$totalSalesValue = 0;
@endphp
<div class="container-fluid page-wrapper category-container">
    <div class="row">
        <div class="d-flex justify-content-between align-items-center">
            <h3 class="page-top-heading">Products</h3>
            <div>
                <a type="button" href="{{ route('add_product') }}" class="btn btn-primary feature-btn">
                    <i class="fa-solid fa-circle-plus me-2"></i>Add Product
                </a>
                <!-- GST Toggle below the button -->
                <div class="form-check form-switch mt-2">
                    <input class="form-check-input" type="checkbox" id="gstToggle"
                        {{ auth()->user()->is_gst ? 'checked' : '' }}>
                    <label class="form-check-label" for="gstToggle"> Enable GST for Admin</label>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3" id="totalsRow">
        <div class="col-md-3">
            <div class="card bg-light">
                <div class="card-body p-2">
                    <strong class="totalPurchase">Total Purchase Value: {{ number_format($totalPurchaseValue, 2) }}</strong>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-light">
                <div class="card-body p-2">
                    <strong class="totalSales">Total Sales Value: {{ number_format($totalSalesValue, 2) }}</strong>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-md-3">
            <select id="categoryFilter" class="form-select">
                <option value="">All Categories</option>
                @foreach($categories as $cat)
                <option value="{{ $cat->category_name }}">{{ $cat->category_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <select id="subcategoryFilter" class="form-select">
                <option value="">All Subcategories</option>
                @foreach($subcategories as $sub)
                <option value="{{ $sub->subcategory_name }}">{{ $sub->subcategory_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-6 text-end">
            <button id="allProductsBtn" class="btn btn-primary me-2">
                <i class="fa-solid fa-list me-1"></i>All Products
            </button>
            <button id="customExcelBtn" class="btn btn-success">
                <i class="fa-solid fa-file-excel me-2"></i>Export as Excel
            </button>
        </div>
    </div>
    <div class="d-flex justify-content-end mb-3">
        <form method="GET" action="{{ route('products') }}">
            <div class="input-group" style="max-width: 350px;">
                <input type="text" name="search" class="form-control"
                    placeholder="Search Variant ID / Name / Barcode" value="{{ $search ?? '' }}">
                <button class="btn btn-outline-primary" type="submit">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </form>
    </div>
    <!-- Table Row -->
    <div class="row mt-5">
        <div class="col-lg-12">
            <div class="card datatable-card">
                <div class="card-body">
                    <table id="data-table" class="table table-bordered table-striped align-middle table-responsive"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th>S/N</th>
                                <th>CATEGORY</th>
                                <th class="d-none d-md-table-cell">SUB CATEGORY</th>
                                <th class="d-none d-lg-table-cell">AGENCY</th>
                                <th>PRODUCT ID</th>
                                <th class="d-none d-lg-table-cell">HSN CODE</th>
                                <th style="max-width: 150px;">TITLE</th>
                                <th>PURCHASE PRICE</th>
                                <th>SALES PRICE</th>
                                <th>S-WALLET</th>
                                <th class="d-none d-md-table-cell">STOCK</th>
                                <th>Variant</th>
                                <th>ACTION</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- Table Row Ends -->
    @foreach ($products as $product)
    <div class="modal fade zoom-in" id="DeleteModal-{{ $product->id }}" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="p-3">
                                <div class="text-center">
                                    <img class="mb-3"
                                        src="{{ asset('/assets/images/icons/delete-icon.svg') }}">
                                    <p class="my-4 are-you-sure">Are You Sure?</p>
                                    <p class="text-muted my-2 are-you-sure-subtext">Are you sure you want to delete
                                        this product: <strong>{{ $product->title }}</strong>?</p>
                                </div>
                                <div class="d-flex align-items-center mt-5 mb-3">
                                    <button data-bs-dismiss="modal"
                                        class="btn btn-light cancel-btn me-3">Cancel</button>
                                    <a href="{{ route('delete_product', ['id' => $product->id]) }}"
                                        class="btn btn-primary yes-btn">
                                        <i class="fa-regular fa-circle-check me-2"></i>Yes, Delete It!
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
    <!-- Update Stock Modal -->
   <div class="modal fade" id="updateStockModal" tabindex="-1" aria-labelledby="updateStockModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <form method="POST" action="{{ route('update_stock') }}">
                    @csrf
                    <input type="hidden" name="id" id="update-stock-id">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Update Stock</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p><strong>Product ID:</strong> <span id="modal-product-id"></span></p>
                            <p><strong>Title:</strong> <span id="modal-product-title"></span></p>
                            <div class="mb-3">
                                <label for="stock" class="form-label">New Stock</label>
                                <input type="number" name="stock" id="update-stock-value" class="form-control"
                                    required min="0">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Update Stock</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    <div class="modal fade" id="barcodeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Barcode</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center" id="barcode-content-to-print">
                    <h5 class="modal-title mb-2" id="modalRole"></h5>
                    <svg id="barcodeModalSvg"></svg>
                    <div class="mt-3 text-center">
                        <p><strong>Item Code:</strong> <span id="modalItemCode"></span></p>
                        <p><strong>Title:</strong> <span id="modalTitle"></span></p>
                        <p><strong>SP:</strong> <span id="modalSellPrice"></span></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="downloadBarcodeBtnModal" class="btn btn-sm btn-primary">Download as PDF</button>
                    <button id="printBarcodeBtnModal" class="btn btn-sm btn-success">Print Label</button>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('footer')
@section('footer')
<!-- jQuery & Bootstrap -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" href="{{ asset('/assets/css/datatable/dataTables.bootstrap5.min.css') }}">
<link rel="stylesheet" href="{{ asset('/assets/css/datatable/responsive.bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('/assets/css/datatable/buttons.dataTables.min.css') }}">
<!-- DataTables JS -->
<script src="{{ asset('/assets/js/datatable/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('/assets/js/datatable/dataTables.bootstrap5.min.js') }}"></script>
<script src="{{ asset('/assets/js/datatable/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('/assets/js/datatable/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('/assets/js/datatable/buttons.html5.min.js') }}"></script>
<script src="{{ asset('/assets/js/datatable/buttons.print.min.js') }}"></script>
<script src="{{ asset('/assets/js/datatable/jszip.min.js') }}"></script>
<script src="{{ asset('/assets/js/datatable/pdfmake.min.js') }}"></script>
<script src="{{ asset('/assets/js/datatable/vfs_fonts.js') }}"></script>
<!-- JSPrintManager -->
<script src="https://cdn.jsdelivr.net/npm/jsprintmanager@7.0.0/JSPrintManager.min.js"></script>
<!-- JsBarcode -->
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<!-- jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
    const userRole = "{{ Auth::user()->role ?? 'admin' }}";
    const companyName = "{{ Auth::user()->branch_name 

        ?? Auth::user()->name 

        ?? 'My Company' }}";
    JSPM.JSPrintManager.auto_restart = true;
    document.addEventListener('DOMContentLoaded', function() {
        let table = $('#data-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            lengthMenu: [
                [10, -1],
                [10, "All"]
            ],
            pageLength: 10, // default 10 rows per page
            ajax: {
                url: "{{ route('products2Data') }}",
                data: function(d) {
                    d.category = $('#categoryFilter').val();
                    d.subcategory = $('#subcategoryFilter').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'category_name',
                    name: 'category_name'
                },
                {
                    data: 'subcategory_name',
                    name: 'subcategory_name'
                },
                {
                    data: 'brand',
                    name: 'brand'
                },
                {
                    data: 'product_id',
                    name: 'product_id'
                },
                {
                    data: 'hsn_code',
                    name: 'hsn_code'
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'purchase_price',
                    name: 'purchase_price'
                },
                {
                    data: 'sell_price',
                    name: 'sell_price'
                },
                {
                    data: 'shop_wallet',
                    name: 'shop_wallet'
                },
                {
                    data: 'total_stock',
                    name: 'total_stock',
                    orderable: false
                },
                {
                    data: 'variant',
                    name: 'variant',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            dom: "<'row mb-2'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6 d-flex justify-content-end'Bf>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row mt-2'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            buttons: [{
                extend: 'excelHtml5',
                title: 'Products Export',
                exportOptions: {
                    columns: ':not(:last-child)' // Exclude action column
                },
                className: 'd-none' // Hide the button in the UI
            }]
        });
        table.on('xhr', function() {
            var json = table.ajax.json(); // get raw JSON returned by server
            if (json) {
                $('.totalPurchase').text('Total Purchase Value: ' + parseFloat(json.totalPurchaseValue).toFixed(2));
                $('.totalSales').text('Total Sales Value: ' + parseFloat(json.totalSalesValue).toFixed(2));
            }
        });


        var allProducts = @json($products); 

    $('#categoryFilter').on('change', function () {
        var selectedCategory = $(this).val();

        // Filter subcategories based on selected category
        var subcategories = allProducts
            .filter(p => selectedCategory === "" || p.category_name === selectedCategory)
            .map(p => p.subcategory_name)
            .filter((value, index, self) => self.indexOf(value) === index); // unique

        // Populate subcategory dropdown (ID FIXED هنا 👇)
        var subCatSelect = $('#subcategoryFilter');
        subCatSelect.empty().append('<option value="">All Subcategories</option>');

        subcategories.forEach(function (sub) {
            subCatSelect.append('<option value="' + sub + '">' + sub + '</option>');
        });

        // optional: reload datatable
        $('#data-table').DataTable().ajax.reload();
    });
        // 🔹 Category + Subcategory filter
        $('#categoryFilter, #subcategoryFilter').on('change', function() {
            table.ajax.reload();
        });
        // 🔹 All Products button (FIXED)
        $('#allProductsBtn').on('click', function() {
            $('#categoryFilter').val('');
            $('#subcategoryFilter').val('');
            table.ajax.reload();
        });
        // 🔹 Custom Excel button (FIXED)
        $('#customExcelBtn').on('click', function() {
            if (table.buttons().count() > 0) {
                table.button(0).trigger();
            } else {
                alert('Excel export not initialized!');
            }
        });
        // 🔹 Barcode modal
        $(document).on('click', '.viewBarcodeBtn', function() {
            const itemCode = $(this).data('id');
            const title = $(this).data('title');
            const sellPrice = $(this).data('sellprice');
            JsBarcode("#barcodeModalSvg", itemCode, {
                format: "CODE128",
                width: 2,
                height: 50,
                displayValue: true
            });
$('#modalRole').text(companyName);

            $('#modalItemCode').text(itemCode);
            $('#modalTitle').text(title);
            $('#modalSellPrice').text(sellPrice);
            new bootstrap.Modal(document.getElementById('barcodeModal')).show();
        });
        $(document).on('click', '.updateStockBtn', function () {
    const id        = $(this).data('id');         
    const productId = $(this).data('productid'); 
    const title     = $(this).data('title');     
    const stock     = $(this).data('stock');     
    $('#update-stock-id').val(id);            
    $('#modal-product-id').text(productId);     
    $('#modal-product-title').text(title);  
    $('#update-stock-value').val(stock);      
});
        // Print Barcode
        const printBtn = document.getElementById('printBarcodeBtnModal');
        if (printBtn) {
            printBtn.addEventListener('click', function() {
                const itemCode = document.getElementById('modalItemCode').innerText;
                const title = document.getElementById('modalTitle').innerText;
                const sellPrice = document.getElementById('modalSellPrice').innerText;
                const barcodeSvg = document.getElementById('barcodeModalSvg').outerHTML;
                const companyName = document.getElementById('modalRole').innerText;
                const numberOfLabelsToPrint = 3; // 3x4 sheet
                const labelHTML = `
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Print Barcode</title>
<style>
@page {
    size: auto;
    margin: 0;
}
  html, body {
    width: 105mm;
    margin: 0;
    padding: 0;
    font-family: poppin;
}
.label-container {
    display: grid;
    grid-template-columns: 35mm 35mm 35mm;
    grid-auto-rows: 25mm;
    width: 105mm;
    padding: 0;
    margin: 0;
}
    /* Single label */
    .label {
        width: 35mm;
        height: 25mm;
        box-sizing: border-box;
        padding: 0.3mm 0.5mm; /* FIXED - better fit */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
        text-align: center;
    }
    /* Barcode */
    .barcode-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .barcode-wrapper svg {
        width: 90%;
        height: auto;
        max-height: 10mm; /* FIXED - prevents clipping */
    }
    .company { 
        margin-top: 15px;
        font-size: 6px; 
        font-weight: bold; 
        line-height: 1;
    }
    .item-code { 
        font-size: 7px; 
        font-weight: bold; 
        margin-top: 0.5mm; /* FIXED for spacing */
        line-height: 1; 
    }
    .title { 
        font-size: 6px; 
        line-height: 1; 
    }
    .price { 
        font-size: 7px; 
        font-weight: bold; 
        line-height: 1; 
    }
</style>
</head>
<body>
    <div class="label-container">
        ${[...Array(numberOfLabelsToPrint)].map(() => `
                                                        <div class="label">
                                                            <div class="company">${companyName.slice(0, 25)}</div><br>
                                                            <div class="title">${title.slice(0, 25)}</div>
                                                            <div class="barcode-wrapper">${barcodeSvg}</div>
                                                            <div class="price">RS: ${sellPrice}</div>
                                                        </div>
                                                    `).join('')}
    </div>
</body>
</html>
`;
                const printWindow = window.open('', '_blank', 'width=900,height=1200');
                printWindow.document.write(labelHTML);
                printWindow.document.close();
                printWindow.onload = function() {
                    printWindow.print();
                    setTimeout(() => printWindow.close(), 500);
                };
            });
        }
        document.getElementById('downloadBarcodeBtnModal').addEventListener('click', function() {
            const {
                jsPDF
            } = window.jspdf;
            const pdf = new jsPDF('l', 'mm', [110, 25]);
            const companyEl = document.getElementById('modalRole');
            const companyName = companyEl ? companyEl.innerText : 'Company';
            const itemCode = document.getElementById('modalItemCode').innerText;
            const title = document.getElementById('modalTitle').innerText;
            const sellPrice = document.getElementById('modalSellPrice').innerText;
            const canvas = document.createElement('canvas');
            canvas.width = 400;
            canvas.height = 80;
            JsBarcode(canvas, itemCode, {
                format: "CODE128",
                width: 2,
                height: 50,
                displayValue: false
            });
            const imgData = canvas.toDataURL("image/png");
            const labelW = 110 / 3;
            function drawLabel(xOffset) {
                const centerX = xOffset + labelW / 2;
                let y = 2;
                pdf.setFontSize(6.5);
                pdf.text(companyName.slice(0, 25), centerX, y, {
                    align: 'center'
                });
                y += 1;
                pdf.addImage(imgData, 'PNG', centerX - 15, y, 30, 10);
                y += 11;
                pdf.setFontSize(6);
                pdf.text(itemCode, centerX, y, {
                    align: 'center'
                });
                y += 2.5;
                pdf.text(title.slice(0, 25), centerX, y, {
                    align: 'center'
                });
                y += 2.5;
                pdf.text(`SP: ${sellPrice}`, centerX, y, {
                    align: 'center'
                });
            }
            drawLabel(0);
            drawLabel(labelW);
            drawLabel(labelW * 2);
            pdf.save(`barcode_${itemCode}.pdf`);
        });
    });
</script>
@endsection
<script src="https://cdn.jsdelivr.net/npm/jsprintmanager@7.0.0/JSPrintManager.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
    $('#gstToggle').on('change', function() {
        const isGst = $(this).is(':checked');
        $.ajax({
            url: "{{ route('admin.update_gst') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                is_gst: isGst
            },
            success: function(response) {
                if (response.success) {
                    alert('GST status updated successfully!');
                } else {
                    alert('Failed to update GST status.');
                }
            },
            error: function() {
                alert('Something went wrong!');
            }
        });
    });
</script>
<script>
    $('#noteToggle').on('change', function() {
        const isNote = $(this).is(':checked');
        $.ajax({
            url: "{{ route('admin.update_note') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                is_note: isNote
            },
            success: function(response) {
                if (response.success) {
                    alert('Note status updated successfully!');
                } else {
                    alert('Failed to update note status.');
                }
            },
            error: function() {
                alert('Something went wrong!');
            }
        });
    });
</script>
<!-- Datatable JS -->
<script type="text/javascript" src="{{ asset('/assets/js/datatable/dataTables.bootstrap5.min.js') }}"></script>
{{-- <script type="text/javascript" src="{{asset('/assets/js/datatable/datatables.init.js')}}"></script> --}}
<script type="text/javascript" src="{{ asset('/assets/js/datatable/dataTables.responsive.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/assets/js/datatable/jquery.dataTables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/assets/js/datatable/dataTables.buttons.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/assets/js/datatable/buttons.html5.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/assets/js/datatable/buttons.print.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/assets/js/datatable/jszip.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/assets/js/datatable/pdfmake.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/assets/js/datatable/vfs_fonts.js') }}"></script>
@endsection