@extends('layouts.app')

@section('page-title', __('Contact Submissions'))
@section('page-heading', __('Contact Submissions'))

@section('breadcrumbs')
    <li class="breadcrumb-item active">
        @lang('Contact Submissions')
    </li>
@stop

@section('content')

    @include('partials.messages')

    <div class="card">
        <div class="card-body">
            <div class="table-responsive" id="contacts-table-wrapper">
                <table id="contacts-table" class="table table-borderless table-striped">
                    <thead>
                        <tr>
                            <th class="min-width-150">@lang('Full Name')</th>
                            <th class="min-width-150">@lang('Email')</th>
                            <th class="min-width-100">@lang('Phone')</th>
                            <th class="min-width-150">@lang('Subject')</th>
                            <th class="min-width-150">@lang('Mission/Dept')</th>
                            <th class="min-width-100">@lang('Role/Rank')</th>
                            <th class="min-width-200">@lang('Message')</th>
                            <th class="min-width-150">@lang('Submitted At')</th>
                            <th class="text-center">@lang('Action')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($contacts))
                            @foreach ($contacts as $contact)
                                <tr>
                                    <td class="align-middle">{{ $contact->fname }}</td>
                                    <td class="align-middle">{{ $contact->email }}</td>
                                    <td class="align-middle">{{ $contact->phone }}</td>
                                    <td class="align-middle">
                                        <span class="badge badge-info">{{ $contact->subject }}</span>
                                    </td>
                                    <td class="align-middle">{{ $contact->service_branch }}</td>
                                    <td class="align-middle">{{ $contact->rank }}</td>
                                    <td class="align-middle">
                                        <small>{{ Str::limit($contact->message, 50) }}</small>
                                    </td>
                                    <td class="align-middle">{{ $contact->created_at }}</td>
                                    <td class="text-center align-middle">
                                        <button class="btn btn-icon" title="@lang('View Full Message')" 
                                                onclick="alert('{{ addslashes($contact->message) }}')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr>
                                <td colspan="9" class="text-center"><em>@lang('No records found.')</em></td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {!! $contacts->render() !!}

@stop

@section('scripts')
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.25/datatables.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap4.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#contacts-table').DataTable({
                dom: 'Bfrtip',
                buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
                "columnDefs": [
                    { "orderable": false, "targets": 8 } // Disable sorting on Action column
                ]
            });
        });
    </script>
@stop