@extends('layouts.admin-simple')

@section('title', 'Contact Inquiries')
@section('page-title', 'Contact Inquiries')

@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Contact Inquiries</li>
@endsection

@section('content')
<!-- Statistics Cards Row -->
<div class="row mb-4">
    <!-- Total Inquiries -->
    <div class="col-xl col-lg-4 col-md-6 mb-4">
        <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-left: 4px solid #6366f1 !important;">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small font-weight-bold text-uppercase mb-1">Total Inquiries</div>
                        <div class="h3 mb-0 font-weight-bold text-dark">{{ $stats['total'] }}</div>
                    </div>
                    <div class="text-primary">
                        <i class="fas fa-envelope fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pending -->
    <div class="col-xl col-lg-4 col-md-6 mb-4">
        <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-left: 4px solid #f59e0b !important;">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small font-weight-bold text-uppercase mb-1">Pending</div>
                        <div class="h3 mb-0 font-weight-bold text-dark">{{ $stats['pending'] }}</div>
                    </div>
                    <div class="text-warning">
                        <i class="fas fa-clock fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Reviewed -->
    <div class="col-xl col-lg-4 col-md-6 mb-4">
        <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%); border-left: 4px solid #3b82f6 !important;">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small font-weight-bold text-uppercase mb-1">Reviewed</div>
                        <div class="h3 mb-0 font-weight-bold text-dark">{{ $stats['reviewed'] }}</div>
                    </div>
                    <div class="text-info">
                        <i class="fas fa-eye fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Responded -->
    <div class="col-xl col-lg-4 col-md-6 mb-4">
        <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-left: 4px solid #10b981 !important;">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small font-weight-bold text-uppercase mb-1">Responded</div>
                        <div class="h3 mb-0 font-weight-bold text-dark">{{ $stats['responded'] }}</div>
                    </div>
                    <div class="text-success">
                        <i class="fas fa-check-circle fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Closed -->
    <div class="col-xl col-lg-4 col-md-6 mb-4">
        <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #fafafa 0%, #f4f4f5 100%); border-left: 4px solid #6b7280 !important;">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small font-weight-bold text-uppercase mb-1">Closed</div>
                        <div class="h3 mb-0 font-weight-bold text-dark">{{ $stats['closed'] }}</div>
                    </div>
                    <div class="text-muted">
                        <i class="fas fa-archive fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">

    <!-- Filters -->
    <div class="card-body border-bottom">
        <form method="GET" action="{{ route('admin.contact-inquiries.index') }}">
            <div class="row align-items-end">
                <div class="col-md-3">
                    <label class="form-label">Search</label>
                    <input type="text" name="search" class="form-control" placeholder="Search by name, email, company..." value="{{ request('search') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-control custom-select">
                        <option value="">All Statuses</option>
                        @foreach(\App\Models\ContactInquiry::getStatuses() as $key => $label)
                            <option value="{{ $key }}" {{ request('status') == $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Subject</label>
                    <select name="subject" class="form-control custom-select">
                        <option value="">All Subjects</option>
                        @foreach(\App\Models\ContactInquiry::getSubjects() as $key => $label)
                            <option value="{{ $key }}" {{ request('subject') == $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <div class="btn-group" role="group">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> Filter
                        </button>
                        <a href="{{ route('admin.contact-inquiries.index') }}" class="btn btn-secondary">
                            <i class="fas fa-undo"></i> Reset
                        </a>
                        <a href="{{ route('admin.contact-inquiries.export', request()->all()) }}" class="btn btn-success">
                            <i class="fas fa-download"></i> Export
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Table -->
    <div class="card-body">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Subject</th>
                        <th>Message</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($inquiries as $inquiry)
                        <tr>
                            <td>
                                <small class="text-muted">{{ $inquiry->created_at->format('M d, Y') }}<br>{{ $inquiry->created_at->format('h:i A') }}</small>
                            </td>
                            <td>
                                <strong>{{ $inquiry->name }}</strong>
                                @if($inquiry->company)
                                    <br><small class="text-muted">{{ $inquiry->company }}</small>
                                @endif
                                @if($inquiry->phone)
                                    <br><small class="text-muted">{{ $inquiry->phone }}</small>
                                @endif
                            </td>
                            <td>{{ $inquiry->email }}</td>
                            <td>
                                <span class="badge badge-light">{{ $inquiry->subject_label }}</span>
                            </td>
                            <td>
                                <span class="text-truncate d-inline-block" style="max-width: 200px;" title="{{ $inquiry->message }}">
                                    {{ Str::limit($inquiry->message, 50) }}
                                </span>
                            </td>
                            <td>
                                <span class="badge {{ $inquiry->status_badge_class }}">
                                    {{ $inquiry->status_label }}
                                </span>
                            </td>
                            <td>
                                <div class="dropdown">
                                    <a href="#" class="dropdown-toggle text-muted" data-toggle="dropdown" data-caret="false">
                                        <i class="material-icons">more_vert</i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a href="{{ route('admin.contact-inquiries.show', $inquiry) }}" class="dropdown-item">
                                            <i class="fas fa-eye"></i> View Details
                                        </a>
                                        <a href="#" class="dropdown-item" onclick="updateStatus({{ $inquiry->id }}, 'responded')">
                                            <i class="fas fa-check"></i> Mark as Responded
                                        </a>
                                        <a href="#" class="dropdown-item" onclick="updateStatus({{ $inquiry->id }}, 'closed')">
                                            <i class="fas fa-times"></i> Close Inquiry
                                        </a>
                                        <div class="dropdown-divider"></div>
                                        <a href="#" class="dropdown-item text-danger delete-inquiry"
                                           data-id="{{ $inquiry->id }}"
                                           data-name="{{ $inquiry->name }}">
                                            <i class="fas fa-trash"></i> Delete
                                        </a>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">
                                <i class="fas fa-envelope fa-3x mb-3"></i>
                                <br>No contact inquiries found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($inquiries->hasPages())
            <div class="d-flex justify-content-center mt-4">
                {{ $inquiries->withQueryString()->links() }}
            </div>
        @endif
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete the inquiry from "<span id="deleteInquiryName"></span>"?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function updateStatus(inquiryId, status) {
    if (confirm('Are you sure you want to update the status?')) {
        $.ajax({
            url: `/admin/contact-inquiries/${inquiryId}/status`,
            type: 'PATCH',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                status: status
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                }
            },
            error: function() {
                alert('Error updating status. Please try again.');
            }
        });
    }
}

$(document).ready(function() {
    $('.delete-inquiry').click(function() {
        const inquiryId = $(this).data('id');
        const inquiryName = $(this).data('name');
        
        $('#deleteInquiryName').text(inquiryName);
        $('#deleteForm').attr('action', `/admin/contact-inquiries/${inquiryId}`);
        $('#deleteModal').modal('show');
    });
});
</script>
@endpush