@component('components.data-table',['tableID'=>"tablecontact"])
    @slot('thead')
        <tr>
            <th> @lang('main.id') </th>
            <th>@lang('main.name')</th>
            <th>@lang('main.email')</th>
            <th>@lang('main.message')</th>
            <th>@lang('main.status')</th>
            <th> @lang('main.delete') </th>
        </tr>
    @endslot
    @slot('tbody')
        @foreach ($contacts ?? [] as $contact)
            <tr>
                <td>{{$contact->id}}</td>
                <td>{{$contact->name}}</td>
                <td>{{$contact->email}}</td>
                <td>{{$contact->message}}</td>
                <td>
                    @if (!$contact->is_read)
                        <form name="toggleStatus{{$loop->index}}" action="{{route('dashboard.contact.toggleStatus',$contact)}}" method="post">@csrf</form>
                        <button onclick="confirm(' @lang('main.change_status') ')?toggleStatus{{$loop->index}}.submit():''" class="btn btn-sm  btn-danger ">{{__('main.mark_as_read')}}</button>
                    @else
                        <button type="button" class="btn-sm btn btn-success disabled">@lang('main.contact_read')</button>
                    @endif
                </td>
                <td>
                    <form name="contactDelete{{$contact->id}}" action="{{route('dashboard.contact.destroy',$contact)}}" method="post">@csrf @method('DELETE')</form>
                    <button type="button" onclick="confirm(' @lang('main.contact_delete') ')?contactDelete{{$contact->id}}.submit():''" class="btn btn-sm btn-danger">@lang('main.delete')</button>
                </td>
            </tr>
        @endforeach
    @endslot

@endcomponent

@isset($contacts)
<div class="text-right"> <div class="d-inline-block">{{$contacts->links()}}</div> </div>
@endisset
@push('js')
    <script>
        $(document).ready(function() {
            $('#tablecontact').DataTable({
                paginate:false
            });
        });
    </script>
@endpush