@extends('layouts.app')
@section('content')

@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/tables/datatable/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/forms/selects/select2.min.css')}}">
@endsection

<div class="card">
    <div class="card-header">
        <h4 class="card-title">Default Customer Groups</h4>
    </div>

    <div class="card-body collapse in">
        <div class="card-block card-dashboard">
            <table  class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                <?php $i = 1; ?>
                @if(isset($default_groups) && !empty($default_groups))
                @foreach($default_groups as $row)
                    <tr>
                        <td>{{$i++}}</td>
                        <td>{{$row->name}}</td>
                        <td>{{$row->description}}</td>                    
                    </tr>
                @endforeach
                @endif
             
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h4 class="card-title">Customer Groups</h4>
        <a class="heading-elements-toggle"><i class="icon-ellipsis font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <button type="button" class="btn btn-info btn-square btn-float-lg" data-toggle="modal" data-target="#customerGroupModal">Create Customer Group</button>
            </ul>
        </div>
    </div>

    <div class="card-body collapse in">
        <div class="card-block card-dashboard">
            <table  class="table table-hover table-bordered dom-jQuery-events">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Action</th>
                    </tr>
                </thead>

                <tbody>
                @php $i = 1; @endphp
                @if(isset($groups) && !empty($groups))
                @foreach($groups as $row)
                    <tr>
                        <td>{{ $i++ }}</td>
                        <td>{{$row->name}}</td>
                        <td>{{$row->description}}</td>
                        <td>
                            <a data-id="{{$row->id}}" class="text-info view_click" style="cursor:pointer" title="Edit"><i class="icon-eye4" aria-hidden="true"></i></a>
                            <a href="{{url('delete_customer_group?id='.$row->id)}}" class="text-danger" title="Delete" onclick="return confirm('Are you sure you want to delete this ?');"><i class="icon-trash-o"></i></a>
                        </td>
                    </tr>
                @endforeach
                @endif
                </tbody>
            </table>
        </div>
    </div>
</div>
 
@include('admin.customers.groups_modal')
@include('admin.customers.view_customer_group_modal')

@section('js')
<script src="{{asset('assets/admin/vendors/js/forms/select/select2.full.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/forms/select/form-select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/vendors/js/tables/jquery.dataTables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/vendors/js/tables/datatable/dataTables.bootstrap4.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/tables/datatables/datatable-advanced.min.js')}}" type="text/javascript"></script>

<script type="text/javascript">
$(".view_click").on('click', function (event) { 
    event.preventDefault();
    var id = $(this).attr("data-id");    
    $.ajax({
        type: 'GET',
        url: '{{route("getCustomersGroup")}}',
        data: {id:id},
        success: function (response) {  
            $('#customer_group_div').html(response);
            $('#view_customer_modal').modal('show');
        }
    });    
});
</script>
 
@endsection
@endsection