@extends('layouts.app')

@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.8/html5-qrcode.min.js"></script>

<style>
    #scanner-container {
        max-width: 400px;
        height: 300px;
        display: none;
        margin: 16px auto 0;
        border: 2px dashed var(--dedi-blue, #E8187A);
        border-radius: 12px;
        overflow: hidden;
        background: var(--dedi-blue-soft, #FDEEF5);
    }
    #scanner {
        width: 100%;
        height: 100%;
    }
    .productimgname .product-img {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        overflow: hidden;
        margin-right: 12px;
        flex-shrink: 0;
    }
    .productimgname .product-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .metric-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.03);
        border: 1px solid rgba(255,255,255,0.8);
        display: flex;
        align-items: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 100%;
    }
    .metric-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    }
    .metric-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        margin-right: 20px;
        flex-shrink: 0;
    }
    .icon-primary { background: rgba(232, 62, 140, 0.1); color: #e83e8c; }
    .icon-info { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
    .icon-success { background: rgba(16, 185, 129, 0.1); color: #10b981; }
    .metric-info { flex-grow: 1; }
    .metric-info h5 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 4px;
        color: #1f2937;
    }
    .metric-info h6 {
        font-size: 14px;
        color: #6b7280;
        margin: 0;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
</style>

<div class="page-header">
    <div class="add-item d-flex">
        <div class="page-title">
            <h4>Gestion des stocks</h4>
            <h6>Consulter et ajuster les stocks du magasin</h6>
        </div>
    </div>
    <ul class="table-top-head">
        <li>
            <a href="javascript:void(0);" onclick="location.reload();" data-bs-toggle="tooltip" title="Rafraîchir">
                <i data-feather="rotate-ccw"></i>
            </a>
        </li>
    </ul>
    <div class="page-btn">
        <button type="button" id="print-pdf-btn" class="btn btn-added">
            <i data-feather="file-text" class="me-2"></i>Imprimer PDF
        </button>
    </div>
    <div class="page-btn">
        <button type="button" id="toggle-scan-btn" class="btn btn-added">
            <i data-feather="maximize" class="me-2"></i>Scanner
        </button>
    </div>
</div>

<link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome/css/fontawesome.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome/css/all.min.css') }}">

<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="metric-card">
            <div class="metric-icon icon-primary">
                <i class="fas fa-money-bill-wave"></i>
            </div>
            <div class="metric-info">
                <h5><span class="counters">{{ number_format($valeurStockAchat, 0, ' ', ' ') }}</span> FCFA</h5>
                <h6>Valeur du stock (Achat)</h6>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="metric-card">
            <div class="metric-icon icon-info">
                <i class="fas fa-tags"></i>
            </div>
            <div class="metric-info">
                <h5><span class="counters">{{ number_format($valeurStockVente, 0, ' ', ' ') }}</span> FCFA</h5>
                <h6>Valeur du stock (Vente)</h6>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="metric-card">
            <div class="metric-icon icon-success">
                <i class="fas fa-chart-line"></i>
            </div>
            <div class="metric-info">
                <h5><span class="counters">{{ number_format($margeStock, 0, ' ', ' ') }}</span> FCFA</h5>
                <h6>Marge potentielle</h6>
            </div>
        </div>
    </div>
</div>

<div class="card table-list-card">
    <div class="card-body">
        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        <div class="table-top mb-3">
            <div class="row g-3 align-items-end w-100">
                <div class="col-md-3">
                    <label class="form-label" for="filter-category">Catégorie</label>
                    <select class="form-control" id="filter-category">
                        <option value="">Toutes les catégories</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}">{{ str_repeat('— ', $category->depth) }}{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label" for="filter-type">Type</label>
                    <select class="form-control" id="filter-type">
                        <option value="">Tous les types</option>
                        @foreach(\App\Models\Product::TYPES as $productType)
                            <option value="{{ $productType }}">{{ $productType }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label" for="search">Recherche</label>
                    <input type="text" id="search" class="form-control" placeholder="Rechercher un produit ou scanner un code-barres...">
                </div>
            </div>
            <div id="scanner-container">
                <div id="scanner"></div>
            </div>
        </div>

        <div class="table-responsive product-list">
            <table class="table" id="stock-manage-table">
                <thead>
                    <tr>
                        <th class="no-sort">
                            <label class="checkboxs">
                                <input type="checkbox" id="select-all">
                                <span class="checkmarks"></span>
                            </label>
                        </th>
                        <th>Produit</th>
                        <th>Catégorie</th>
                        <th>Type</th>
                        <th>Magasin</th>
                        <th>Prix</th>
                        <th>Quantité</th>
                        <th>Créé par</th>
                        <th class="no-sort">Actions</th>
                    </tr>
                </thead>
                <tbody id="product-list">
                    <tr>
                        <td colspan="9" class="text-center text-muted">Chargement des produits...</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="modals-container"></div>

<script>
    window.addEventListener('load', function () {
        let filteredProducts = [];
        let html5QrcodeScanner = null;
        let stockTable = null;

        function destroyStockTable() {
            if (stockTable) {
                stockTable.destroy();
                stockTable = null;
            }
        }

        function initStockTable() {
            destroyStockTable();
            if (!$.fn.DataTable) return;

            stockTable = $('#stock-manage-table').DataTable({
                bFilter: true,
                sDom: 'fBtlpi',
                ordering: true,
                order: [[1, 'asc']],
                columnDefs: [
                    { orderable: false, targets: [0, 8] }
                ],
                language: {
                    search: ' ',
                    sLengthMenu: '_MENU_',
                    searchPlaceholder: 'Rechercher...',
                    info: '_START_ - _END_ sur _TOTAL_ éléments',
                    infoEmpty: '0 - 0 sur 0 élément',
                    emptyTable: 'Aucune donnée disponible dans le tableau',
                    zeroRecords: 'Aucun élément correspondant trouvé',
                    paginate: {
                        next: ' <i class="fa fa-angle-right"></i>',
                        previous: '<i class="fa fa-angle-left"></i> '
                    },
                },
                initComplete: function () {
                    $('.dataTables_filter').appendTo('.search-input');
                },
            });

            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }

        function initializeScanner() {
            html5QrcodeScanner = new Html5QrcodeScanner(
                'scanner',
                { fps: 10, qrbox: { width: 250, height: 250 } },
                false
            );
        }

        $('#toggle-scan-btn').on('click', function () {
            const scannerContainer = $('#scanner-container');
            if (scannerContainer.is(':visible')) {
                scannerContainer.hide();
                if (html5QrcodeScanner) {
                    html5QrcodeScanner.clear();
                    html5QrcodeScanner = null;
                }
                $(this).html('<i data-feather="maximize" class="me-2"></i>Scanner');
            } else {
                scannerContainer.show();
                initializeScanner();
                html5QrcodeScanner.render(
                    (decodedText) => {
                        $('#search').val(decodedText);
                        $('#scanner-container').hide();
                        html5QrcodeScanner.clear();
                        html5QrcodeScanner = null;
                        $('#toggle-scan-btn').html('<i data-feather="maximize" class="me-2"></i>Scanner');
                        if (typeof feather !== 'undefined') feather.replace();
                        performSearch(decodedText);
                    },
                    () => {}
                );
                $(this).html('<i data-feather="x" class="me-2"></i>Fermer');
            }
            if (typeof feather !== 'undefined') feather.replace();
        });

        function getFilterParams() {
            return {
                query: $('#search').val().trim(),
                category_id: $('#filter-category').val(),
                type: $('#filter-type').val(),
            };
        }

        function performSearch(query) {
            const currentMagasinId = "{{ $currentMagasinId ?? '' }}";
            if (!currentMagasinId) {
                destroyStockTable();
                $('#product-list').html('<tr><td colspan="9" class="text-center text-danger">Aucun magasin sélectionné.</td></tr>');
                return;
            }

            const filters = getFilterParams();
            const searchQuery = typeof query === 'string' ? query : filters.query;

            if (searchQuery.length > 0 && searchQuery.length < 3 && !filters.category_id && !filters.type) {
                destroyStockTable();
                $('#product-list').html('<tr><td colspan="9" class="text-center text-muted">Veuillez entrer au moins 3 caractères</td></tr>');
                filteredProducts = [];
                return;
            }

            destroyStockTable();
            $('#product-list').html('<tr><td colspan="9" class="text-center text-muted">Chargement des produits...</td></tr>');

            $.ajax({
                url: "{{ route('stock.products.print') }}",
                type: 'GET',
                data: {
                    query: searchQuery,
                    category_id: filters.category_id,
                    type: filters.type,
                },
                dataType: 'json',
                success: function (response) {
                    filteredProducts = Array.isArray(response) ? response : [];
                    displayProducts(filteredProducts);
                },
                error: function (xhr) {
                    let errorMessage = 'Une erreur s\'est produite lors de la recherche.';
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        errorMessage = xhr.responseJSON.error;
                    }
                    destroyStockTable();
                    $('#product-list').html(`<tr><td colspan="9" class="text-center text-danger">${errorMessage}</td></tr>`);
                    filteredProducts = [];
                }
            });
        }

        $('#filter-category, #filter-type').on('change', function () {
            performSearch();
        });

        let searchTimer = null;
        $('#search').on('input', function () {
            clearTimeout(searchTimer);
            const query = $(this).val().trim();
            searchTimer = setTimeout(function () {
                performSearch(query);
            }, 300);
        });

        performSearch('');

        function cleanString(str) {
            if (!str) return '-';
            return String(str).replace(/<\/?[^>]+(>|$)/g, '').replace(/[\n\r\/]+/g, '').trim();
        }

        function formatCurrency(amount) {
            const cleanAmount = typeof amount === 'string' ? amount.replace(/[^0-9.-]/g, '') : amount;
            const numAmount = parseFloat(cleanAmount);
            if (isNaN(numAmount)) return '0 FCFA';
            return numAmount.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' FCFA';
        }

        function qtyBadge(qty) {
            const n = parseInt(qty, 10) || 0;
            if (n > 10) return 'bg-success';
            if (n > 0) return 'bg-warning';
            return 'bg-danger';
        }

        function buildVariantStockTable(variants) {
            const rows = variants.map(function (variant) {
                const label = variant.label || (Array.isArray(variant.values)
                    ? variant.values.map(v => v.value).join(' / ')
                    : ('Déclinaison #' + variant.id));
                const qty = parseInt(variant.quantity, 10) || 0;
                return `
                    <tr>
                        <td>${cleanString(label)}</td>
                        <td class="text-center"><span class="badge ${qty > 0 ? 'bg-success' : 'bg-danger'}">${qty}</span></td>
                        <td><input type="number" name="variant_quantities[${variant.id}]" class="form-control form-control-sm" min="0" value="0"></td>
                    </tr>
                `;
            }).join('');

            return `
                <p class="text-muted small mb-2">Indiquez la quantité à ajouter pour chaque déclinaison.</p>
                <div class="table-responsive mb-3">
                    <table class="table table-sm align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Déclinaison</th>
                                <th class="text-center" style="width: 90px;">Stock</th>
                                <th style="width: 120px;">À ajouter</th>
                            </tr>
                        </thead>
                        <tbody>${rows}</tbody>
                    </table>
                </div>
            `;
        }

        function buildStockModalBody(product) {
            const variants = Array.isArray(product.variants)
                ? product.variants.filter(v => String(v.status) !== '0')
                : [];

            if (variants.length > 0) {
                return `
                    <div class="mb-3">
                        <label class="form-label">Stock total actuel</label>
                        <input type="text" class="form-control" value="${product.quantity || 0}" readonly disabled>
                    </div>
                    ${buildVariantStockTable(variants)}
                `;
            }

            return `
                <div class="mb-3">
                    <label class="form-label">Stock total actuel</label>
                    <input type="text" class="form-control" value="${product.quantity || 0}" readonly disabled>
                </div>
                <div class="mb-3">
                    <label class="form-label">Quantité à ajouter</label>
                    <p class="text-muted small mb-1">Cette valeur s'ajoute au stock actuel.</p>
                    <input type="number" name="quantity" class="form-control" min="1" value="1" required>
                </div>
            `;
        }

        function displayProducts(products) {
            const productList = $('#product-list');
            const modalsContainer = $('#modals-container');
            destroyStockTable();
            productList.empty();
            modalsContainer.empty();

            if (!products || products.length === 0) {
                productList.append('<tr><td colspan="9" class="text-center text-muted">Aucun produit trouvé</td></tr>');
                return;
            }

            products.forEach(product => {
                const type = product.type ? cleanString(product.type) : '-';
                const categoryName = product.category && product.category.name ? cleanString(product.category.name) : '-';
                const magasinName = product.magasin && product.magasin.name ? cleanString(product.magasin.name) : '-';
                const userName = product.user
                    ? cleanString(`${product.user.nom || ''} ${product.user.prenom || ''}`)
                    : '-';
                const imageUrl = product.image
                    ? `{{ asset('images/products/') }}/${product.image}`
                    : `{{ asset('assets/img/default.jpg') }}`;
                const name = cleanString(product.name);
                const shortName = name.length > 25 ? name.substring(0, 25) + '...' : name;

                productList.append(`
                    <tr>
                        <td>
                            <label class="checkboxs">
                                <input type="checkbox" class="product-checkbox" data-id="${product.id}">
                                <span class="checkmarks"></span>
                            </label>
                        </td>
                        <td>
                            <div class="productimgname d-flex align-items-center">
                                <a href="javascript:void(0);" class="product-img">
                                    <img src="${imageUrl}" alt="${name}">
                                </a>
                                <a href="javascript:void(0);">${shortName}</a>
                            </div>
                        </td>
                        <td>${categoryName}</td>
                        <td>${type}</td>
                        <td>${magasinName}</td>
                        <td>${formatCurrency(product.price)}</td>
                        <td><span class="badge ${qtyBadge(product.quantity)}">${product.quantity || 0}</span></td>
                        <td>${userName}</td>
                        <td class="action-table-data">
                            <div class="edit-delete-action">
                                <a class="me-2 edit-icon p-2" href="#" data-bs-toggle="modal" data-bs-target="#edit-product-${product.id}" title="Ajouter du stock">
                                    <i data-feather="plus-square"></i>
                                </a>
                                <a class="me-2 p-2" href="{{ route('inventory.products.details', '') }}/${product.id}" title="Voir">
                                    <i data-feather="eye"></i>
                                </a>
                                <a class="me-2 edit-icon p-2" href="{{ route('inventory.products.edit', '') }}/${product.id}" title="Modifier">
                                    <i data-feather="edit"></i>
                                </a>
                                <a class="confirm-text p-2" href="javascript:void(0);" onclick="event.preventDefault(); document.getElementById('delete-product-${product.id}').submit();" title="Supprimer">
                                    <i data-feather="trash-2"></i>
                                </a>
                                <form id="delete-product-${product.id}" action="{{ route('inventory.products.delete', '') }}/${product.id}" method="POST" class="d-none">
                                    @csrf
                                    @method('DELETE')
                                </form>
                            </div>
                        </td>
                    </tr>
                `);

                const modalSizeClass = (Array.isArray(product.variants) && product.variants.length > 0) ? 'modal-lg' : '';
                modalsContainer.append(`
                    <div class="modal fade" id="edit-product-${product.id}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered ${modalSizeClass} custom-modal-two">
                            <div class="modal-content">
                                <div class="modal-header border-0 custom-modal-header">
                                    <h4>Ajouter du stock — ${name}</h4>
                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form action="{{ route('inventory.products.update_quantity', '') }}/${product.id}" method="POST">
                                        @csrf
                                        @method('PUT')
                                        ${buildStockModalBody(product)}
                                        <div class="modal-footer-btn">
                                            <button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">Annuler</button>
                                            <button type="submit" class="btn btn-submit">Valider</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                `);
            });

            initStockTable();
        }

        $('#select-all').on('change', function () {
            $('.product-checkbox').prop('checked', $(this).prop('checked'));
        });

        $(document).on('change', '.product-checkbox', function () {
            const total = $('.product-checkbox').length;
            const checked = $('.product-checkbox:checked').length;
            $('#select-all').prop('checked', total === checked && total > 0);
        });

        $('#print-pdf-btn').on('click', function () {
            const currentMagasinId = "{{ $currentMagasinId ?? '' }}";
            if (!currentMagasinId) {
                alert('Aucun magasin sélectionné. Veuillez sélectionner un magasin.');
                return;
            }

            const params = new URLSearchParams({
                query: $('#search').val().trim(),
                category_id: $('#filter-category').val(),
                type: $('#filter-type').val(),
            });

            window.open("{{ route('stock.export.pdf') }}?" + params.toString(), '_blank');
        });
    });
</script>
@endsection