@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <div class="row page-titles">
            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">{{ trans('lang.item_attribute_plural') }}</h3>
            </div>
            <div class="col-md-7 align-self-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">{{ trans('lang.dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a
                            href="{!! route('attributes') !!}">{{ trans('lang.item_attribute_plural') }}</a></li>
                    <li class="breadcrumb-item active">{{ trans('lang.attribute_edit') }}</li>
                </ol>
            </div>
        </div>

        <div class="card-body">
            <div class="error_top" style="display:none"></div>
            <div class="row restaurant_payout_create">
                <form action="{{ route('attributes.put', $attribute->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="restaurant_payout_create-inner">
                        <fieldset>
                            <legend>{{ trans('lang.attribute_edit') }}</legend>

                            <div class="form-group row width-100">
                                <label class="col-3 control-label">{{ trans('lang.attribute_name') }}</label>
                                <div class="col-7">
                                    <input type="text" class="form-control cat-name" name="name"
                                        value="{{ $attribute->name }}" required>
                                </div>
                            </div>

                            <div class="form-group row width-100">
                                <label class="col-3 control-label">{{ trans('lang.description') }}</label>
                                <div class="col-7">
                                    <textarea name="description" class="form-control" required>{{ $attribute->description }}</textarea>
                                </div>
                            </div>
                            <div class="form-group row width-100">
                                <label class="col-3 control-label d-flex justify-content-between align-items-center">
                                    {{ trans('lang.attribute_values') }}
                                    <button type="button" class="btn btn-success btn-sm add-value-btn">+</button>
                                </label>

                                <div class="col-7" id="attribute-values-container">
                                    @foreach ($attribute->values as $index => $value)
                                        @php
                                            $checkboxId = "multiple_quantity_{$index}";
                                        @endphp
                                        <div class="row w-100 mb-2 align-items-center">
                                            <div class="col-md-6">
                                                <input type="text" name="attributes[{{ $index }}][value]"
                                                    class="form-control" value="{{ $value->value }}" required>
                                            </div>
                                            <div class="col-md-5">
                                                <input type="checkbox"
                                                    name="attributes[{{ $index }}][multiple_quantity]"
                                                    value="1" id="{{ $checkboxId }}"
                                                    {{ $value->multiple_quantity ? 'checked' : '' }}>
                                                <label class="col-3 control-label" for="{{ $checkboxId }}">
                                                    {{ trans('lang.multiple_quantity') }}
                                                </label>
                                            </div>
                                            <div class="col-md-1">
                                                <button type="button"
                                                    class="btn btn-danger btn-sm remove-value-btn w-100">X</button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <div class="form-text text-muted col-7 offset-3">
                                    Edit or add attribute values
                                </div>
                            </div>




                        </fieldset>
                    </div>
                    <div class="form-group col-12 text-center btm-btn">
                        <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i>
                            {{ trans('lang.save') }}</button>
                        <a href="{!! route('attributes') !!}" class="btn btn-default"><i class="fa fa-undo"></i>
                            {{ trans('lang.cancel') }}</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {


            let valueIndex = {{ $attribute->values->count() }};

            $(document).on('click', '.add-value-btn', function() {
                const checkboxId = `multiple_quantity_${valueIndex}`;

                const html = `
        <div class="row w-100 mb-2 align-items-center">
            <div class="col-md-6">
                <input type="text" name="attributes[${valueIndex}][value]" class="form-control" placeholder="Enter value" required>
            </div>
            <div class="col-md-5">
                <input type="checkbox" class="is_active" name="attributes[${valueIndex}][multiple_quantity]" value="1" id="${checkboxId}">
                <label class="col-3 control-label" for="${checkboxId}">Allow Multiple Quantity</label>
            </div>
            <div class="col-md-1">
                <button type="button" class="btn btn-danger btn-sm text-center remove-value-btn w-100">X</button>
            </div>
        </div>`;

                $('#attribute-values-container').append(html);
                valueIndex++;
            });




            $(document).on('click', '.remove-value-btn', function() {
                $(this).closest('.row').remove();
            });
        });
    </script>
@endsection