@extends('layouts.app')

@section('content')
<div class="container">
    <h1>Welcome to the Discount Calculator</h1>
    <form id="discount-form" action="{{ route('calculate-discount') }}" method="POST">
        @csrf
        <div class="form-group mb-3">
            <label for="category_id">Category</label>
            <select class="form-control" id="category_id" name="category_id" required>
                <option value="">Select Category</option>
                @foreach($categories as $category)
                <option value="{{ $category->id }}">{{ $category->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group mb-3">
            <label for="subcategory_id">Subcategory</label>
            <select class="form-control" id="subcategory_id" name="subcategory_id" required>
                <option value="">Select Subcategory</option>
            </select>
        </div>
        <div class="form-group mb-3">
            <label for="product_id">Product</label>
            <select class="form-control" id="product_id" name="product_id" required>
                <option value="">Select Product</option>
            </select>
        </div>
        <div class="form-group mb-3">
            <label for="performance_category_id">Performance Category</label>
            <select class="form-control" id="performance_category_id" name="performance_category_id" required>
                @foreach($performanceCategories as $performanceCategory)
                <option value="{{ $performanceCategory->id }}">{{ $performanceCategory->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="form-group mb-3">
            <label for="user_type_id">User Type</label>
            <select class="form-control" id="user_type_id" name="user_type_id" required>
                @foreach($userTypes as $userType)
                <option value="{{ $userType->id }}">{{ $userType->name }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="btn btn-primary">Calculate Discount</button>
    </form>

    @if(session('discount'))
    <div class="alert alert-success mt-4">
        {{ session('discount') }}
    </div>
    @endif
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const categorySelect = document.getElementById('category_id');
    const subcategorySelect = document.getElementById('subcategory_id');
    const productSelect = document.getElementById('product_id');

    categorySelect.addEventListener('change', function() {
        const categoryId = this.value;
        if (categoryId) {
            fetch(`/api/subcategories?category_id=${categoryId}`)
                .then(response => response.json())
                .then(data => {
                    subcategorySelect.innerHTML = '<option value="">Select Subcategory</option>';
                    data.forEach(subcategory => {
                        subcategorySelect.innerHTML += `<option value="${subcategory.id}">${subcategory.name}</option>`;
                    });
                    productSelect.innerHTML = '<option value="">Select Product</option>';
                })
                .catch(error => console.error('Error fetching subcategories:', error));
        } else {
            subcategorySelect.innerHTML = '<option value="">Select Subcategory</option>';
            productSelect.innerHTML = '<option value="">Select Product</option>';
        }
    });

    subcategorySelect.addEventListener('change', function() {
        const subcategoryId = this.value;
        if (subcategoryId) {
            fetch(`/api/products?subcategory_id=${subcategoryId}`)
                .then(response => response.json())
                .then(data => {
                    productSelect.innerHTML = '<option value="">Select Product</option>';
                    data.forEach(product => {
                        productSelect.innerHTML += `<option value="${product.id}">${product.name} (Base Price: ${product.base_price}, Sale Price: ${product.sale_price})</option>`;
                    });
                })
                .catch(error => console.error('Error fetching products:', error));
        } else {
            productSelect.innerHTML = '<option value="">Select Product</option>';
        }
    });
});
</script>
@endsection