@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_create') }}</li>
                </ol>
            </div>
        </div>

        <div class="card-body">

            <div id="data-table_processing" class="dataTables_processing panel panel-default" style="display: none;">
                {{ trans('lang.processing') }}</div>
            <div class="error_top" style="display:none"></div>
            <div class="row restaurant_payout_create">
                <form action="{{ route('attributes.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="restaurant_payout_create-inner">
                        <fieldset>
                            <legend>{{ trans('lang.attribute_create') }}</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" required>
                                    <div class="form-text text-muted">{{ trans('lang.attribute_name_help') }} </div>
                                </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" id="description" class="form-control" required></textarea>

                                </div>
                            </div>

                            {{-- Attribute Values --}}
                            <div class="form-group row width-100 align-items-center">
                                <label class="col-3 control-label d-flex justify-content-between align-items-center">
                                    {{ trans('lang.attribute_values') }}
                                    <button class="btn btn-success btn-sm add-value-btn ml-auto" type="button">+</button>
                                </label>

                                <div class="col-7" id="attribute-values-container">
                                    <div class="row w-100 mb-2 align-items-center">
                                        <div class="col-md-6">
                                            <input type="text" name="attributes[0][value]" class="form-control"
                                                placeholder="Enter value" required>
                                        </div>
                                        <div class="col-md-5">
                                            <input type="checkbox" class="is_active" name="attributes[0][multiple_quantity]"
                                                value="1" id="multiple_quanitity_0">
                                            <label class="col-3 control-label"
                                                for="multiple_quanitity_0">{{ trans('lang.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>
                                  
                                </div>
                                  <div class="form-text text-muted">
                                        Enter one or more attribute values (e.g., Red, Green)
                                    </div>
                            </div>


                        </fieldset>
                    </div>

            </div>

        </div>
        <div class="form-group col-12 text-center btm-btn">
            <button type="submit" class="btn btn-primary save_attribute_btn"><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>
        // var database = firebase.firestore();
        // var ref = database.collection('vendor_attributes');
        // var photo = "";
        // var id_attribute = "693ad98c1d9ee";
        // var attribute_length = 1;


        $(document).ready(function() {




            let valueIndex = 1;

            $(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++;
            });







            // Remove attribute value input
            $(document).on('click', '.remove-value-btn', function() {
                $(this).closest('.row').remove();
            });




            // jQuery("#data-table_processing").show();
            // ref.get().then(async function(snapshots) {
            //     attribute_length = snapshots.size + 1;
            //     jQuery("#data-table_processing").hide();
            // })

            // $(".save_attribute_btn").click(function() {
            //     var title = $(".cat-name").val();

            //     $(".error_top").hide();
            //     $(".error_top").html("");

            //     if (title == '') {

            //         $(".error_top").show();
            //         $(".error_top").append("<p>{{ trans('lang.enter_itemattribute_title_error') }}</p>");
            //         window.scrollTo(0, 0);
            //     } else {
            //         jQuery("#data-table_processing").show();
            //         database.collection('vendor_attributes').doc(id_attribute).set({
            //             'id': id_attribute,
            //             'title': title
            //         }).then(function(result) {
            //             window.location.href = '{{ route('attributes') }}';
            //         });

            //     }

            // });


        });

        // var storageRef = firebase.storage().ref('images');
    </script>
@endsection