@extends('admin.layouts.master')

@push('css')
<style>
    #enquiryMessage {
        height: auto;
    }
</style>
@endpush

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

    <h4>Inquiries Listings</h4>

    <div class="card">
        <h5 class="card-header row">
            <form class="row" action="">
                <div class="col-5 form-floating form-floating-outline mb-6">
                    <div>
                        <input class="form-control form-control-sm" name="customer" type="text"
                            placeholder="Search Customer Details..." value="{{ request()->get('customer') }}">
                    </div>
                </div>
                <div class="col-4 form-floating form-floating-outline mb-6">
                    <div>
                        <input type="hidden" name="page" value="{{ request()->get('page') }}">
                        <input class="form-control form-control-sm" name="enquiry" type="text"
                            placeholder="Search Inquiries" value="{{ request()->get('enquiry') }}">
                    </div>
                </div>
                <div class="col-2 form-floating form-floating-outline mb-6 form-check mt-s4">
                    <div class="form-check form-switch mb-2 mt-2">
                        <input class="form-check-input" type="checkbox" name="pending" id="flexSwitchCheckChecked" {{
                            request()->get('pending') ? 'checked' : '' }}>
                        <label class="form-check-label" name="resolved" for="flexSwitchCheckChecked">Pending</label>
                    </div>
                </div>
                <div class="col-1 form-floating form-floating-outline mb-6">
                    <div>
                        <button type="submit" class="btn btn-secondary waves-effect waves-light w-100">Search</button>
                    </div>
                </div>
            </form>

        </h5>
        <div class="table-responsive text-nowrap">
            <table class="table table-striped table-responsive table-hoverr">
                <thead>
                    <tr>
                        <th>SN</th>
                        <th>Customer Name</th>
                        <th>Customer Contact</th>
                        <th>Subject</th>
                        <th>Message</th>
                        <th>Resolved</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody class="table-border-bottom-0">
                    @if(count($enquiries) > 0)
                    @foreach($enquiries as $key => $enquiry)
                    <tr>
                        <td>{{ ($enquiries->currentPage() - 1) * $enquiries->perPage() + $key + 1 }}</td>
                        <td>{{ $enquiry->name }}</td>
                        <td>{{ $enquiry->phone ?? 'N/A' }}</td>
                        <td>{{ $enquiry->subject ?? 'N/A' }}</td>
                        <td data-subject="{{ $enquiry->message ?? 'N/A' }}">{{ Str::limit($enquiry->message, 60, '...')
                            ?? 'N/A' }}</td>
                        <td>
                            @if($enquiry->resolved)
                            <span class="badge rounded-pill bg-label-success me-1">Resolved</span>
                            @endif
                            @if(!$enquiry->resolved)
                            <span class="badge rounded-pill bg-label-warning me-1">Pending</span>
                            @endif
                        </td>
                        <td>
                            <div class="dropdown">
                                <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                    data-bs-toggle="dropdown">
                                    <i class="ri-more-2-line"></i>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item waves-effect show-modal" data-bs-toggle="modal"
                                        data-bs-target="#largeModal">
                                        <i class="ri-pencil-line me-1"></i>View
                                    </a>
                                    @if(!$enquiry->resolved)
                                    <a class="dropdown-item waves-effect"
                                        href="{{ route('admin.enquiries.toogle', $enquiry->id, request()->all()) }}">
                                        <i class="ri-check-line me-1"></i>Mark Resolved
                                    </a>
                                    @endif
                                    <a class="dropdown-item waves-effect delete-enquiry" href="javascript:void(0);"
                                        data-url="{{ route('admin.enquiries.destroy', $enquiry->id) }}">
                                        <i class="ri-delete-bin-6-line me-1"></i>Delete
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="7" class="text-center pt-5">
                            <h5>😢 No Inquiries found  @if (count(request()->all()) > 0) <a
                                    href="{{ route('admin.enquiries.index') }}">Reset Filter</a> @endif
                            </h5>
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>

            <hr>
            {{ $enquiries->appends(request()->all())->links('pagination::bootstrap-4') }}


        </div>
    </div>
    <!--/ Striped Rows -->

    <div class="modal" id="largeModal" tabindex="-1" aria-modal="true" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel3">View Enquiry Detail</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body row">
                    <div class="col-6 mb-6 mt-2">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="enquiryName" class="form-control" readonly value="Customer Name">
                            <label for="nameLarge">Customer Name</label>
                        </div>
                    </div>
                    <div class="col-6 mb-6 mt-2">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="enquiryEmail" class="form-control" readonly value="Customer Email">
                            <label for="nameLarge">Customer Email</label>
                        </div>
                    </div>
                    <div class="col-12 mb-6 mt-2">
                        <div class="form-floating form-floating-outline">
                            <input type="text" id="enquirySubject" class="form-control" readonly
                                value="Enquiry Subject">
                            <label for="nameLarge">Enquiry Subject</label>
                        </div>
                    </div>

                    <div class="col-12 mb-6 mt-2">
                        <div class="form-floating form-floating-outline">
                            <textarea id="enquiryMessage" class="form-control" readonly></textarea>
                            <label for="nameLarge">Enquiry Message</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary waves-effect" data-bs-dismiss="modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
    $(document).ready(function () {
        $('#enquiryMessage').on('input', function () {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });

        $('body').on('click', '.show-modal', function () {
            $('#enquiryName').val($(this).closest('tr').find('td:eq(1)').html());
            $('#enquiryPhone').val($(this).closest('tr').find('td:eq(2)').html());
            $('#enquirySubject').val($(this).closest('tr').find('td:eq(3)').html());
            $('#enquiryMessage').val($(this).closest('tr').find('td:eq(4)').data('subject'));
            $('#enquiryMessage').css('height', $('#enquiryMessage')[0].scrollHeight + 'px');
        });

        $('body').on('click', '.delete-enquiry', function (e) {
            e.preventDefault();
            var deleteUrl = $(this).data('url'); // Get the delete URL

            // Show confirmation alert
            if (confirm('Are you sure you want to delete this enquiry?')) {
                window.location.href = deleteUrl; // Redirect to the delete URL
            }
        });
    });
</script>
@endpush