@extends('master', ['title' => __('dashboard.edit_product')])

@section('content')
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h4>{{ __('dashboard.edit_product') }}</h4>
            </div>

            <div class="card-body">
                <form method="POST" action="{{ route('products.update', $product->id) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <div class="col-md-6 mb-2">
                            <label>{{ __('dashboard.name_en') }}</label>
                            <input type="text" name="name[en]" class="form-control mt-1"
                                value="{{ $product->getTranslation('name', 'en') }}">
                        </div>

                        <div class="col-md-6 mb-2">
                            <label>{{ __('dashboard.name_ar') }}</label>
                            <input type="text" name="name[ar]" class="form-control mt-1"
                                value="{{ $product->getTranslation('name', 'ar') }}">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-2">
                            <label>{{ __('dashboard.price') }}</label>
                            <input type="number" step="0.01" name="price" class="form-control mt-1"
                                value="{{ $product->price }}">
                        </div>

                        <div class="col-md-4 mb-2">
                            <label>{{ __('dashboard.discount_price') }}</label>
                            <input type="number" step="0.01" name="selling_price" class="form-control mt-1"
                                value="{{ $product->selling_price }}">
                        </div>

                        <div class="col-md-4 mb-2">
                            <label>{{ __('dashboard.stock') }}</label>
                            <input type="number" name="stock" class="form-control mt-1" value="{{ $product->stock }}">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-2">
                            <label>{{ __('dashboard.package_weight') }}</label>
                            <input type="number" step="0.001" name="package_weight" class="form-control mt-1"
                                value="{{ $product->package_weight }}">
                        </div>

                        <div class="col-md-6 mb-2">
                            <label>{{ __('dashboard.weight_unit') }}</label>
                            <select name="weight_unit" class="form-select mt-1">
                                <option value="kg" {{ $product->weight_unit == 'kg' ? 'selected' : '' }}>
                                    {{ __('dashboard.kg') }}</option>
                                <option value="g" {{ $product->weight_unit == 'g' ? 'selected' : '' }}>
                                    {{ __('dashboard.gram') }}</option>
                                <option value="ml" {{ $product->weight_unit == 'ml' ? 'selected' : '' }}>
                                    {{ __('dashboard.millilitre') }}</option>
                                <option value="L" {{ $product->weight_unit == 'L' ? 'selected' : '' }}>
                                    {{ __('dashboard.litre') }}</option>
                                <option value="pcs" {{ $product->weight_unit == 'pcs' ? 'selected' : '' }}>{{ __('dashboard.pcs') }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-2">
                        <label>{{ __('dashboard.category') }}</label>
                        <select name="category_id" class="form-select mt-1">
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}"
                                    {{ $product->category_id == $category->id ? 'selected' : '' }}>
                                    {{ $category->getTranslation('name', app()->getLocale()) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-2">
                        <label>{{ __('dashboard.brand') }}</label>
                        <select name="brand_id" class="form-select mt-1">
                            <option value="">{{ __('dashboard.select_brand') }}</option>
                            @foreach ($brands as $brand)
                                <option value="{{ $brand->id }}"
                                    {{ $product->brand_id == $brand->id ? 'selected' : '' }}>
                                    {{ $brand->getTranslation('name', app()->getLocale()) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-4">
                        <label class="d-block">{{ __('dashboard.nutritional_info') }}</label>
                        <div id="nutrition-fields" class="mt-2">
                            @php $nutrition = $product->nutritional_info ? json_decode($product->nutritional_info, true) : [] @endphp
                            @if (!empty($nutrition))
                                @foreach ($nutrition as $key => $value)
                                    <div class="row mb-2 nutrition-row align-items-center">
                                        <div class="col-md-5">
                                            <input type="text" name="nutrition_keys[]" class="form-control"
                                                value="{{ $key }}" placeholder="e.g. calories">
                                        </div>
                                        <div class="col-md-5">
                                            <input type="number" step="0.01" name="nutrition_values[]"
                                                class="form-control" value="{{ $value }}" placeholder="Value">
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-danger btn-sm remove-nutrition"><i data-feather="trash"></i></button>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="row mb-2 nutrition-row align-items-center">
                                    <div class="col-md-5">
                                        <input type="text" name="nutrition_keys[]" class="form-control"
                                            placeholder="{{ __('dashboard.nutrition_key') }}">
                                    </div>
                                    <div class="col-md-5">
                                        <input type="number" step="0.01" name="nutrition_values[]" class="form-control"
                                            placeholder="{{ __('dashboard.nutrition_value') }}">
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-danger btn-sm remove-nutrition"><i data-feather="trash"></i></button>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <button type="button" class="btn btn-outline-secondary btn-sm mt-2" id="add-nutrition">
                            <i data-feather="plus"></i> {{ __('dashboard.add_nutrition_field') }}
                        </button>
                    </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" {{ $product->is_active ? 'checked' : '' }}>
                            <label class="form-check-label">{{ __('dashboard.status') }}</label>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" name="is_best_seller" value="1" {{ $product->is_best_seller ? 'checked' : '' }}>
                            <label class="form-check-label">{{ __('dashboard.is_best_seller') }}</label>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" name="is_best_value" value="1" id="is_best_value" {{ $product->is_best_value ? 'checked' : '' }}>
                            <label class="form-check-label">{{ __('dashboard.is_best_value') }}</label>
                        </div>
                    </div>

                    <div class="col-12" id="best_value_fields" style="display: none;">
                        <div class="row">
                            <div class="col-md-6 mb-2">
                                <label>{{ __('dashboard.units') }}<span class="text-danger">*</span></label>
                                <input type="number" name="units" class="form-control mt-1" value="{{ old('units', $product->units) }}">
                            </div>
                            <div class="col-md-6 mb-2">
                                <label>{{ __('dashboard.total_price') }}<span class="text-danger">*</span></label>
                                <input type="number" step="0.01" name="discount_price" class="form-control mt-1" value="{{ old('discount_price', $product->discount_price) }}">
                            </div>
                        </div>
                    </div>
                </div>

                    <div class="mb-2">
                        <label>{{ __('dashboard.images') }}</label>
                        <input type="file" name="images[]" id="product-images" multiple class="form-control mt-1">

                        <div class="mt-2 d-flex flex-wrap gap-2" id="images-preview">
                            @foreach ($product->images as $image)
                                <img src="{{ getPath('products', $product->id, $image->path) }}"
                                    width="80" class="rounded old-image">
                            @endforeach
                        </div>
                    </div>

                    <button class="btn btn-primary">
                        {{ __('dashboard.submit') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="{{ asset('assets/js/product-preview.js') }}"></script>
    <script>
    $(document).ready(function() {
        $('#add-nutrition').on('click', function() {
            $('#nutrition-fields').append(`
                <div class="row mb-2 nutrition-row align-items-center">
                    <div class="col-md-5">
                        <input type="text" name="nutrition_keys[]" class="form-control" placeholder="{{ __('dashboard.nutrition_key') }}">
                    </div>
                    <div class="col-md-5">
                        <input type="number" step="0.01" name="nutrition_values[]" class="form-control" placeholder="{{ __('dashboard.nutrition_value') }}">
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-danger btn-sm remove-nutrition"><i data-feather="trash"></i></button>
                    </div>
                </div>
            `);
            feather.replace();
        });

        $(document).on('click', '.remove-nutrition', function() {
            $(this).closest('.nutrition-row').remove();
        });

        function toggleBestValue() {
            if ($('#is_best_value').is(':checked')) {
                $('#best_value_fields').slideDown();
            } else {
                $('#best_value_fields').slideUp();
            }
        }
        
        $('#is_best_value').on('change', toggleBestValue);
        
        if ($('#is_best_value').is(':checked')) {
            $('#best_value_fields').show();
        }
    });
</script>
@endpush