@extends('layouts.app')

@section('title', 'Stocktake Excel Upload')

@section('content')
<div class="content mt-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header  d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-file-upload"></i> Stocktake Excel Upload
                    </h4>
                    <div>
                        <a href="#" class="btn btn-light btn-sm" id="downloadTemplateBtn">
                            <i class="fas fa-download"></i> Download Template
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Step 1: Select Location -->
                    <div class="step-section mb-4">
                        <h5 class="text-primary">Step 1: Select Location</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="location_id" class="font-weight-bold">Location <span class="text-danger">*</span></label>
                                    <select id="location_id" class="form-control select2">
                                        <option value="">Select Location</option>
                                        @foreach($business_locations as $id => $name)
                                            <option value="{{ $id }}">{{ $name }}</option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted">Select the location where you want to update stock.</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold">&nbsp;</label>
                                    <div class="mt-2">
                                        <button type="button" class="btn btn-success" id="downloadTemplateBtn2" disabled>
                                            <i class="fas fa-download"></i> Download Template
                                        </button>
                                        <button type="button" class="btn btn-info" id="downloadSelectedBtn" disabled>
                                            <i class="fas fa-download"></i> Download Selected Products
                                        </button>
                                    </div>
                                    <small class="text-muted">Download template to fill in stock counts.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <!-- Step 2: Select Products (Optional) -->
                    <div class="step-section mb-4">
                        <h5 class="text-primary">Step 2: Select Products (Optional)</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold">Filter Options</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <select id="category_filter" class="form-control">
                                                <option value="">All Categories</option>
                                                @foreach(\App\Category::where('business_id', session('user.business_id'))->pluck('name', 'id') as $id => $name)
                                                    <option value="{{ $id }}">{{ $name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <select id="brand_filter" class="form-control">
                                                <option value="">All Brands</option>
                                                @foreach(\App\Brands::pluck('name', 'id') as $id => $name)
                                                    <option value="{{ $id }}">{{ $name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold">Product Selection</label>
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-sm btn-outline-primary" id="selectAllProducts">
                                            <i class="fas fa-check-double"></i> Select All
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary" id="deselectAllProducts">
                                            <i class="fas fa-times"></i> Deselect All
                                        </button>
                                    </div>
                                    <div class="product-list-container" style="max-height: 300px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px; padding: 10px;">
                                        <div id="productList">
                                            <div class="text-center text-muted py-3">
                                                <i class="fas fa-info-circle"></i> Please select a location to load products.
                                            </div>
                                        </div>
                                    </div>
                                    <small class="text-muted">Select specific products or leave blank to include all.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <!-- Step 3: Upload File -->
                    <div class="step-section mb-4">
                        <h5 class="text-primary">Step 3: Upload Completed File</h5>
                        <div class="row">
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label for="excel_file" class="font-weight-bold">Excel File <span class="text-danger">*</span></label>
                                    <div class="custom-file">
                                        <input type="file" class="custom-file-input" id="excel_file" accept=".xlsx,.xls,.csv">
                                        <label class="custom-file-label" for="excel_file">Choose file...</label>
                                    </div>
                                    <small class="text-muted">Upload your completed Excel file (xlsx, xls, csv). Max size: 10MB.</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="font-weight-bold">&nbsp;</label>
                                    <button type="button" class="btn btn-primary btn-block" id="uploadBtn" disabled>
                                        <i class="fas fa-upload"></i> Upload & Process
                                    </button>
                                    <div id="uploadProgress" style="display: none;" class="mt-2">
                                        <div class="progress">
                                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%">
                                                Processing...
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr>

                    <!-- Quick Actions -->
                    <div class="step-section">
                        <h5 class="text-primary">Quick Actions</h5>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <i class="fas fa-file-excel fa-3x text-success"></i>
                                        <h6 class="mt-2">Download Full Template</h6>
                                        <small class="text-muted">All products for selected location</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <i class="fas fa-file-excel fa-3x text-info"></i>
                                        <h6 class="mt-2">Download Selected Products</h6>
                                        <small class="text-muted">Only products you select</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <i class="fas fa-upload fa-3x text-primary"></i>
                                        <h6 class="mt-2">Upload & Update Stock</h6>
                                        <small class="text-muted">Process your completed file</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
    let locationId = null;

    // Initialize Select2
    $('.select2').select2();

    // Location change handler
    $('#location_id').on('change', function() {
        locationId = $(this).val();
        if (locationId) {
            $('#downloadTemplateBtn2, #downloadSelectedBtn, #uploadBtn').prop('disabled', false);
            loadProducts(locationId);
        } else {
            $('#downloadTemplateBtn2, #downloadSelectedBtn, #uploadBtn').prop('disabled', true);
            $('#productList').html('<div class="text-center text-muted py-3">Please select a location first.</div>');
        }
    });

    // Load products when location changes
    function loadProducts(locationId) {
        $('#productList').html('<div class="text-center text-muted py-3"><i class="fas fa-spinner fa-spin"></i> Loading products...</div>');
        
        let categoryId = $('#category_filter').val();
        let brandId = $('#brand_filter').val();
        
        $.ajax({
            url: '{{ route("stocktake.excel.products") }}',
            method: 'GET',
            data: {
                location_id: locationId,
                category_id: categoryId,
                brand_id: brandId
            },
            success: function(response) {
                if (response.html) {
                    $('#productList').html(response.html);
                } else {
                    $('#productList').html('<div class="text-center text-muted py-3">No products found.</div>');
                }
            },
            error: function(xhr) {
                console.error('Error loading products:', xhr);
                $('#productList').html('<div class="text-center text-danger py-3">Error loading products. Please try again.</div>');
            }
        });
    }

    // Filter change handlers
    $('#category_filter, #brand_filter').on('change', function() {
        if (locationId) {
            loadProducts(locationId);
        }
    });

    // Select All Products
    $('#selectAllProducts').on('click', function() {
        $('#productList input[type="checkbox"]').prop('checked', true);
    });

    // Deselect All Products
    $('#deselectAllProducts').on('click', function() {
        $('#productList input[type="checkbox"]').prop('checked', false);
    });

    // Download Template
    $('#downloadTemplateBtn, #downloadTemplateBtn2').on('click', function() {
        if (!locationId) {
            toastr.warning('Please select a location first.');
            return;
        }
        window.location.href = '{{ route("stocktake.excel.template") }}?location_id=' + locationId;
    });

    // Download Selected Products
    $('#downloadSelectedBtn').on('click', function() {
        if (!locationId) {
            toastr.warning('Please select a location first.');
            return;
        }
        
        let selected = [];
        $('#productList input[type="checkbox"]:checked').each(function() {
            selected.push($(this).val());
        });

        if (selected.length === 0) {
            toastr.warning('Please select at least one product to download.');
            return;
        }

        let url = '{{ route("stocktake.excel.download") }}?location_id=' + locationId + '&product_ids=' + selected.join(',');
        window.location.href = url;
    });

    // File input change handler
    $('#excel_file').on('change', function() {
        let fileName = $(this).val().split('\\').pop();
        $(this).next('.custom-file-label').html(fileName || 'Choose file...');
    });

    // Upload handler
    $('#uploadBtn').on('click', function() {
        if (!locationId) {
            toastr.warning('Please select a location.');
            return;
        }

        let fileInput = $('#excel_file')[0];
        if (!fileInput.files || fileInput.files.length === 0) {
            toastr.warning('Please select an Excel file to upload.');
            return;
        }

        let formData = new FormData();
        formData.append('excel_file', fileInput.files[0]);
        formData.append('location_id', locationId);
        formData.append('_token', '{{ csrf_token() }}');

        // Show progress
        $('#uploadProgress').show();
        $('#uploadBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Uploading...');

        $.ajax({
            url: '{{ route("stocktake.excel.upload") }}',
            method: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message || 'Stock counts imported successfully!');
                    setTimeout(function() {
                        window.location.href = '{{ route("stocktake.stock") }}';
                    }, 2000);
                } else {
                    toastr.error(response.message || 'Error uploading file.');
                    $('#uploadBtn').prop('disabled', false).html('<i class="fas fa-upload"></i> Upload & Process');
                    $('#uploadProgress').hide();
                }
            },
            error: function(xhr) {
                let errorMsg = 'Error uploading file.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }
                toastr.error(errorMsg);
                $('#uploadBtn').prop('disabled', false).html('<i class="fas fa-upload"></i> Upload & Process');
                $('#uploadProgress').hide();
            }
        });
    });
});
</script>

<style>
.step-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.step-section h5 {
    margin-top: 0;
    margin-bottom: 15px;
}

.product-list-container {
    background: white;
}

.product-list-container .form-check {
    padding: 5px 10px;
    border-bottom: 1px solid #f0f0f0;
    margin: 0;
}

.product-list-container .form-check:hover {
    background: #f8f9fa;
}

.product-list-container .form-check:last-child {
    border-bottom: none;
}

.custom-file-label::after {
    content: "Browse";
}

#uploadProgress {
    margin-top: 10px;
}
</style>
@endsection