@extends('layouts.admin')

@section('title' , 'Products')

@section('breadcrumb-item')
    <li class="breadcrumb-item active">Products List</li>
@endsection

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .column-checkbox { 
            margin-bottom: 10px; 
        }
        .column-checkbox label {
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-bottom: 0;
        }
        .column-checkbox input[type="checkbox"] { 
            margin-right: 8px; 
        }
    </style>
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-theme">
            @php
                if ($pagination)
                    $print_products = \App\Product::all();
                else
                    $print_products = $products;
            @endphp
            <p class="h5 pt-2 mb-0 float-left"><i class="fa fa-list pr-1"></i>Products List</p>
            <a href="{{ route('admin.product-stock.print')}}">
                <button class="btn btn-primary float-right ml-2" type="button" ><i class="fa fa-ad"></i>Generate Order</button>
            </a>
            <form action="{{ route('admin.product-all.print') }}" method="POST" id="printForm">
    @csrf
    <input hidden value="{{ json_encode($print_products) }}" name="print_products">
    <input type="hidden" name="selected_columns" id="selectedColumnsInput">
    <button class="btn btn-sm btn-primary float-right ml-2" type="button" onclick="printWithSelectedColumns()">
        <i class="fa fa-print"></i>
    </button>
</form>
            {{-- NEW COLUMN FILTER BUTTON --}}
            <button class="btn btn-sm btn-info float-right ml-2" type="button" data-toggle="modal" data-target="#columnModal">
                <i class="fa fa-eye"></i> Show Columns
            </button>
            <a href="{{ route('admin.product.create') }}" data-toggle="tooltip" data-placement="bottom"
                title="Add new product" class="btn btn-info float-right ml-2">
             <i class="fa fa-plus"></i>
         </a>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.products.search') }}" method="GET">
                @csrf
                <div class="row">
                    <div class="col-3">
                        <div class="form-group">
                            <label>Companies</label>
                            <select class="form-control js-example-theme-multiple" name="company_names[]" multiple>
                                @foreach(_companies() as $company_name)
                                    <option value="{{ $company_name }}"
                                        {{ isset($company_names) && in_array($company_name, $company_names) ? 'selected' : '' }}>
                                        {{ $company_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="form-group">
                            <label>Products</label>
                            <select class="form-control js-example-theme-multiple" name="product_ids[]" multiple>
                                @foreach(_products() as $product)
                                    <option value="{{ $product->id }}"
                                        {{ isset($product_ids) && in_array($product->id, $product_ids) ? 'selected' : '' }}>
                                        {{ $product->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-2">
                        <div class="form-group">
                            <label>Status</label>
                            <select class="form-control" name="status">
                                <option value="">All</option>
                                @foreach($statuses as $key => $value)
                                    <option value="{{ $value }}"
                                        {{ isset($status) ? $status == $value ? 'selected' : '' : '' }}>
                                        {{ $key }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="input-group-append">
                        <button style="height: 35px; margin-top: 30px;" class="btn btn-success" type="submit" ><i class="fa fa-search"></i></button>
                    </div>

                </div>
            </form>
            <table class="table table-hover" id="productsTable">
                <thead>
                <tr>
                    <th data-column="serial">#</th>
                    <th data-column="image">Image</th>
                    <th data-column="name">Name</th>
                    <th data-column="company">Company Name</th>
                    <th data-column="size">Size</th>
                    <th data-column="distributor_price">Distributor Price</th>
                    @if(_isSuperAdmin())
                        <th data-column="cost_price">Cost Price</th>
                    @endif
                    <th data-column="mrp">MRP</th>
                    <th data-column="sale_tax">Sale Tax</th>
                    <th data-column="additional_sale_tax">Additional Sale Tax</th>
                    <th data-column="stock">Stock</th>
                    <th data-column="minimum_stock">Minimum Stock</th>
                    @if (_isSuperAdmin())
                    <th data-column="total_cp">Total CP</th>
                    <th data-column="total_dp">Total DP</th>  
                    @endif
                    <th data-column="total_value">Total Value</th>
                    <th data-column="status">Status</th>
                    <th data-column="action">Action</th>
                </tr>
                </thead>
                <tbody>
                @forelse($products as $index =>  $product)
                    @php
                        $out_of_stock = false;

                        if ($product->stock <= $product->minimum_stock)
                            $out_of_stock = true;
                    @endphp
                    <tr>
                        @if($pagination)
                        <td>{{ $products->firstItem() + $index }}</td>
                        @else
                        <td>{{ $loop->iteration }}</td>
                        @endif
                        <td>
                            <img class="img app-thumbnail" src="{{asset($product->image ?? null)  }}" alt="{{ $product->name }}">
                        </td>
                        <td>{{$product->name}}</td>
                        <td>{{$product->company_name}}</td>
                        <td>{{$product->size}}</td>
                        <td>{{$product->distributor_price}}</td>
                            @if( _isSuperAdmin() )
                                <td>{{$product->cost_price ?? $product->distributor_price}}</td>
                            @endif
                        <td>{{$product->mrp}}</td>
                        <td>{{$product->sale_tax ?? '0'}}</td>
                        <td>{{$product->additional_sale_tax ?? '0'}}</td>
                        <td @if($out_of_stock) style="background-color: red; color: white" @endif>{{$product->stock}}</td>
                        <td class="text-center">{{$product->minimum_stock}}</td>
                        @if (_isSuperAdmin())
                        <td> {{($product->cost_price ?? $product->distributor_price) * $product->stock}} </td>
                        <td> {{$product->distributor_price * $product->stock}} </td>
                        @endif
                        <td>{{$product->distributor_price * $product->stock}}</td>
                        <td>{{$product->status_name}}</td>
                        <td>
                            <div class="btn-group">
                                <a href="{{route('admin.product.edit', ['id' => $product->id, 'page' => request()->get('page', 1)])}}"
                                   class="btn btn-sm btn-outline-success"><i class="fa fa-pencil"></i></a>
                                @include('includes.modals.delete', ['model' => 'product', 'route' => 'admin.product.delete'])
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <th colspan="17" class="text-center">No Products Yet</th>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        <div class="pagination justify-content-center mb-4">
            @if($pagination)
                {{ $products->appends(request()->query())->links() }}
            @endif
        </div>
    </div>

    {{-- Column Filter Modal --}}
    <div class="modal fade" id="columnModal" tabindex="-1" role="dialog" aria-labelledby="columnModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="columnModalLabel">
                        <i class="fa fa-eye"></i> Select Columns to Show
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="max-height: 400px; overflow-y: auto;">
                    <div class="row">
                        <div class="col-12 mb-3">
                            <button type="button" class="btn btn-sm btn-outline-primary mr-2" onclick="showAllColumns()">
                                <i class="fa fa-check-square"></i> Show All
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="hideAllColumns()">
                                <i class="fa fa-square"></i> Hide All
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-warning ml-2" onclick="resetToDefault()">
                                <i class="fa fa-refresh"></i> Reset Default
                            </button>
                        </div>
                    </div>
                    <div class="row" id="columnCheckboxes">
                        {{-- Dynamic checkboxes will be inserted here --}}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fa fa-times"></i> Cancel
                    </button>
                    <button type="button" class="btn btn-primary" onclick="applyColumnFilter()">
                        <i class="fa fa-check"></i> Apply
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.js-example-theme-multiple').select2({
                theme: 'classic',
            });
        });

        // Column configuration with default visibility
        const columnDefaults = {
            'serial': true,      
            'image': true,      
            'name': true,        
            'company': true,     
            'size': true,        
            'distributor_price': true,  
            'cost_price': true,         
            'mrp': true,                 
            'sale_tax': true,           
            'additional_sale_tax': true, 
            'stock': true,               
            'minimum_stock': true,       
            'total_cp': true,           
            'total_dp': true,           
            'total_value': true,        
            'status': true,              
            'action': true               
        };

        // Initialize modal when shown
        $(document).on('show.bs.modal', '#columnModal', function() {
            generateColumnCheckboxes();
        });

        function generateColumnCheckboxes() {
            const container = document.getElementById('columnCheckboxes');
            if (!container) return;
            
            container.innerHTML = '';
            const table = document.getElementById('productsTable');
            if (!table) return;
            
            const headers = table.querySelectorAll('thead th');
            
            headers.forEach((header, index) => {
                const colDiv = document.createElement('div');
                colDiv.className = 'col-md-6 column-checkbox';
                
                const checkboxId = `checkbox_${index}`;
                const columnKey = header.getAttribute('data-column') || `col_${index}`;
                
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.id = checkboxId;
                checkbox.value = index;
                checkbox.setAttribute('data-column', columnKey);
                
                const isVisible = !header.style.display || header.style.display !== 'none';
                checkbox.checked = isVisible;
                
                const label = document.createElement('label');
                label.htmlFor = checkboxId;
                label.appendChild(checkbox);
                label.appendChild(document.createTextNode(' ' + header.textContent.trim()));
                
                colDiv.appendChild(label);
                container.appendChild(colDiv);
            });
        }

        function showAllColumns() {
            const checkboxes = document.querySelectorAll('#columnCheckboxes input[type="checkbox"]');
            checkboxes.forEach(checkbox => checkbox.checked = true);
        }

        function hideAllColumns() {
            const checkboxes = document.querySelectorAll('#columnCheckboxes input[type="checkbox"]');
            checkboxes.forEach(checkbox => checkbox.checked = false);
        }

        function resetToDefault() {
            const checkboxes = document.querySelectorAll('#columnCheckboxes input[type="checkbox"]');
            checkboxes.forEach(checkbox => {
                const columnKey = checkbox.getAttribute('data-column');
                checkbox.checked = columnDefaults[columnKey] !== undefined ? columnDefaults[columnKey] : true;
            });
        }

        function applyColumnFilter() {
            try {
                const table = document.getElementById('productsTable');
                if (!table) {
                    console.error('Table not found');
                    return;
                }
                
                const headers = table.querySelectorAll('thead th');
                const rows = table.querySelectorAll('tbody tr');
                const checkboxes = document.querySelectorAll('#columnCheckboxes input[type="checkbox"]');
                
                checkboxes.forEach((checkbox) => {
                    const columnIndex = parseInt(checkbox.value);
                    const isChecked = checkbox.checked;
                    
                    if (headers[columnIndex]) {
                        headers[columnIndex].style.display = isChecked ? '' : 'none';
                    }
                    
                    rows.forEach(row => {
                        const cells = row.querySelectorAll('td, th');
                        if (cells[columnIndex]) {
                            cells[columnIndex].style.display = isChecked ? '' : 'none';
                        }
                    });
                });
                
                // Force close modal properly
                $('#columnModal').modal('hide');
                
                // Remove any stuck modal backdrop
                setTimeout(() => {
                    $('.modal-backdrop').remove();
                    $('body').removeClass('modal-open');
                    $('body').css('padding-right', '');
                }, 300);
                
                showNotification('Columns updated successfully!');
                
            } catch (error) {
                console.error('Error applying column filter:', error);
                $('#columnModal').modal('hide');
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');
                $('body').css('padding-right', '');
            }
        }

        function showNotification(message) {
            $('.custom-notification').remove();
            
            const notification = document.createElement('div');
            notification.className = 'alert alert-success alert-dismissible fade show custom-notification';
            notification.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 99999; min-width: 300px;';
            notification.innerHTML = `
                <i class="fa fa-check-circle"></i> ${message}
                <button type="button" class="close" onclick="this.parentElement.remove()">
                    <span>&times;</span>
                </button>
            `;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.remove();
                }
            }, 3000);
        }

        $(document).ready(function() {
            setTimeout(() => {
                applyDefaultColumnVisibility();
            }, 500);
        });

        function applyDefaultColumnVisibility() {
            try {
                const table = document.getElementById('productsTable');
                if (!table) return;
                
                const headers = table.querySelectorAll('thead th');
                const rows = table.querySelectorAll('tbody tr');
                
                headers.forEach((header, index) => {
                    const columnKey = header.getAttribute('data-column');
                    const shouldShow = columnDefaults[columnKey] !== undefined ? columnDefaults[columnKey] : true;
                    
                    header.style.display = shouldShow ? '' : 'none';
                    
                    rows.forEach(row => {
                        const cells = row.querySelectorAll('td, th');
                        if (cells[index]) {
                            cells[index].style.display = shouldShow ? '' : 'none';
                        }
                    });
                });
            } catch (error) {
                console.error('Error applying default visibility:', error);
            }
        }

        // Handle modal close events properly
        $(document).on('hidden.bs.modal', '#columnModal', function () {
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
            $('body').css('padding-right', '');
        });
        function getVisibleColumns() {
    const table = document.getElementById('productsTable');
    if (!table) return [];
    
    const headers = table.querySelectorAll('thead th');
    const visibleColumns = [];
    
    headers.forEach((header, index) => {
        const isVisible = !header.style.display || header.style.display !== 'none';
        if (isVisible) {
            const columnKey = header.getAttribute('data-column');
            const columnName = header.textContent.trim();
            visibleColumns.push({
                index: index,
                key: columnKey,
                name: columnName
            });
        }
    });
    
    return visibleColumns;
}

// Updated print function that respects column visibility
function printWithSelectedColumns() {
    const visibleColumns = getVisibleColumns();
    
    if (visibleColumns.length === 0) {
        alert('No columns are visible to print. Please select at least one column.');
        return;
    }
    
    // Store selected columns in hidden input
    document.getElementById('selectedColumnsInput').value = JSON.stringify(visibleColumns);
    
    // Submit the form
    document.getElementById('printForm').submit();
}
    </script>
@endsection