@extends('layouts.app')

@section('title', 'Contact Submission Details - Royal Gulf Turning Engineering')

@section('content')
<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
            <!-- Page Title Box -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">Contact Submission Details</h4>
                        <div class="page-title-right">
                            <a href="{{ route('contacts.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back to List
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Details -->
            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Contact Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="row mb-3">
                                <div class="col-sm-3">
                                    <strong>Name:</strong>
                                </div>
                                <div class="col-sm-9">
                                    {{ $contact->name }}
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-sm-3">
                                    <strong>Email:</strong>
                                </div>
                                <div class="col-sm-9">
                                    <a href="mailto:{{ $contact->email }}">{{ $contact->email }}</a>
                                </div>
                            </div>
                            
                            @if($contact->phone)
                            <div class="row mb-3">
                                <div class="col-sm-3">
                                    <strong>Phone:</strong>
                                </div>
                                <div class="col-sm-9">
                                    <a href="tel:{{ $contact->phone }}">{{ $contact->phone }}</a>
                                </div>
                            </div>
                            @endif
                            
                            <div class="row mb-3">
                                <div class="col-sm-3">
                                    <strong>Subject:</strong>
                                </div>
                                <div class="col-sm-9">
                                    {{ $contact->subject }}
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-sm-3">
                                    <strong>Status:</strong>
                                </div>
                                <div class="col-sm-9">
                                    @switch($contact->status)
                                        @case('pending')
                                            <span class="badge bg-warning">Pending</span>
                                            @break
                                        @case('read')
                                            <span class="badge bg-info">Read</span>
                                            @break
                                        @case('replied')
                                            <span class="badge bg-primary">Replied</span>
                                            @break
                                        @case('resolved')
                                            <span class="badge bg-success">Resolved</span>
                                            @break
                                        @default
                                            <span class="badge bg-secondary">Unknown</span>
                                    @endswitch
                                </div>
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-sm-3">
                                    <strong>Submitted:</strong>
                                </div>
                                <div class="col-sm-9">
                                    {{ $contact->created_at->format('F d, Y \\a\\t H:i A') }}
                                    <small class="text-muted">({{ $contact->created_at->diffForHumans() }})</small>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-sm-3">
                                    <strong>Message:</strong>
                                </div>
                                <div class="col-sm-9">
                                    <div class="border p-3 bg-light rounded">
                                        {!! nl2br(e($contact->message)) !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <!-- Status Update Card -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Update Status</h5>
                        </div>
                        <div class="card-body">
                            <form action="{{ route('contacts.update-status', $contact) }}" method="POST">
                                @csrf
                                @method('PATCH')
                                <div class="mb-3">
                                    <label for="status" class="form-label">Status</label>
                                    <select name="status" id="status" class="form-control">
                                        <option value="pending" {{ $contact->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="read" {{ $contact->status == 'read' ? 'selected' : '' }}>Read</option>
                                        <option value="replied" {{ $contact->status == 'replied' ? 'selected' : '' }}>Replied</option>
                                        <option value="resolved" {{ $contact->status == 'resolved' ? 'selected' : '' }}>Resolved</option>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary w-100">
                                    <i class="fas fa-save"></i> Update Status
                                </button>
                            </form>
                        </div>
                    </div>
                    
                    <!-- Quick Actions Card -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Quick Actions</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <a href="mailto:{{ $contact->email }}?subject=Re: {{ $contact->subject }}" class="btn btn-outline-primary">
                                    <i class="fas fa-reply"></i> Reply via Email
                                </a>
                                
                                @if($contact->phone)
                                <a href="tel:{{ $contact->phone }}" class="btn btn-outline-success">
                                    <i class="fas fa-phone"></i> Call
                                </a>
                                @endif
                                
                                <form action="{{ route('contacts.destroy', $contact) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger w-100" onclick="return confirm('Are you sure you want to delete this contact submission?')">
                                        <i class="fas fa-trash-alt"></i> Delete
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Contact Statistics -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Statistics</h5>
                        </div>
                        <div class="card-body">
                            @php
                                $totalContacts = \App\Models\Contact::count();
                                $pendingContacts = \App\Models\Contact::where('status', 'pending')->count();
                                $resolvedContacts = \App\Models\Contact::where('status', 'resolved')->count();
                            @endphp
                            
                            <div class="row text-center">
                                <div class="col-4">
                                    <div class="border-end">
                                        <h4 class="mb-1">{{ $totalContacts }}</h4>
                                        <p class="text-muted mb-0">Total</p>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="border-end">
                                        <h4 class="mb-1 text-warning">{{ $pendingContacts }}</h4>
                                        <p class="text-muted mb-0">Pending</p>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <h4 class="mb-1 text-success">{{ $resolvedContacts }}</h4>
                                    <p class="text-muted mb-0">Resolved</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Auto-mark as read when viewing
@if($contact->status === 'pending')
    // Automatically update status to 'read' when viewing a pending contact
    fetch('{{ route("contacts.update-status", $contact) }}', {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            status: 'read'
        })
    }).then(() => {
        // Update the badge on the page
        const statusBadge = document.querySelector('.badge');
        if (statusBadge) {
            statusBadge.className = 'badge bg-info';
            statusBadge.textContent = 'Read';
        }
        
        // Update the select dropdown
        const statusSelect = document.getElementById('status');
        if (statusSelect) {
            statusSelect.value = 'read';
        }
    });
@endif
</script>
@endpush