@extends('root')
@section('title', 'Technical Discussions')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Technical Discussions',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Technical Discussions'
    ])

    <div class="card card-body">
        <div class="mb-3">
            <h5 class="card-title mb-0">Form Submissions</h5>
            <p class="text-muted small mb-0">Technical discussion requests from landing page</p>
        </div>
        
        <div class="table-responsive">
            <table class="table table-striped" id="datatable-discussions">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Full Name</th>
                        <th>Company Name</th>
                        <th>Business Email</th>
                        <th>Use Case</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    $('#datatable-discussions').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        order: [[0, 'desc']],
        ajax: {
            url: '{{ route('admin.technical-discussion.data') }}',
            dataSrc: 'data'
        },
        columns: [
            {
                data: 'created_at',
                name: 'created_at',
                render: function (data) {
                    if (!data) return '-';
                    const date = new Date(data);
                    return date.toLocaleDateString('en-US', {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit'
                    });
                }
            },
            { data: 'full_name', name: 'full_name' },
            { data: 'company_name', name: 'company_name' },
            { 
                data: 'business_email', 
                name: 'business_email',
                render: function (data) {
                    return '<a href="mailto:' + data + '">' + data + '</a>';
                }
            },
            { data: 'use_case', name: 'use_case' }
        ]
    });
});
</script>
@endpush