@extends('admin.master')
@section('title', 'Contact' )
@section('breadcrumb')
    <div class="breadcrumb-area">
        <h5>{{ translate('Dashboard') }}</h5>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ translate('Dashboard') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ translate('Contact') }}</li>
            </ol>
        </nav>
    </div>
@endsection
@section('main_content')
    <div class="main-content">
        <div class="page-title text-md-start text-center">
            <h4> {{translate('Contact List')}}</h4>
        </div>
        <div class="table-wrapper">
            <table class="eg-table table customer-table">
                <thead>
                    <tr>
                        <th>{{ translate('S.N') }}</th>
                        <th>{{ translate('Name') }}</th>
                        <th>{{ translate('Email') }}</th>
                        <th>{{ translate('Phone') }}</th>
                        <th>{{ translate('Subject') }}</th>
                        <th>{{ translate('Date') }}</th>
                        <th>{{ translate('Option') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @if(count($contacts)>0)
                        @foreach($contacts as $index => $contact)
                        <tr id="item{{ $contact->id }}">
                            <td data-label="{{ translate('S.N') }}"> {{$index+1}}</td>
                            <td data-label="{{ translate('Name') }}">{{$contact->name}}</td>
                            <td data-label="{{ translate('Email') }}">{{$contact->email}}</td>
                            <td data-label="{{ translate('Phone') }}">{{$contact->phone}}</td>
                            <td data-label="{{ translate('Subject') }}">{{ Str::limit(strip_tags($contact->Message), 50) }}</td>
                            <td data-label="{{ translate('Date') }}">{{ customDateFormate($contact->created_at, $patter = 'd M, y')}}</td>
                            <td data-label="{{ translate('Option') }}">
                                <div class="d-flex flex-row justify-content-md-center justify-content-end align-items-center gap-2">
                                <button onclick="contactDetails({{ $contact->id }})" class="eg-btn add--btn"><i class="bi bi-eye"></i></button>
                                @can('contact.delete')
                                    <a  href="{{route("admin.contactDelete", $contact->id)}}"  class="eg-btn delete--btn show_confirm" title="Delete"><i class="bi bi-trash"></i></a>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    @else
                        <tr><td colspan="6">{{ translate('Contact not found.') }}</td></tr>
                    @endif
                </tbody>
            </table>
            <div class="pagination-area">
                {{ $contacts->links() }}
            </div>
        </div>
    </div>
    <div class="modal fade" id="contactDetailsModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    {{ translate('Contact Details') }}
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="showContactDetails">

                </div>
            </div>
        </div>
    </div>
@endsection
@push('post_scripts')
<script>
    function contactDetails(id) {
        $('#contactDetailsModal').modal('show');
        var url = "{{ route('admin.contactDetails', ':id') }}";
        url = url.replace(':id',id);
        $.ajax({
            method:"get",
            url:url,
            success:function(data){
                $("#showContactDetails").html(data);
            }
        });
    }
</script>
@endpush