@extends('layouts.app')
@section('content')
<div class="container py-4">
    <div class="card shadow-sm border-0">
        <div class="card-header bg-light text-dark">
            <h4 class="mb-0">
                <i class="bi bi-pencil-square me-2"></i> កែប្រែទំនិញ
            </h4>
        </div>
        <div class="card-body px-3 px-md-4">
            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <!-- UPDATE FORM -->
            <form action="{{ route('products.update', $product->id) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="row g-3">

                    <!-- Product Type -->
                    <div class="col-12 col-md-6" style="display: none">
                        <label for="product_type" class="form-label">Product Type</label>
                        <select name="product_type" id="product_type" class="form-select" required>
                            <option value="standard" {{ $product->product_type == 'standard' ? 'selected' : '' }}>Standard</option>
                            <option value="service" {{ $product->product_type == 'service' ? 'selected' : '' }}>Service</option>
                        </select>
                    </div>

                    <!-- Code -->
                    <div class="col-12 col-md-6" id="code_field" style="display: none">
                        <label class="form-label">Code</label>
                        <input type="text" name="code" class="form-control" value="{{ $product->code }}" required>
                    </div>

                    <!-- Name -->
                    <div class="col-12 col-md-6" id="name_field">
                        <label class="form-label">ឈ្មោះ</label>
                        <input type="text" name="name" class="form-control" value="{{ $product->name }}" required>
                    </div>

                    <!-- Price -->
                    <div class="col-12 col-md-6" id="price_field">
                        <label class="form-label">តម្លៃ ($)</label>
                        <input type="text" name="price" class="form-control" value="{{ $product->price }}" required>
                    </div>

                    <!-- Exchange Rate -->
                    <div class="col-12 col-md-6" id="exchange_rate_field" style="display: none">
                        <label class="form-label">Exchange Rate</label>
                        <select name="Currency_name" class="form-select" required>
                            @foreach($Currency as $currencies)
                                <option value="{{ $currencies->exchange_rate }}" 
                                    {{ $product->currency_id == $currencies->id ? 'selected' : '' }}>
                                    {{ $currencies->exchange_rate }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Fields only for Standard Products -->
                    <div class="standard-fields w-100" style="display: none">
                        <div class="col-12 col-md-6">
                            <label class="form-label">Stock Alert</label>
                            <input type="number" name="stock_alert" class="form-control" value="{{ $product->stock_alert }}">
                        </div>

                        <div class="col-12 col-md-6 mb-3" >
                            <label class="form-label">Category</label>
                            <select name="category_name" class="form-select" required>
                               
                                @foreach($categories as $category)
                                    <option value="{{ $category->name }}" 
                                        {{ $product->category_id == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12 col-md-6 mb-3" style="display: none">
                            <label class="form-label">Units</label>
                            <select name="units_name" class="form-select" required>
                                <option value="">-- Select Unit --</option>
                                @foreach($unit as $units)
                                    <option value="{{ $units->name }}" 
                                        {{ $product->units_id == $units->id ? 'selected' : '' }}>
                                        {{ $units->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12 col-md-6 mb-3" style="display: none">
                            <label class="form-label">Brands</label>
                            <select name="Brands_name" class="form-select" required>
                                <option value="">-- Select Brand --</option>
                                @foreach($Brands as $Brand)
                                    <option value="{{ $Brand->name }}" 
                                        {{ $product->brand_id == $Brand->id ? 'selected' : '' }}>
                                        {{ $Brand->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-12 col-md-6" style="display: none">
                            <label class="form-label">Cost ($)</label>
                            <input type="text" name="cost" class="form-control" value="{{ $product->cost }}" required>
                        </div>

                        <div class="col-12 col-md-6" style="display: none">
                            <label class="form-label">Product Quantity</label>
                            <input type="number" name="product_quantity" class="form-control" value="{{ $product->product_quantity }}" required>
                        </div>

                        <div class="col-12 col-md-6" style="display: none">
                            <label class="form-label">Color ID</label>
                            <input type="number" name="color_id" class="form-control" value="{{ $product->color_id }}" required>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="col-12" id="description_field">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="2">{{ $product->description }}</textarea>
                    </div>

                    <hr class="mt-4 mb-3 w-100">
                </div>

                <div class="text-end mt-4">
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="bi bi-save me-2"></i> Update Product
                    </button>
                    <a href="{{ route('products.index') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left me-2"></i> Back
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- JS to toggle Standard fields -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const productType = document.getElementById('product_type');
        const standardFields = document.querySelectorAll('.standard-fields');

        function toggleFields() {
            if(productType.value === 'service') {
                standardFields.forEach(field => field.style.display = 'none');
            } else {
                standardFields.forEach(field => field.style.display = 'block');
            }
        }

        toggleFields();
        productType.addEventListener('change', toggleFields);
    });
</script>
@endsection