@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    @media only screen and (max-width: 575px) {
        .page-title-right {
            text-align: center;
        }

        div#datatable_length {
            text-align: right;
        }

        div#datatable_filter {
            text-align: right;
        }

        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }
    }

    @media only screen and (max-width: 680px) {
        .page-title-right {
            text-align: center;
        }

        div#datatable_filter {
            text-align: right;
        }

        .mb-3.d-flex {
            width: 200px;
            margin: 0 0 0 auto;
        }

        div#datatable_length {
            text-align: right;
        }

        div#datatable_length {
            text-align: left;
        }
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">
                <a href="javascript:void(0);" onclick="history.back();" class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" title="backbtn" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
            </h4>
            <div class="page-title-right">
                <a class="btn btn-primary waves-effect waves-light form-control px-5" href="{{ route('workarea.contain.form') }}" style="color:white">Add</a>
            </div>
        </div>

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <br>
                    <div class="col-md-2" style="margin:0 0 0 auto">
                    </div>
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap table-hover table-striped  nowrap w-100">
                            <thead class="table-light">
                                <tr>
                                    <th>Action</th>
                                    <th>Id</th>
                                    <th>name</th>
                                    <th>created_at</th>
                                    <th>updated_at</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('ra-assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/form-validation.init.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/jquery.form.js') }}"></script>

<script type="text/javascript">
    var ajaxworkAreaContain = '{{route("workarea.contain.ajax")}}';
    var deleteWorkAreaContain = "{{route('workarea.contain.delete')}}";
    var csrfToken = $("[name=_token]").val();

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{
            "bSortable": false,
            "aTargets": []
        }],
        "order": [[1, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "language": {"processing": '<button type="button" class="btn btn-dark waves-effect waves-light"><i class="bx bx-loader bx-spin font-size-16 align-middle me-2"></i> Processing...</button>'},
        "ajax": {
            "url": ajaxworkAreaContain,
            "type": "POST",
            "data": {"_token": csrfToken}
        },
        "aoColumns": [
            {"mData": "action","bSortable": false},
            {"mData": "id"},
            {"mData": "name"},
            {"mData": "created_at"},
            {"mData": "updated_at"},
        ]
    });

    function workareaContainDelete(id) {
        swal.fire({
            title: "Are you sure want to delete this?",
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                remove(id);
            }
        });
    }

    function remove(id) {
        $.ajax({
            type: 'GET',
            url: deleteWorkAreaContain + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }
</script>
@endsection