@extends('layouts.admin')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Quote Requests</h1>
        <p class="page-subtitle">Manage service inquiries from clients.</p>
    </div>
</div>

<div class="card">
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Client Name</th>
                    <th>Contact Info</th>
                    <th>Service Needed</th>
                    <th>Status</th>
                    <th style="text-align: right;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($quotes as $quote)
                <tr>
                    <td>
                        <div style="font-weight: 600; color: var(--text);">{{ $quote->full_name }}</div>
                        <small class="text-muted">{{ $quote->created_at->format('d M, Y') }}</small>
                    </td>
                    <td>
                        <div>{{ $quote->email }}</div>
                        <small>{{ $quote->phone }}</small>
                    </td>
                    <td><span class="badge" style="background: var(--surface-2);">{{ $quote->service_needed }}</span></td>
                    <td>
                        <form action="{{ route('admin.quotes.status', $quote->id) }}" method="POST">
                            @csrf @method('PATCH')
                            <select name="status" onchange="this.form.submit()" class="form-input" style="padding: 5px; width: auto; height: auto; font-size: 12px;">
                                <option value="1" {{ $quote->status == 1 ? 'selected' : '' }}>Pending</option>
                                <option value="2" {{ $quote->status == 2 ? 'selected' : '' }}>In Progress</option>
                                <option value="3" {{ $quote->status == 3 ? 'selected' : '' }}>Completed</option>
                                <option value="0" {{ $quote->status == 0 ? 'selected' : '' }}>Rejected</option>
                            </select>
                        </form>
                    </td>
                    <td style="text-align: right;">
                        <div class="action-btns" style="justify-content: flex-end;">
                            <button class="action-btn edit" onclick="showQuoteDetails({{ json_encode($quote) }})">
                                <i class="fa-solid fa-eye"></i>
                            </button>
                            <form action="{{ route('admin.quotes.destroy', $quote->id) }}" method="POST" onsubmit="return confirm('Delete this request?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="action-btn delete"><i class="fa-solid fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div id="quoteModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 600px;">
        <div class="auth-header">
            <h2 class="auth-title">Message Details</h2>
            <button class="close-btn" onclick="closeModal('quoteModal')">&times;</button>
        </div>
        <div class="quote-info" style="color: var(--text);">
            <p><strong>Service:</strong> <span id="view_service"></span></p>
            <p><strong>Message:</strong></p>
            <div id="view_message" style="background: var(--surface-2); padding: 15px; border-radius: 8px; border: 1px solid var(--border); margin-top: 10px;"></div>
        </div>
        <div style="margin-top: 20px; text-align: right;">
            <button class="btn btn-primary" onclick="closeModal('quoteModal')">Close</button>
        </div>
    </div>
</div>

@push('styles')
<style>
    .modal-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.8);
        display: none; align-items: center; justify-content: center; z-index: 3000;
        backdrop-filter: blur(8px); padding: 20px;
    }
    .modal-overlay.active { display: flex; }
    
    .modal-content {
        background: var(--surface); border: 1px solid var(--border);
        border-radius: 20px; width: 100%; padding: 40px;
        position: relative; max-height: 90vh; overflow-y: auto;
    }
</style>
@endpush
@push('scripts')
<script>
    function openModal(id) {
        const modal = document.getElementById(id);
        if(modal) {
            modal.classList.add('active');
        }
    }

    function closeModal(id) {
        const modal = document.getElementById(id);
        if(modal) {
            modal.classList.remove('active');
        }
    }

    function showQuoteDetails(quote) {
        document.getElementById('view_service').innerText = quote.service_needed || 'N/A';
        document.getElementById('view_message').innerText = quote.message || 'No message provided.';
        openModal('quoteModal');
    }

    window.onclick = function(event) {
        if (event.target.classList.contains('modal-overlay')) {
            event.target.classList.remove('active');
        }
    }
</script>
@endpush
@endsection