@extends('layouts.page')

@section('title', 'Groups')


@section('content')
<div class="content-wrapper">
    <div class="content-header ">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Groups</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item active">Groups</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            @include('layouts.error')
                            <div class="row">
                                <div class="col-lg-auto col-md-auto mt-auto my-1 ">
                                    <a href="javascript:;" class="icons js-edit-group" data-id="">
                                        Add Group
                                    </a>
                                </div>
                            </div>
                            <table id="datatable" class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Group Name</th>
                                        <th>Group Code</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(!$results->isEmpty())
                                    @php
                                    $i = $results->firstItem() - 1;
                                    @endphp
                                    @foreach ($results as $row)
                                    <tr>
                                        <td>{{ ++$i }}</td>
                                        <td>{{$row->group_name}}</td>
                                        <td>{{ $row->group_code }}</td>
                                        <td>
                                            <a href="javascript:;" class="badge {{ $row->group_status == '0' ? 'badge-warning' : 'badge-success' }} js-status-change" data-id={{ $row->group_id  }} }}>
                                                {{ $row->group_status == '0' ? 'Inactive' : 'Active' }}
                                            </a>
                                        </td>
                                        <td>
                                            <a href="javascript:;" class="icon js-edit-group" data-id="{{ $row->group_id }}"><i class="fa fa-edit"></i></a>
                                        </td>
                                    </tr>
                                    @endforeach
                                    @else
                                    <tr>
                                        <td colspan="5">No Records found.</td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <div class="card-footer clearfix pagination-wrapper float-right">
                            {{ $results->links('pagination::bootstrap-4') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div class="modal fade" id="edit_group">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content bg-light">
            <div class="modal-header">
                <h4 class="modal-title">Edit Group</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="load-wrap">
                <div class="spinner-grow text-secondary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
            <div class="js-box-body" style="display: none;">
                <form class="form-horizontal" action="javascript:;" method="POST" enctype="multipart/form-data" id="frm-group">
                    <div class="modal-body">
                        <div class="alert alert-danger" style="display:none;"></div>
                        <div class="box-body row justify-content-center">

                            <div class="form-group col-lg-6 col-md-6">
                                <label class="col-sm-12 control-label">Group Name<b style="color: red;">*</b></label>
                                <div class="col-sm-12">
                                    <input type="text" name="group_name" id="group_name" class="form-control" value="" required="">
                                </div>
                            </div>

                            <div class="form-group col-lg-6 col-md-6">
                                <label class="col-sm-12 control-label">Group Code<b style="color: red;">*</b></label>
                                <div class="col-sm-12">
                                    <input type="text" name="group_code" id="group_code" class="form-control" value="" required="">
                                </div>
                            </div>

                            <div class="form-group col-lg-6 col-md-6">
                                <label class="col-sm-12 control-label">Group Status<b style="color: red;">*</b></label>
                                <div class="col-sm-12">
                                    <select class="form-control" id="group_status" name="group_status">
                                        <option value="">Select Status</option>
                                        <option value="0">Inactive</option>
                                        <option value="1">Active</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom-js')
<script>
    $(document).ready(function() {
        $("#frm-group").validate({
            rules: {
                group_name: {
                    required: true,
                },
                group_code: {
                    required: true,
                },
                group_status: {
                    required: true,
                },
            },
        });

        $(document).on('click', '.js-edit-group', function() {
            $('#edit_group').find('.js-box-body').hide();
            $('#edit_group').find('.load-wrap').show();
            $('#edit_group').modal('show');
            $('#edit_group').find('.alert').html('').hide();
            $('#frm-group').find('input[typ="submit"]').text('Submit').prop("disabled", false);

            var id = $(this).attr('data-id');
            if (id != "") {
                $.ajax({
                    url: "{{ url('/groups') }}/" + id,
                    method: 'GET',
                    data: {},
                    success: function(obj) {
                        if (obj.code == 1) {
                            $('#frm-group').find('#group_id').val(obj.record.group_id);
                            $('#frm-group').find('input[name="group_name"]').val(obj.record.group_name);
                            $('#frm-group').find('input[name="group_code"]').val(obj.record.group_code);
                            $('#frm-group').find('#group_status').val(obj.record.group_status);
                            $('#frm-group').attr('data-id', id);
                            $('#edit_group').find('.load-wrap').hide();
                            $('#edit_group').find('.js-box-body').show();
                        }
                    }
                });
            } else {
                $('#frm-group').attr('data-id', "");
                $('.modal-title').html('Add Group');
                $('#edit_group').find('.js-box-body').show();
                $('#edit_group').find('.load-wrap').hide();
            }
        });

        $(document).on('submit', '#frm-group', function() {
            var that = $(this);
            that.find('.alert').html('').hide();

            if (that.valid()) {
                that.find('button').text('Processing...');
                that.find('button').prop("disabled", true);

                var formData = new FormData(that[0]);
                $.ajax({
                    url: "{{ url('/groups/update') }}/" + that.attr('data-id'),
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    success: function(obj) {
                        that.find('button').text('Submit');
                        that.find('button').prop("disabled", false);
                        if (obj.code == 1) {
                            window.location.reload();
                        } else {
                            var html = '';
                            obj.message.map(function(v) {
                                html += '<p>' + v + '</p>'
                            })
                            that.find('.alert').html(html).show();
                        }
                    }
                });
            }
        });

        $(document).on('click', '.js-status-change', function() {
            var id = $(this).attr('data-id');
            var that = $(this);
            $.ajax({
                url: "{{ url('/groups/status') }}/" + id,
                method: 'POST',
                data: {},
                success: function(obj) {
                    if (obj.status == "0") {
                        that.text("Inactive").removeClass('badge-success');
                        that.addClass('badge-warning');
                    } else {
                        that.text("Active").removeClass('badge-warning');
                        that.addClass('badge-success');
                    }
                }
            });
        });


    });
</script>
@endsection