@extends('dashboard.layout.content')

@section('customTitle')
@lang('general.show_contact_us')
@endsection

@section('customStyle')
<link href='{{ asset("dashboard/$locale/assets/css/elements/alert.css") }}' rel="stylesheet" type="text/css" />
@endsection

@section('customBody')
<div id="content" class="main-content">
    <div class="layout-px-spacing">
        <div class="row layout-top-spacing">
            <div class="col-12 layout-spacing">
                <div class="widget-content widget-content-area br-6">
                    <div class="table-responsive">
                        <table id="contactsTable" class="table table-hover text-center">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{__('validation.attributes.created_at')}}</th>
                                    <th>{{__('dashboard.Username')}}</th>
                                    <th>{{__('dashboard.Email')}}</th>
                                    <th>{{__('dashboard.Mobile')}}</th>
                                    <th>{{__('dashboard.Message Title')}}</th>
                                    <th>{{__('dashboard.is_replied')}}</th>
                                    {{-- <th>{{__('dashboard.Message Text')}}</th> --}}
                                    <th>{{__('general.options')}}</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>#</th>
                                    <th>{{__('validation.attributes.created_at')}}</th>
                                    <th>{{__('dashboard.Username')}}</th>
                                    <th>{{__('dashboard.Email')}}</th>
                                    <th>{{__('dashboard.Mobile')}}</th>
                                    <th>{{__('dashboard.Message Title')}}</th>
                                    <th>{{__('dashboard.is_replied')}}</th>
                                    {{-- <th>{{__('dashboard.Message Text')}}</th> --}}
                                    <th>{{__('general.options')}}</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<x-bootstrap.modal id="replyModal" content="dashboard.contact.modals.reply" />

<x-bootstrap.modal id="messageModal" content="dashboard.contact.modals.message"/>


@endsection

@section('customScript')
<script>
    $("#contacts-menu-box").attr("data-active", "true")

    initializeDataTable("#contactsTable",{
        columns : [
            {data: 'DT_RowIndex', orderable: false, searchable: false },
            {data: "created_at"},
            {data: "name"},
            {data: "email"},
            {data: "mobile",className:"ltr"},
            {data: "title"},
            {data: "is_replied"},
            /* {data: "message"}, */
            {data: "actions", searchable: false, orderable: false},
    ]});

    $(document).on("click",".replyBtn",function(e){
        e.preventDefault();
        let contact = $(this).data("contact");
        let email = $(this).data("email");

        $("#replyModal form").attr('action','/dashboard/contact/' + contact + '/reply');
        $("#replyModal .modal-title").html(email);
        $("#replyModal").modal();

    });

    $(document).on("click",".messageBtn",function(e){
        e.preventDefault();

        let message = $(this).data("message");
        $("#messageModal .modal-title").html("نص الرسالة");
        $("#messageModal #message").html(message);
        $("#messageModal").modal();

    });

</script>
@endsection