@extends('admin.template.master')

@section('stylesheets')
    {!! Html::style('assets/admin/bower_components/select2/dist/css/select2.min.css') !!}
    <style>
        .sortable {
            list-style: none;
            margin-bottom: 5px;
        }

        .sortable:last-child {
            margin-bottom: 0;
        }

        .text-to-label {
            border: none;
            width: 20px;
            max-width: 20px;
            outline: none;
        }

        #priority_pos {
            padding: 0;
        }
    </style>
@endsection

@section('title')
    <section class="content-header">
        <h1>
            Item Type wise attribute sample data
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="{!! url('/admin/item-types') !!}">Item Type wise attribute sample data</a></li>
            <li class="active">Entry/Update</li>
        </ol>
    </section>
@endsection

@section('main-content')
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">
                        </h3>
                        <a class="btn btn-primary btn-sm pull-right" href="{{ url('/admin/item-type-wise-attributes-sample-data') }}">Back to List</a>
                    </div>


                    <div class="box-body">
                        <div class="form-group @if($errors->has('item_type_id')) has-error @endif">
                            <label>Item Type</label>
                            <select name="item_type_id" id="item_type_id" class="form-control">
                                <option value="">Select Item Type</option>
                                @foreach($item_types as $i)
                                <option value="{{ $i->item_type_id }}">{{ $i->item_type_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {!! Form::open([ 'id' => 'attributes_sample_data_frm' , 'url' => '/admin/item-type-wise-attributes-sample-data/create']) !!}
                    <div class="box-body">
                        <div id="item_type_wise_attribute_sets">
                        </div>
                    </div>

                    <div class="box-footer">
                        <button class='btn btn-primary pull-right' type="button" id="save_btn">Create/Update</button>
                    </div>
                    {!! Form::close() !!}

                </div>
            </div>
        </div>
    </section>
@endsection

@section('javascripts')
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    {!! Html::script('assets/admin/bower_components/select2/dist/js/select2.full.min.js') !!}
    <script>
        $('#item_type_id').select2({
            placeholder: 'Select attribute set'
        });

        $("#item_type_id").change(function() {
            let item_type_id=  $(this).val();
            if (item_type_id === '') {
                alert('Select Item Type');
            }
            else {
                $.ajax({
                    type: "GET",
                    url: "{{ url('/admin/get-item-type-wise-attributes') }}/" + item_type_id,
                    data: {},
                    success: function(res) {
                        console.log('res', res.data)
                        $("#item_type_wise_attribute_sets").html("");
                        $("#item_type_wise_attribute_sets").html(res.data);
                    }
                });
            }
        });

        $("#save_btn").click(function() {
            $.ajax({
                type: "POST",
                url: "{{ url('/admin/item-type-wise-attributes-sample-data/create') }}" ,
                data: $("#attributes_sample_data_frm").serialize(),
                success: function(res) {
                    console.log(res.msg);
                    alert(res.msg);
                }
            });
        });

    </script>
@endsection