@extends('layouts.admin')

@section('title', 'Products')
@section('page-title', 'Products')

@push('styles')
<link rel="stylesheet" href="{{ asset('theme/vendors/simple-datatables/style.css') }}">
@endpush

@section('content')
<section class="section">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4>All Products</h4>
            <a href="{{ route('admin.products.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Add Product
            </a>
        </div>
        <div class="card-body">
            <table class="table table-striped" id="table1">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Section</th>
                        <th>Price</th>
                        <th>Sale Price</th>
                        <th>SKU</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($products as $product)
                    <tr>
                        <td>{{ $product->id }}</td>
                        <td>{{ $product->name }}</td>
                        <td>{{ $product->category->name }}</td>
                        <td>{{ $product->section?->title ?? '-' }}</td>
                        <td>${{ number_format($product->price, 2) }}</td>
                        <td>
                            @if($product->sale_price)
                                <span class="badge bg-success">${{ number_format($product->sale_price, 2) }}</span>
                                <br><small class="text-muted">{{ $product->getDiscountPercentage() }}% OFF</small>
                                <br><button type="button" class="btn btn-sm btn-outline-warning mt-1 set-sale-btn" data-product-id="{{ $product->id }}" data-product-name="{{ $product->name }}" data-product-price="{{ $product->price }}" data-sale-price="{{ $product->sale_price }}" title="Edit Sale Price">
                                    <i class="bi bi-pencil"></i> Edit
                                </button>
                            @else
                                <button type="button" class="btn btn-sm btn-outline-primary set-sale-btn" data-product-id="{{ $product->id }}" data-product-name="{{ $product->name }}" data-product-price="{{ $product->price }}" data-sale-price="" title="Set Sale Price">
                                    <i class="bi bi-tag"></i> Set Sale
                                </button>
                            @endif
                        </td>
                        <td>{{ $product->sku }}</td>
                        <td>
                            <select class="form-select form-select-sm status-dropdown" data-product-id="{{ $product->id }}" data-current-status="{{ $product->is_active ? 1 : 0 }}" style="width: auto; display: inline-block;">
                                <option value="1" {{ $product->is_active ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ !$product->is_active ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </td>
                        <td>
                            <div class="d-flex flex-wrap gap-1">
                                <a href="{{ route('admin.product-images.index', ['product_id' => $product->id]) }}" class="btn btn-sm btn-info" title="View Images">
                                    <i class="bi bi-images"></i>
                                </a>
                                <a href="{{ route('admin.product-variants.index', ['product_id' => $product->id]) }}" class="btn btn-sm btn-secondary" title="View Variants">
                                    <i class="bi bi-grid-3x3-gap"></i>
                                </a>
                                <a href="{{ route('admin.products.edit', $product->id) }}" class="btn btn-sm btn-warning" title="Edit Product">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form action="{{ route('admin.products.destroy', $product->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure?')" title="Delete Product">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</section>

<!-- Sale Price Modal -->
<div class="modal fade" id="salePriceModal" tabindex="-1" aria-labelledby="salePriceModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="salePriceModalLabel">Set Sale Price</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="salePriceForm">
                <div class="modal-body">
                    <input type="hidden" id="modalProductId" name="product_id">
                    <div class="mb-3">
                        <label class="form-label">Product</label>
                        <input type="text" class="form-control" id="modalProductName" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Regular Price</label>
                        <input type="text" class="form-control" id="modalProductPrice" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="modalSalePrice" class="form-label">Sale Price <small class="text-muted">(Leave empty to remove sale)</small></label>
                        <input type="number" step="0.01" class="form-control @error('sale_price') is-invalid @enderror" id="modalSalePrice" name="sale_price" placeholder="Enter sale price">
                        <small class="form-text text-muted">Must be less than regular price</small>
                        <div id="discountPreview" class="mt-2" style="display: none;">
                            <span class="badge bg-info">Discount: <span id="discountPercentage">0</span>%</span>
                            <span class="badge bg-success ms-2">Save: $<span id="savingsAmount">0.00</span></span>
                        </div>
                        <div class="invalid-feedback" id="salePriceError"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Sale Price</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('theme/vendors/simple-datatables/simple-datatables.js') }}"></script>
<script>
    let table1 = document.querySelector('#table1');
    let dataTable = new simpleDatatables.DataTable(table1);

    // Handle status changes
    document.querySelectorAll('.status-dropdown').forEach(function(dropdown) {
        dropdown.addEventListener('change', function() {
            const productId = this.dataset.productId;
            const isActive = this.value;
            const currentStatus = this.dataset.currentStatus;

            fetch(`/admin/products/${productId}/toggle-status`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify({
                    is_active: isActive
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    this.dataset.currentStatus = isActive;
                    location.reload();
                } else {
                    alert('Error: ' + (data.message || 'Failed to update status'));
                    this.value = currentStatus;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while updating the status');
                this.value = currentStatus;
            });
        });
    });

    // Sale Price Modal
    const salePriceModal = new bootstrap.Modal(document.getElementById('salePriceModal'));
    const salePriceForm = document.getElementById('salePriceForm');
    const modalProductId = document.getElementById('modalProductId');
    const modalProductName = document.getElementById('modalProductName');
    const modalProductPrice = document.getElementById('modalProductPrice');
    const modalSalePrice = document.getElementById('modalSalePrice');
    const discountPreview = document.getElementById('discountPreview');
    const discountPercentage = document.getElementById('discountPercentage');
    const savingsAmount = document.getElementById('savingsAmount');
    const salePriceError = document.getElementById('salePriceError');

    // Open modal when Set Sale button is clicked
    document.querySelectorAll('.set-sale-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const productId = this.dataset.productId;
            const productName = this.dataset.productName;
            const productPrice = parseFloat(this.dataset.productPrice);
            const currentSalePrice = this.dataset.salePrice ? parseFloat(this.dataset.salePrice) : '';

            modalProductId.value = productId;
            modalProductName.value = productName;
            modalProductPrice.value = '$' + productPrice.toFixed(2);
            modalSalePrice.value = currentSalePrice;
            salePriceError.textContent = '';
            modalSalePrice.classList.remove('is-invalid');
            discountPreview.style.display = 'none';

            // Calculate discount if sale price is set
            if (currentSalePrice) {
                updateDiscountPreview(productPrice, currentSalePrice);
            }

            salePriceModal.show();
        });
    });

    // Calculate discount preview as user types
    modalSalePrice.addEventListener('input', function() {
        const regularPrice = parseFloat(modalProductPrice.value.replace('$', ''));
        const salePrice = parseFloat(this.value);

        if (this.value && !isNaN(salePrice) && salePrice > 0 && salePrice < regularPrice) {
            updateDiscountPreview(regularPrice, salePrice);
            discountPreview.style.display = 'block';
            this.classList.remove('is-invalid');
            salePriceError.textContent = '';
        } else if (this.value && (isNaN(salePrice) || salePrice <= 0)) {
            discountPreview.style.display = 'none';
            this.classList.add('is-invalid');
            salePriceError.textContent = 'Sale price must be greater than 0';
        } else if (this.value && salePrice >= regularPrice) {
            discountPreview.style.display = 'none';
            this.classList.add('is-invalid');
            salePriceError.textContent = 'Sale price must be less than regular price';
        } else {
            discountPreview.style.display = 'none';
            this.classList.remove('is-invalid');
            salePriceError.textContent = '';
        }
    });

    function updateDiscountPreview(regularPrice, salePrice) {
        const discount = Math.round(((regularPrice - salePrice) / regularPrice) * 100);
        const savings = regularPrice - salePrice;
        discountPercentage.textContent = discount;
        savingsAmount.textContent = savings.toFixed(2);
    }

    // Handle form submission
    salePriceForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const productId = modalProductId.value;
        const salePrice = modalSalePrice.value;

        // Validate
        const regularPrice = parseFloat(modalProductPrice.value.replace('$', ''));
        const salePriceNum = salePrice ? parseFloat(salePrice) : null;

        if (salePriceNum !== null && (isNaN(salePriceNum) || salePriceNum <= 0)) {
            modalSalePrice.classList.add('is-invalid');
            salePriceError.textContent = 'Sale price must be greater than 0';
            return;
        }

        if (salePriceNum !== null && salePriceNum >= regularPrice) {
            modalSalePrice.classList.add('is-invalid');
            salePriceError.textContent = 'Sale price must be less than regular price';
            return;
        }

        // Submit via AJAX
        fetch(`/admin/products/${productId}/update-sale-price`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                sale_price: salePriceNum
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                salePriceModal.hide();
                location.reload();
            } else {
                modalSalePrice.classList.add('is-invalid');
                salePriceError.textContent = data.message || 'Failed to update sale price';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            modalSalePrice.classList.add('is-invalid');
            salePriceError.textContent = 'An error occurred while updating sale price';
        });
    });
</script>
@endpush