@include('layouts.header_script')
<div class="container-fluid">
    <div class="row">
        <div class="col-4">
            <div class="card">
                <div class="card-title card_1">
                    <h6>{{__('msg.add_color_and_size')}}</h6>
                    <button class="btn btn-xs card_1_button ml-auto" onclick="form_submit_reset()">{{__('msg.new')}}</button>
                </div>
                <div class="card-body px-2">
                    <form action="{{ route('inventory.color_size.store') }}" class="form_submit px-1" method="post">
                        <input type="hidden" name="row_id" class="row_id">
                        <div class="form-group">
                            <label for="">{{__('msg.type')}}</label>
                            <select name="type" class="form-control type">
                                <option value="1">{{__('msg.color')}}</option>
                                <option value="2">{{__('msg.size')}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="">{{__('msg.name')}}</label>
                            <input type="text" name="name" class="form-control name">
                        </div>
                        <div class="form-group">
                            <label for="">{{__('msg.status')}}</label>
                            <select name="status" class="form-control status">
                                <option value="1">{{__('msg.active')}}</option>
                                <option value="2">{{__('msg.inactive')}}</option>
                            </select>
                        </div>
                        <button class="btn btn-sm w-50 btn-success submit_button mt-2">{{__('msg.save')}}</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-8">
            <div class="card commonListHolder">
                <div class="card-title card_1">
                    <h6>List</h6>
                </div>
                <div class="filter_div">
                    <div class="row px-1">
                        <div class="col-2">
                            <div class="form-group">
                                <label for="">{{__('msg.type')}}</label>
                                <select name="filter_type" class="form-control filter_type" id="filter_type">
                                    <option value="1">{{__('msg.color')}}</option>
                                    <option value="2">{{__('msg.size')}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <label for="">{{__('msg.name')}}</label>
                                <input type="text" name="filter_name" class="form-control filter_name">
                            </div>
                        </div>
                        <div class="col-2">
                            <div class="form-group">
                                <label for="">&nbsp;</label>
                                <button class="btn btn-sm btn-success btn-block filter_button" onclick="getColorSize()">{{__('msg.filter')}}</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body commonListBody">
    
                </div>
                <div class="commonListPaginate"></div>
            </div>
        </div>
    </div>
</div>
@include('layouts.footer_script')
<script>
    $(document).ready(function() {
        // getColorSize();
        $(document).on('click', '.btn_edit', function(e) {
            e.preventDefault();
            row_id = $(this).attr('data-row-id');
            editUser(row_id);
        });
    });

    function getColorSize() {
        getLoader();
        $('.row_id').val('');
        let data = {
            json: 1,
            type: $('.filter_type').val(),
            name: $('.filter_name').val()
        };
        customAjaxCall(function(res) {
            console.log("res", res);
            $('.commonListBody').html(res.body);
            $('.commonListPaginate').html(res.paginate);
        }, 'GET', "{{ route('inventory.color_size.index') }}", data);
    }

    const editUser = (row_id) => {
        let data = {
            row_id
        };
        $('.submit_button').text('Update').addClass('btn-info').removeClass('btn-success');
        customAjaxCall(function(res) {
            console.log("res", res);
            $('.row_id').val(res.info.id);
            $('.name').val(res.info.name);
            $('.status').val(res.info.status);
            $('.type').val(res.info.type);
        }, 'GET', "{{ route('inventory.color_size.edit') }}", data);
    }
</script>