@extends('admin.layouts.app')

@section('title', 'Gestion des Produits')

@section('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Liste des Produits</h3>
            @if (hasPermissionOrSuperAdmin('create products'))
                <div class="card-tools">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#productModal">
                        <i class="fas fa-plus"></i> Nouveau Produit
                    </button>
                </div>
            @endif
        </div>
        <div class="card-body">
            <div class="mb-3">
                <div class="btn-group">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="exportDropdown"
                        data-toggle="dropdown">
                        <i class="fas fa-download"></i> Exporter
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{{ route('admin.products.export') }}">
                            <i class="fas fa-file-excel"></i> Excel
                        </a>
                        <a class="dropdown-item" href="{{ route('admin.products.export-pdf') }}">
                            <i class="fas fa-file-pdf"></i> PDF
                        </a>
                    </div>
                </div>
                <button class="btn btn-info ml-2" type="button" data-toggle="modal" data-target="#importModal">
                    <i class="fas fa-upload"></i> Importer
                </button>
                <button class="btn btn-danger ml-2" id="bulkDeleteBtn" style="display: none;">
                    <i class="fas fa-trash"></i> Supprimer la sélection
                </button>
            </div>

            <table id="productsTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="selectAll">
                        </th>
                        <th>Image</th>
                        <th>Code</th>
                        <th>Nom</th>
                        <th>Catégorie</th>
                        <th>Stock</th>
                        <th>Prix Achat</th>
                        <th>Prix Vente</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    @include('admin.products.modals.create')
    @include('admin.products.modals.import')
@endsection

@push('scripts')
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // Configure Toastr
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };

        // Initialize DataTable
        let selectedIds = [];
        let table = $('#productsTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('admin.products.getData') }}",
            columns: [{
                    data: null,
                    orderable: false,
                    searchable: false,
                    render: function(data) {
                        return `<input type="checkbox" class="product-checkbox" value="${data.id}">`;
                    }
                },
                {
                    data: 'image_preview',
                    name: 'image',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'code',
                    name: 'code'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'category_name',
                    name: 'category_name'
                },
                {
                    data: 'stock_status',
                    name: 'stock_quantity'
                },
                {
                    data: 'purchase_price',
                    render: function(data) {
                        return parseFloat(data).toFixed(2) + ' Dhs';
                    }
                },
                {
                    data: 'selling_price',
                    render: function(data) {
                        return parseFloat(data).toFixed(2) + ' Dhs';
                    }
                },

                {
                    data: 'actions',
                    name: 'actions',
                    orderable: false,
                    searchable: false
                }
            ],
            order: [
                [2, 'asc']
            ], // Order by code
            language: {
                url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/French.json'
            }
        });

        // Handle slug generation
        function generateSlug(text) {
            return text
                .toLowerCase()
                .replace(/[éèêë]/g, 'e')
                .replace(/[àâä]/g, 'a')
                .replace(/[îï]/g, 'i')
                .replace(/[ôö]/g, 'o')
                .replace(/[ûüù]/g, 'u')
                .replace(/[ç]/g, 'c')
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim()
                .replace(/^-+|-+$/g, '');
        }

        // Handle name input for slug generation
        $('#name').on('input', function() {
            if ($('#code').prop('readonly')) {
                let nameValue = $(this).val();
                let slugValue = generateSlug(nameValue);
                $('#code').val(slugValue);
            }
        });

        // Handle checkbox selection
        $('#selectAll').on('change', function() {
            $('.product-checkbox').prop('checked', $(this).prop('checked'));
            updateBulkDeleteButton();
            updateSelectedIds();
        });

        $(document).on('change', '.product-checkbox', function() {
            updateBulkDeleteButton();
            updateSelectedIds();
        });

        function updateBulkDeleteButton() {
            const checkedCount = $('.product-checkbox:checked').length;
            $('#bulkDeleteBtn').toggle(checkedCount > 0);
        }

        function updateSelectedIds() {
            selectedIds = $('.product-checkbox:checked').map(function() {
                return $(this).val();
            }).get();
        }

        // Handle bulk delete
        $('#bulkDeleteBtn').on('click', function() {
            if (selectedIds.length === 0) return;

            Swal.fire({
                title: 'Êtes-vous sûr?',
                text: "Cette action est irréversible!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui, supprimer!',
                cancelButtonText: 'Annuler'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('admin.products.bulk-delete') }}",
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            ids: selectedIds
                        },
                        success: function(response) {
                            toastr.success(response.success);
                            table.ajax.reload();
                            $('#selectAll').prop('checked', false);
                            updateBulkDeleteButton();
                        },
                        error: function(xhr) {
                            toastr.error(xhr.responseJSON.error || 'Une erreur est survenue');
                        }
                    });
                }
            });
        });

        // Reset form when modal is closed
        $('.modal').on('hidden.bs.modal', function() {
            $(this).find('form')[0].reset();
            clearErrors();
        });

        // Helper functions
        function clearErrors() {
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').html('');
        }

        function displayErrors(errors) {
            $.each(errors, function(field, messages) {
                let input = $(`#${field}`);
                let feedback = $(`#${field}Error`);

                input.addClass('is-invalid');
                feedback.html(messages[0]);
            });
        }

        $('#productForm').on('submit', function(e) {
            e.preventDefault();
            clearErrors();

            let formData = new FormData(this);
            let productId = $('#product_id').val();
            let url = productId ? `/admin/products/${productId}` : '/admin/products';
            let method = productId ? 'POST' : 'POST';

            if (productId) {
                formData.append('_method', 'PUT');
            }

            $.ajax({
                url: url,
                method: method,
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#productModal').modal('hide');
                    toastr.success(response.success);
                    table.ajax.reload();
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        displayErrors(xhr.responseJSON.errors);
                    } else {
                        toastr.error(xhr.responseJSON.error || 'Une erreur est survenue');
                    }
                }
            });
        });

        // Handle edit button click
        $(document).on('click', '.edit-product', function() {
            clearErrors();
            let productId = $(this).data('id');

            $.ajax({
                url: `/admin/products/${productId}/edit`,
                method: 'GET',
                success: function(response) {
                    $('#productModalLabel').text('Modifier Produit');
                    $('#submitBtn').text('Modifier');
                    $('#product_id').val(productId);

                    // Fill form fields with product data
                    let product = response.product;
                    $('#name').val(product.name);
                    $('#code').val(product.code);
                    $('#barcode').val(product.barcode);
                    $('#description').val(product.description);
                    $('#purchase_price').val(product.purchase_price);
                    $('#selling_price').val(product.selling_price);
                    $('#stock_quantity').val(product.stock_quantity);
                    $('#min_stock_level').val(product.min_stock_level);
                    $('#max_stock_level').val(product.max_stock_level);
                    $('#unit').val(product.unit);
                    $('#brand').val(product.brand);
                    $('#location').val(product.location);
                    $('#supplier_id').val(product.supplier_id);

                    // Handle categories
                    if (product.category_id) {
                        $(`#category_${product.category_id}`).prop('checked', true);
                    }

                    $('#productModal').modal('show');
                },
                error: function(xhr) {
                    toastr.error(xhr.responseJSON.error || 'Une erreur est survenue');
                }
            });
        });

        // Handle new product button click
        $('[data-target="#productModal"]').on('click', function() {
            clearErrors();
            $('#productModalLabel').text('Nouveau Produit');
            $('#submitBtn').text('Créer');
            $('#product_id').val('');
            $('#productForm')[0].reset();
        });

        // Handle custom file input
        $('.custom-file-input').on('change', function() {
            let fileName = $(this).val().split('\\').pop();
            $(this).next('.custom-file-label').addClass("selected").html(fileName);
        });
    </script>
@endpush