@extends('admin.templates.layout')

@section('content')
<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">{{ $page_heading }}</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.contact_us') }}">Contact Submissions</a></li>
                    <li class="breadcrumb-item active">Details</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Submission Details</h4>
                <div class="flex-shrink-0">
                    <span class="badge bg-primary">{{ $contact->created_at->format('d M Y, h:i A') }}</span>
                </div>
            </div>
            
            <div class="card-body">
                <div class="mb-4">
                    <h5 class="card-title text-decoration-underline mb-3">Sender Information</h5>
                    <div class="table-responsive">
                        <table class="table table-borderless mb-0">
                            <tbody>
                                <tr>
                                    <th class="ps-0" scope="row">Full Name :</th>
                                    <td class="text-muted">{{ $contact->name }}</td>
                                </tr>
                                <tr>
                                    <th class="ps-0" scope="row">Email :</th>
                                    <td class="text-muted">{{ $contact->email }}</td>
                                </tr>
                                <tr>
                                    <th class="ps-0" scope="row">Phone :</th>
                                    <td class="text-muted">{{ $contact->phone ?? 'N/A' }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                @if($contact->business_type || $contact->vat_number || $contact->business_address)
                <div class="mb-4">
                    <h5 class="card-title text-decoration-underline mb-3">Business Details</h5>
                    <div class="table-responsive">
                        <table class="table table-borderless mb-0">
                            <tbody>
                                @if($contact->business_type)
                                <tr>
                                    <th class="ps-0" scope="row">Business Type :</th>
                                    <td class="text-muted">{{ $contact->business_type }}</td>
                                </tr>
                                @endif
                                @if($contact->vat_number)
                                <tr>
                                    <th class="ps-0" scope="row">VAT Number :</th>
                                    <td class="text-muted">{{ $contact->vat_number }}</td>
                                </tr>
                                @endif
                                @if($contact->business_address)
                                <tr>
                                    <th class="ps-0" scope="row">Address :</th>
                                    <td class="text-muted">{{ $contact->business_address }}</td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
                @endif

                <div class="mb-4">
                    <h5 class="card-title text-decoration-underline mb-3">Message Content</h5>
                    <div class="alert alert-light border">
                        <h6 class="fw-semibold">{{ $contact->subject }}</h6>
                        <p class="text-muted mb-0">{!! nl2br(e($contact->message)) !!}</p>
                    </div>
                </div>

                <div class="text-end">
                    <a href="mailto:{{ $contact->email }}" class="btn btn-primary"><i class="ri-mail-send-line align-bottom me-1"></i> Reply via Email</a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">Admin Notes</h4>
            </div>
            <div class="card-body">
                <form id="notes-form">
                    @csrf
                    <div class="mb-3">
                        <label for="admin_notes" class="form-label">Internal Notes</label>
                        <textarea class="form-control" id="admin_notes" name="admin_notes" rows="5" placeholder="Add internal notes about this submission...">{{ $contact->admin_notes }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-success w-100" id="save-notes-btn">Save Notes</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom-script')
<script>
    $(document).ready(function() {
        $('#notes-form').on('submit', function(e) {
            e.preventDefault();
            var btn = $('#save-notes-btn');
            var originalText = btn.text();
            
            btn.prop('disabled', true).text('Saving...');
            
            $.ajax({
                url: "{{ route('admin.contact_us.update_notes', $contact->id) }}",
                type: "POST",
                data: $(this).serialize(),
                success: function(response) {
                    if(response.status == 'success') {
                        toastr.success(response.message);
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function() {
                    toastr.error('Something went wrong. Please try again.');
                },
                complete: function() {
                    btn.prop('disabled', false).text(originalText);
                }
            });
        });
    });
</script>
@endsection