@extends('cms.layouts.app')

@section('pre-styles')
    <x-cms.css-helper :dataTable="true" />
@endsection

@section('contents')
    <!-- Hero -->
    <x-cms.bread-crumb title="Contact Us Query">
    </x-cms.bread-crumb>
    <!-- END Hero -->

    <div class="content">
        {{-- <x-cms.common-message /> --}}
        @if ($message = Session::get('success'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
        @elseif($message = Session::get('danger'))
            <div class="alert alert-danger alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
        @endif

        <x-cms.data-table>

            <x-slot name="header">
                <th style="width: 15%;" class="text-center">Created Date</th>
                <th class="text-center" style="width: 25%;">Name</th>
                <th class="text-center" style="width: 25%;">Subject</th>
                <th class="text-center" style="width: 10%;">Status</th>
                <th class="text-center" style="max-width: 70px;">Action</th>
            </x-slot>

            <x-slot name="body">
                @foreach ($contactUsQueries as $query)
                    <tr class="{{ $query->deleted_at == null ? '' : 'bg-danger text-white' }}">
                        <td class="text-center">
                            {{ $query->created_at }}
                            {{-- {{ $query->created_at->format('d M Y,') }}<br>
                            {{ $query->created_at->format('h:i:s a') }} --}}

                        </td>
                        <td class="text-center text-ellipsis">
                            <a data-toggle="modal" data-target="#myModal{{ $query->id }}"
                                style="cursor:pointer; color: blue">
                                {{ $query->name ?? '' }}<br>
                                {{ $query->email ?? '' }}
                            </a>
                        </td>
                        <td class="text-center text-ellipsis"><a data-toggle="modal"
                                data-target="#myModal{{ $query->id }}"
                                style="cursor:pointer; color: blue">{{ $query->subject ?? '' }}</a></td>
                        <td class="text-center text-ellipsis">

                            @if ($query->is_read == 1)
                                <span class="badge badge-success p-2" data-toggle="modal"
                                    data-target="#myModal{{ $query->id }}" style="cursor: pointer">Read</span>
                            @else
                                <span class="badge badge-danger p-2" data-toggle="modal"
                                    data-target="#myModal{{ $query->id }}" style="cursor: pointer">Unread</span>
                            @endif

                        </td>
                        <td class="text-center">

                            @if ($query->deleted_at == null)
                                <button style="padding: 2.8px 8px 2.8px 8px;" type="button" data-toggle="modal"
                                    data-target="#myModal{{ $query->id }}" title="Show Details"
                                    class="btn btn-info btn-sm"><i class="fa fa-eye"></i></button>

                                <x-cms.table-action-button type="delete" routeName="contact-us-queries.destroy"
                                    modelName="contact_us_query" :model="$query" />
                            @else
                                <x-cms.table-action-button type="restore" routeName="contact-us-queries.restore"
                                    modelName="contact_us_query_id" :model="$query" />
                                <x-cms.table-action-button type="destroy-permanently"
                                    routeName="contact-us-queries.destroy-permanently" modelName="contact_us_query_id"
                                    :model="$query" />
                            @endif
                        </td>
                    </tr>

                    <!-- The Modal -->
                    <div class="modal" id="myModal{{ $query->id }}">
                        <div class="modal-dialog modal-md">
                            <div class="modal-content">

                                <!-- Modal Header -->
                                <div class="modal-header">
                                    <h4 class="modal-title">{{ $query->subject }}</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <form action="{{ route('contact-us-queries.update', $query->id) }}" method="post"
                                    enctype="multipart/form-data">
                                    {{ csrf_field() }} {{ method_field('PATCH') }}

                                    <!-- Modal body -->
                                    <div class="modal-body pt-0">
                                        <strong>Name:</strong> {{ $query->name ?? '' }} <br>
                                        <strong>Email:</strong> {{ $query->email ?? '' }} <br>
                                        <strong>Subject:</strong> {{ $query->subject ?? '' }} <br>
                                        <strong>Message:<br></strong> {{ $query->query_message ?? '' }}

                                        <br> <br>


                                        <span style="position: relative; ">

                                            <input type="checkbox" name="is_read" value="1"
                                                {{ $query->is_read == 1 ? 'checked' : '' }} class="mr-1 mt-2"
                                                style="width:20px; height:20px; margin-top:10px!important">
                                            <label for="is_read"
                                                style="margin-top:7px; position: absolute; width:200px; margin-left:5px">Mark
                                                as
                                                Read</label>
                                        </span>

                                    </div>

                                    <!-- Modal footer -->
                                    <div class="modal-footer">
                                        <input type="submit" value="Update" class="btn btn-primary">

                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                @endforeach
            </x-slot>

        </x-cms.data-table>
    </div>
@endsection

@section('scripts')
    <x-cms.js-helper :dataTable="true" />
@endsection

<style>
    .text-ellipsis {
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .text-ellipsis:hover {
        overflow: visible;
        white-space: normal;
        word-wrap: break-word;
    }

    .modal-title {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .modal-title:hover {
        overflow: visible;
        white-space: normal;
        word-wrap: break-word;
    }
</style>