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

<style>
   
    @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;
        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_142,
    span#cke_140,
    span#cke_135,
    span#cke_131,
    span#cke_129,
    span#cke_121,
    span#cke_70,
    span#cke_78,
    span#cke_80,
    span#cke_84,
    span#cke_89,
    span#cke_91,
    span#cke_19,
    span#cke_27,
    span#cke_29,
    span#cke_33,
    span#cke_38,
    span#cke_40 {
        display: none;
    }

    /*  table contain display in multiple line */
    #datatable tbody tr td:nth-child(3) {
        white-space: normal;
        word-wrap: break-word;
        max-width: 250px;
    }

    .label {
        cursor: pointer;
    }

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

    .alert {
        display: none;
    }

    .img-container img {
        max-width: 100%;
    }
</style>

<meta name="csrf-token" content="{{ csrf_token() }}" />

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        @include('../reachassuree_agent/master/comman/header')
        @include('../reachassuree_agent/setting/webpage_setting/comman')

        <div class="card">
            <div class="card-body">
                <div class="tab-content">
                    <div class="row">
                        <table id="datatable" class="table align-middle table-nowrap w-100 table-striped scrollable-element">
                            <thead class="table-light">
                                <tr>
                                    <th>Id</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>PhoneNo</th>
                                    <th>Subject</th>
                                    <th>Message</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@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 src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>

<script type="text/javascript">
    var ajaxURLGetcontactUs = '{{route("contact.us.setting.ajax")}}';
    var deleteContactUs = "{{route('contact.us.setting.delete')}}";
    var csrfToken = $("[name=_token]").val();

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

    var table = $('#datatable').DataTable({
        "aoColumnDefs": [{"bSortable": true,"aTargets": []}],
        "order": [[0, 'desc']],
        "processing": true,
        "serverSide": true,
        "scrollX": true,
        "scrollY": function() {return $(window).height() - 100},
        "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": ajaxURLGetcontactUs,
            "type": "POST",
            "data": {"_token": csrfToken}
        },
        "aoColumns": [
            {"mData": "id"},
            {"mData": "name"},
            {"mData": "email"},
            {"mData": "phoneno"},
            {"mData": "subject"},
            {"mData": "yourmessage"},
            {"mData": "action", "bSortable": false},
        ]
    });
</script>
@endsection