@extends('layouts.app')

@section('title', __('lang_v1.manage_landing_info'))

@section('content')
@include('master::layouts.nav')

<section class="content-header">
    <h1 class="tw-text-2xl tw-font-bold tw-text-gray-800">
        @lang('lang_v1.manage_landing_info')
    </h1>
</section>

<section class="content">
    <div class="tw-bg-white tw-shadow-sm tw-rounded-xl tw-p-4 tw-ring-1 tw-ring-gray-200">

        {{-- زر الإضافة --}}
        <div class="tw-flex tw-justify-end tw-mb-4">
            <a href="{{ route('info.create') }}"
               class="tw-dw-btn tw-font-bold tw-text-white tw-border-none tw-rounded-2xl"
               style="background-color: {{ session('business.theme_color') ?? '#3498db' }};">
                <i class="fa fa-plus"></i> @lang('lang_v1.add_new')
            </a>
        </div>

        {{-- الجدول --}}
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="info_table">
                <thead>
                    <tr>
                        <th>@lang('lang_v1.type')</th>
                        <th>@lang('lang_v1.content')</th>
                        <th>@lang('lang_v1.created_at')</th>
                        <th>@lang('lang_v1.actions')</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</section>
@endsection

@section('javascript')
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var info_table = $('#info_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('info.index') }}",
        columns: [
            { 
                data: 'type', 
                name: 'type',
                render: function(type) {
                    switch (type) {
                        case 'review': return '@lang("lang_v1.client_review")';
                        case 'faq': return '@lang("lang_v1.faq")';
                        case 'stats': return '@lang("lang_v1.stats")';
                        default: return type;
                    }
                }
            },
            { 
                data: 'data', 
                name: 'data',
                render: function(data, type, row) {
                    let obj = {};
                    if (typeof data === 'string') {
                        try { obj = JSON.parse(data); } 
                        catch(e){ return '<em>@lang("lang_v1.invalid_data")</em>'; }
                    } else if (typeof data === 'object' && data !== null) {
                        obj = data;
                    } else { return '<em>@lang("lang_v1.invalid_data")</em>'; }

                    if (row.type === 'review') {
                        return `<strong>@lang("lang_v1.name"):</strong> ${obj.name || '-'}<br>
                                <strong>@lang("lang_v1.title"):</strong> ${obj.title || '-'}<br>
                                <strong>@lang("lang_v1.comment"):</strong> ${obj.comment || '-'}`;
                    }
                    if (row.type === 'faq') {
                        return `<strong>@lang("lang_v1.question"):</strong> ${obj.question || '-'}<br>
                                <strong>@lang("lang_v1.answer"):</strong> ${obj.answer || '-'}`;
                    }
                    if (row.type === 'stats') {
                        return `<strong>@lang("lang_v1.monthly_users"):</strong> ${obj.monthlyUsers || 0}<br>
                                <strong>@lang("lang_v1.invoices"):</strong> ${obj.invoices || 0}<br>
                                <strong>@lang("lang_v1.companies"):</strong> ${obj.companies || 0}`;
                    }
                    return '<em>@lang("lang_v1.unknown_type")</em>';
                }
            },
            { 
                data: 'created_at', 
                name: 'created_at',
                render: function(date) {
                    return moment(date).format('YYYY-MM-DD');
                }
            },
            { 
                data: 'action', 
                name: 'action', 
                orderable: false, 
                searchable: false 
            },
        ],
        columnDefs: [
            { className: "text-center", targets: [0, 2, 3] }
        ],
        language: {
            url: '//cdn.datatables.net/plug-ins/1.13.1/i18n/ar.json'
        }
    });
});
</script>
@endsection