@extends('backend.layouts.app')

@section('content')
<b class="text-danger text-center">This is only for Developer Purpose, Please do not create from yourself.</b>

<div class="aiz-titlebar text-left mt-2 mb-3">
    <div class="row align-items-center">
        <div class="col-md-6">
            <h1 class="h3">All Feature List</h1>
        </div>
        <div class="col-md-6 text-md-right">
            <a href="javascript:void(0);" class="add-items-btn ml-auto" data-toggle="modal"
                data-target="#createFeature-modal">
                <span><i class="icons icon-plus"></i></span> Add New Feature
            </a>
        </div>
    </div>
</div>

<div class="admin-list-table pt-0 mb-4 border-0">
    <div class="admin-table">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th style="width:4%;" class="text-center">S.No.</th>
                        <th>{{ translate('Name') }}</th>
                        <th class="text-center">{{ translate('Type') }}</th>
                        <th class="text-center">{{ translate('Status') }}</th>
                        <th class="text-center">{{ translate('Feature Type') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @if($listTools->count())
                    @foreach ($listTools as $key => $attribute)
                    <tr>
                        <td class="text-center">{{ $key + 1 + ($listTools->currentPage() - 1) * $listTools->perPage() }}
                        </td>
                        <td>{{ $attribute->name }}</td>
                        <td class="text-center">{{ ucfirst($attribute->type) }}</td>
                        <td class="text-center">{{ ucfirst($attribute->status) }}</td>
                        <td class="text-center">{{ ucfirst($attribute->feature_type) }}</td>
                    </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="5" class="text-center">{{ translate('No features found') }}</td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="aiz-pagination">
    <div class="perPage">
        Total Feature List: <strong>{{ $listTools->total() }}</strong>
    </div>
    {{ $listTools->appends(request()->input())->links() }}
</div>
@endsection

@section('modal')
<!-- Add Feature Modal Start -->
<div class="modal right fade createFeature-modal" data-refresh="true" id="createFeature-modal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header close-btn" style="padding: 16px 16px 0 16px;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"
                    style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0 0 12px 0;font-size:18px;">
                    {{ translate('Add New Feature') }}</h4>
            </div>
            <div class="modal-body pt-1">
                <div class="alert alert-danger"
                    style="color:#d7282f;padding:0 0 0 16px;margin:-8px 0 0 0;position:relative; font-size:80%;">This is
                    only for Developer Purpose, Please do not create from yourself.</div>
                @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif
                <form id="form_id">
                    @csrf
                    <div class="form-group mb-3">
                        <label for="name" class="labelstyle">{{ translate('Name') }}<span
                                class="text-danger ml-1">*</span></label>
                        <input type="text" placeholder="{{ translate('Name') }}" id="name" name="name"
                            class="form-control">
                    </div>

                    <div class="form-group mb-3">
                        <label for="value" class="labelstyle">{{ translate('Value') }}</label>
                        <input type="text" placeholder="{{ translate('Value') }}" id="value" name="value"
                            class="form-control">
                    </div>

                    <div class="form-group mb-3">
                        <label for="valueLabel" class="labelstyle">{{ translate('Value Label') }}</label>
                        <input type="text" placeholder="{{ translate('Value Label') }}" id="valueLabel"
                            name="value_label" class="form-control">
                    </div>

                    <div class="form-group mb-3">
                        <label for="price" class="labelstyle">{{ translate('Price') }}</label>
                        <input type="text" placeholder="{{ translate('Price') }}" id="price" name="price"
                            class="form-control">
                    </div>

                    <div class="form-group mb-3">
                        <label for="type" class="labelstyle">{{ translate('Type') }}</label>
                        <div class="custom-dropdown">
                            <i class="icons icon-arrow-bottom"></i>
                            <select id="type" name="type" class="form-control">
                                <option value="text">Text</option>
                                <option value="toggle">Toggle</option>
                                <option value="checkbox">Checkbox</option>
                                <option value="radio">Radio</option>
                                <option value="double_input">Double Input</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="extra_fields" class="labelstyle">{{ translate('Extra Fields') }}</label>
                        <input type="text" placeholder="{{ translate('Extra Fields') }}" id="extra_fields"
                            name="extra_fields" class="form-control">
                    </div>

                    <div class="form-group mb-3">
                        <label for="extra_field_label" class="labelstyle">{{ translate('Extra Fields Label') }}</label>
                        <input type="text" placeholder="{{ translate('Extra Fields Label') }}" id="extra_field_label"
                            name="extra_field_label" class="form-control">
                    </div>

                    <div class="form-group mb-3">
                        <label for="status" class="labelstyle">{{ translate('Status') }}</label>
                        <div class="custom-dropdown">
                            <i class="icons icon-arrow-bottom"></i>
                            <select name="status" class="form-control">
                                <option value="enable">Enable</option>
                                <option value="disable">Disable</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label for="feature_type" class="labelstyle">{{ translate('Feature Type') }}</label>
                        <div class="custom-dropdown">
                            <i class="icons icon-arrow-bottom"></i>
                            <select name="feature_type" class="form-control">
                                <option value="seller">Seller</option>
                                <option value="buyer">Buyer</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" id="button_id" class="btn btn-primary">Create</button>
            </div>
        </div>
    </div>
</div>
<!-- Add Feature Modal End -->
@endsection

@section('script')
<script type="text/javascript">
$(document).ready(function() {
    $('#button_id').on('click', function(e) {
        e.preventDefault();
        $(".errortextstyle").remove();

        var data = $("#form_id").serialize();
        $.ajax({
            type: "post",
            url: "{{ route('feature_list.store') }}",
            data: data,
            dataType: "json",
            success: function(response) {
                if (response.error) {
                    $.each(response.error, function(field_name, error) {
                        $('[name=' + field_name + ']').after(
                            '<span class="errortextstyle" style="color:#d7282f;">' +
                            error + '</span>')
                    })
                } else {
                    //AIZ.plugins.notify('success', response.success);
                    $('#createFeature-modal').modal('hide');
                    window.location.href = "{{ url('admin/feature_list') }}";
                }
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });

    // $(document).on('click', 'a.page-link', function(event) {
    //     event.preventDefault();
    //     var url = $(this).attr('href');

    //     $.ajax({
    //         url: url,
    //         cache: false,
    //         success: function(html) {
    //             $("#admin-list-table").html(html);
    //         }
    //     });
    //     $('#sProduct').text('0');
    //     $('#deletedData').hide();
    //     $('#restoreData').hide();
    // });
    $('#name, #value, #valueLabel, #price, #extra_fields, #extra_field_label').on('input', function() {
        var inputValue = $(this).val();
        if (inputValue.startsWith(' ')) {
            $(this).val('');
            return false;
        }
        inputValue = inputValue.replace(/\s\s+/g, ' ');
        $(this).val(inputValue);
    });

});
</script>
@endsection