@extends('admin.layouts.app')

@section('content')

@if (count($errors) > 0)
<div class="alert alert-danger">
    @foreach ($errors as $error)
    <ul>
        <li>{{ $error }}</li>
    </ul>
    @endforeach
</div>
@endif

@if (session('contact_delete_msg'))
<div class="alert alert-success">
    {{ session('contact_delete_msg') }}
</div>
@endif


<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h3 class="mb-3"> {{ awtTrans('الرسايل الغير مقروءة') }} </h3>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="dataTableContacts" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>{{ awtTrans('Delete') }}</th>
                        <th>{{ awtTrans('Sender') }}</th>
                        <th>{{ awtTrans('Email') }}</th>
                        <th>{{ awtTrans('Phone') }}</th>
                        <th>{{ awtTrans('Message') }}</th>
                        <th>{{ awtTrans('Actions') }}</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>{{ awtTrans('Delete') }}</th>
                        <th>{{ awtTrans('Sender') }}</th>
                        <th>{{ awtTrans('Email') }}</th>
                        <th>{{ awtTrans('Phone') }}</th>
                        <th>{{ awtTrans('Message') }}</th>
                        <th>{{ awtTrans('Actions') }}</th>
                    </tr>
                </tfoot>
                <tbody>
                    @if (!empty($contacts))
                    @foreach ($contacts as $contact)
                    <tr>
                        <td>{{ $contact->id }}</td>
                        <td>
                            <Strong>{{ $contact->name }}</Strong>
                        </td>
                        <td>
                            <small><a href="mailto:{{ $contact->email }}">{{ $contact->email }}</a></small>
                        </td>
                        <td>
                            <small><a href="tel:{{ $contact->phone }}">{{ $contact->phone }}</a></small>
                        </td>
                        <td>
                            <div class="mb-2">{{ $contact->message }}</div>
                            <small class=""><em>{{ awtTrans('Time And Date') }}: {{ $contact->created_at }}</em></small>

                            <a href="javascript:void(0)" class="contact-read contact-read-{{ $contact->id }} text-decoration-none ml-2 {{ $contact->read == 1 ? 'd-none' : '' }}" data-id="{{ $contact->id }}">{{ awtTrans('Mark as read') }} <i class="far fa-check-circle fa-sm"></i></a>
                            <a href="javascript:void(0)" class="contact-unread contact-unread-{{ $contact->id }} text-decoration-none ml-2 text-danger {{ $contact->read == 0 ? 'd-none' : '' }}" data-id="{{ $contact->id }}">{{ awtTrans('Mark as read') }} <i class="far fa-times-circle fa-sm"></i></a>
                        </td>
                        <td>
                            <a href=" {{ route('admin.contacts.destroy', $contact->id) }}" data-id="{{$contact->id}}" class="btn btn-danger btn-circle btn-sm item-delete">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection



@section('scripts')
<script>
    $(document).ready(function() {
        $('#dataTableContacts').DataTable({
            order: [0, 'desc'],
            'language': {
                'url': "{{ app()->getLocale() == 'ar' ? 'https://cdn.datatables.net/plug-ins/1.10.12/i18n/Arabic.json' : 'https://cdn.datatables.net/plug-ins/1.10.12/i18n/English.json' }}",
            },
        });
    });


    $('.contact-read').click(function() {
        var contactId = $(this).data('id');
        var url = '/admin/contacts/' + contactId;
        axios.put(url, {
                read: 1,
            })
            .then(res => {
                if (res.status == 200) {
                    if (res.data == 1) {
                        $('.contact-read-' + contactId).addClass('d-none');
                        $('.contact-unread-' + contactId).removeClass('d-none');

                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-start',
                            showConfirmButton: false,
                            timer: 4000,
                            timerProgressBar: true,
                            didOpen: (toast) => {
                                toast.addEventListener('mouseenter', Swal.stopTimer)
                                toast.addEventListener('mouseleave', Swal.resumeTimer)
                            }
                        })

                        Toast.fire({
                            icon: 'success',
                            title: "{{ awtTrans('تم القراءة') }}"
                        })

                    } else {
                        toastr.error('Update failed');
                    }
                } else {
                    toastr.error('Update failed');
                }
            })
            .catch(err => {
                toastr.error(err);
            })
    });

    $('.contact-unread').click(function() {
        var contactId = $(this).data('id');
        var url = '/admin/contacts/' + contactId;
        axios.put(url, {
                read: 0,
            })
            .then(res => {
                if (res.status == 200) {
                    if (res.data == 1) {
                        $('.contact-unread-' + contactId).addClass('d-none');
                        $('.contact-read-' + contactId).removeClass('d-none');

                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-start',
                            showConfirmButton: false,
                            timer: 4000,
                            timerProgressBar: true,
                            didOpen: (toast) => {
                                toast.addEventListener('mouseenter', Swal.stopTimer)
                                toast.addEventListener('mouseleave', Swal.resumeTimer)
                            }
                        })

                        Toast.fire({
                            icon: 'success',
                            title: "{{ awtTrans('تم إلغاء القراءة') }}"
                        })

                    } else {
                        toastr.error('Update failed');
                    }
                } else {
                    toastr.error('Update failed');
                }
            })
            .catch(err => {
                toastr.error(err);
            })
    });
</script>
@endsection