@extends('adminlte::page')
@section('content_header')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Dashboard</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Admin</a></li>
                    <li class="breadcrumb-item active">Customer Levels</li>
                </ol>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="card card-outline card-primary">
    <div class="card-header">
        <h3 class="card-title">Size</h3>
        <div class="float-right">
            <a class="btn btn-info btn-sm" onclick="createThis()"> <i class="fas fa-plus"></i> Create
                New</a>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-sm-12">
                <div class="table-responsive">
                    <table id="data_table" width="100%" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Size Name</th>
                                <th>{{__('auth.action')}}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
    <script type="text/javascript">
        var table = $('#data_table').DataTable({
            "bDestroy": true,
            ordering: false,
            serverSide: true,
            lengthMenu: [[20, 50, 100,200,500,1000,-1], [20, 50, 100,200,500,1000,'All']],
            ajax: "{{ route('sizes.index') }}",
            columns:
            [
                {data: 'DT_RowIndex','searchable': false},
                {data: 'size_name'},
                {data: 'action'},
            ],
            "initComplete": function(settings, json) {}
        });

        function createThis() {
            $.confirm({
                type: "blue",
                title: 'Create New',
                content: `<form action="" id="myForm" autocomplete="off">@csrf
                            <div class="form-group">
                                <label class="required">Size Name</label>
                                <input type="text" name="size_name" placeholder="Name" class="size_name form-control" required/>
                            </div>
                        </form>`,
                buttons: {
                    cancel: function() {},
                    Save: {
                        position: "center",
                        btnClass: 'btn-blue btn-save',
                        keys: ['enter'],
                        action: function() {

                            let size_name = $('input[name="size_name"]');
                            let data = this.$content.find('form').serialize();

                            if (!size_name.val()) {
                                size_name.focus();
                                return false;
                            }

                            $.ajax({
                                method: 'post',
                                data: data,
                                dataType: 'json',
                                url: "{{route('sizes.store')}}",
                                success: function(response) {
                                    notifier(response.status, response.msg);
                                    table.ajax.reload(null, false);
                                },
                            });
                        }
                    },
                },
                onContentReady: function() {
                    var jc = this;
                    this.$content.find('form').on('submit', function(e) {
                        e.preventDefault();
                        jc.$$formSubmit.trigger('click');
                    });
                }
            });
        }

        function editThis(obj) {
            let tr = $(obj).closest('tr');
            let row = table.row(tr);
            let data = row.data();
            let url = $(obj).data('url');

            $.confirm({
                title: 'Edit',
                type: "blue",
                content: `<form action="" id="myForm" autocomplete="off">@csrf
                            <div class="form-group">
                                <label class="required">Size Name</label>
                                <input type="text" value="${data.size_name}" name="size_name" placeholder="Size Name" class="size_name form-control" required />
                            </div>
                        </form>`,
                buttons: {
                    cancel: function() {},
                    Save: {
                        text: 'UPDATE',
                        position: "center",
                        btnClass: 'btn-blue btn-save',
                        keys: ['enter'],
                        action: function() {

                            let size_name = $('input[name="size_name"]');
                            let data = this.$content.find('form').serialize();

                            if (!size_name.val()) {
                                size_name.focus();
                                return false;
                            }

                            $.ajax({
                                method: 'patch',
                                data: data,
                                dataType: 'json',
                                url: url,
                                success: function(response) {
                                    console.log(response.msg);
                                    notifier(response.status, response.msg);
                                    table.ajax.reload(null, false);
                                },
                            });
                        }
                    },
                },
                onContentReady: function() {
                    var jc = this;
                    this.$content.find('form').on('submit', function(e) {
                        e.preventDefault();
                        jc.$$formSubmit.trigger('click');
                    });
                }
            });
        }

        function deleteThis(obj) {
            let url = $(obj).data('url');
            $.confirm({
                type: "red",
                title: 'Confirm!',
                content: 'Are you sure to delete this?',
                theme: 'modern',
                buttons: {
                    cancel: function() {

                    },
                    Ok: {
                        text: 'OK',
                        btnClass: 'btn-red',
                        keys: ['enter'],
                        action: function() {
                            $.ajax({
                                type: 'delete',
                                dataType: "json",
                                url: url,
                                data: {
                                    _token: "{{csrf_token()}}"
                                },
                                success: function(response) {
                                    notifier(response.status, response.msg);
                                    table.ajax.reload(null, false);
                                }
                            });
                        }
                    }

                }
            });
        }
    </script>
@endsection