@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
    .row{
        align-items: center;
    }
    .scrollable-menu {
        height: auto;
        max-height: 500px;
        overflow-x: hidden;
    }
    .dataTables_scrollBody {
            height: 279px !important;
    }
    ::-webkit-scrollbar {
        width: 16px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #d6dee1;
        border-radius: 20px;
        border: 4px solid transparent;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

    body {
        font-size: 14px;
    }

    .container {
        max-width: 960px;
        margin: 0 auto;
    }

    nav ul li {
        list-style: none;
        float: left;
        padding-right: 20px;
    }

    .nav-pills .nav-link.active,
    .nav-pills .show>.nav-link {
        color: #fff;
        background-color: #2762e4;
    }

    nav ul li a {
        text-decoration: none;
        color: #222;
        background-color: #ccc;
        padding: 4px 5px;
    }

    .active {
        background-color: #d90000;
        color: #fff;
    }

    img.general {
        height: 50px;
        margin-bottom: 20px;
    }

    img.loading {
        height: 200px;
        margin-bottom: 20px;
    }

    @media screen and (max-width:480px) {
        .p-4 {
            padding: 0.8rem !important;
        }

        .page-title-box {
            padding-bottom: 15px;
        }
    }

    .nav-justified .nav-item {
        -webkit-box-flex: 1;
        flex-grow: 1;
        text-align: center;
    }

    .nav-justified .nav-item {
        flex-basis: unset !important;
    }

    .nav-fill .nav-item .nav-link,
    .nav-justified .nav-item .nav-link {
        width: unset !important;
    }

    .d-sm-block {
        display: block !important;
        clear: both;
        overflow: hidden;
        white-space: nowrap;
    }

    span#cke_1,
    span#cke_11,
    span#cke_19,
    span#cke_21,
    span#cke_25,
    span#cke_32,
    span#cke_30 {
        display: none;
    }

    .nav-pills .nav-link {
        background-color: #fff;
    }

    .label {
        cursor: pointer;
    }

    .progress {
        display: none;
        margin-bottom: 1rem;
    }

    .alert {
        display: none;
    }

    .img-container img {
        max-width: 100%;
    }

    .disclaimer tr td {
        padding: 6px 10px;
    }
</style>

<div class="page-content client-tr">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <div class="col-md-3">
                        <h4 class="mb-sm-0 font-size-18">
                            <a href="javascript:void(0);" onclick="history.back();" class="btn btn-primary px-4 waves-effect waves-light btn-sm"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
                        </h4>
                    </div>
                    <div class="col-md-9 float-end">
                        <div class="float-end">
                            <div class="page-title-right">
                                @include('../reachassuree_admin/agent_webpage_setting/comman')
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0 font-size-18"></h4>
                            <div class="col-md-1">
                                <div class="page-title-right">
                                    <a href="{{ route('disclaimer.form') }}" class="btn btn-primary px-4 w-md"><i class="bx bx-plus font-size-16 align-middle me-2"></i>Add</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content p-4">
                    <div class="row">
                        <table id="datatable" class="table align-middle table-nowrap table-striped scrollable-element w-100 disclaimer ">
                            <thead class="table-light">
                                <tr>
                                    <th>Id</th>
                                    <th>Topic Name</th>
                                    <th>Description</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection('content')
@section('custom-scripts')
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
<script type="text/javascript">
    var deleteDisclaimer = "{{route('disclaimer.delete')}}";
    var addForm = "{{route('agentwebpage.setting')}}";

    var csrfToken = $("[name=_token]").val();
    var ajaxURLGetDisclaimer = '{{route("disclaimer.ajax")}}';
    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": []}],
        "order": [[0, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() { return $(window).height() - 320;},
        "lengthMenu": [[10, 50, 100, 150],[10, 50, 100, 150]],
        "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": ajaxURLGetDisclaimer,
            "type": "POST",
            "data": {"_token": csrfToken,}
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "topic_name"},
            {"mData": "description",
                render: function(mData, type, row) {
                    var cleanedData = mData.replace(/<\/?[^>]+(>|$)/g, "");
                    return type === "display" && cleanedData.length > 100 ? '<span title="' + cleanedData + '">' + cleanedData.substr(0, 150) + "...</span>" : cleanedData;
                },
            },
            {"mData": "action", "bSortable" : false},
        ]
    });

    $('ul.generalsetting li a').click(function() {
        $('li a').removeClass("active");
        $(this).addClass("active");
    });

    function reloadTable() {
        $('#datatable').DataTable().ajax.reload(null, false);
    }

    function disclaimerDelete(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: deleteDisclaimer + "?id=" + id,
            success: function(resultData) {
                if (resultData['status'] == 1) {
                    toastr["success"](resultData['msg']);
                    $('#datatable').DataTable().ajax.reload(null, false);
                }
            }
        });
    }
</script>
@endsection