@extends('layouts.app')

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

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

<section class="content">
    <div class="box box-solid">
        <div class="box-header">
            <h3 class="box-title">@lang('lang_v1.add_new_landing_info')</h3>
        </div>
        <div class="box-body">

            {{-- عرض الأخطاء --}}
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul style="margin:0; padding-left: 18px;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('info.store') }}" method="POST" id="info_form">
                @csrf

                {{-- النوع --}}
                <div class="form-group col-md-6">
                    <label>@lang('lang_v1.type') *</label>
                    <select name="type" id="type" class="form-control" required>
                        <option value="">-- @lang('lang_v1.choose_type') --</option>
                        <option value="review">@lang('lang_v1.client_review')</option>
                        <option value="faq">@lang('lang_v1.faq')</option>
                        <option value="stats">@lang('lang_v1.stats')</option>
                    </select>
                </div>

                {{-- الحقول الخاصة بكل نوع --}}
                <div id="dynamic-fields" class="col-md-12 tw-mt-4"></div>

                {{-- حقل مخفي لحفظ الـ JSON --}}
                <input type="hidden" name="data" id="data">

                <div class="col-md-12 text-center" style="margin-top: 20px;">
                    <button type="submit" class="btn btn-success">
                        <i class="fa fa-save"></i> @lang('lang_v1.save')
                    </button>
                </div>
            </form>

        </div>
    </div>
</section>
@endsection

@section('javascript')
<script>
$(document).ready(function() {
    $('#type').change(function() {
        let type = $(this).val();
        let container = $('#dynamic-fields');
        container.empty();

        if (type === 'review') {
            container.html(`
                <div class="form-group col-md-6">
                    <label>@lang('lang_v1.client_name')</label>
                    <input type="text" id="review_name" class="form-control" placeholder="@lang('lang_v1.client_name_placeholder')">
                </div>
                <div class="form-group col-md-6">
                    <label>@lang('lang_v1.job_title')</label>
                    <input type="text" id="review_title" class="form-control" placeholder="@lang('lang_v1.job_title_placeholder')">
                </div>
                <div class="form-group col-md-12">
                    <label>@lang('lang_v1.comment')</label>
                    <textarea id="review_comment" class="form-control" rows="3" placeholder="@lang('lang_v1.comment_placeholder')"></textarea>
                </div>
            `);
        } 
        else if (type === 'faq') {
            container.html(`
                <div class="form-group col-md-12">
                    <label>@lang('lang_v1.question')</label>
                    <input type="text" id="faq_question" class="form-control" placeholder="@lang('lang_v1.question_placeholder')">
                </div>
                <div class="form-group col-md-12">
                    <label>@lang('lang_v1.answer')</label>
                    <textarea id="faq_answer" class="form-control" rows="3" placeholder="@lang('lang_v1.answer_placeholder')"></textarea>
                </div>
            `);
        }
        else if (type === 'stats') {
            container.html(`
                <div class="form-group col-md-4">
                    <label>@lang('lang_v1.monthly_users')</label>
                    <input type="number" id="stats_users" class="form-control" value="0" min="0">
                </div>
                <div class="form-group col-md-4">
                    <label>@lang('lang_v1.invoices')</label>
                    <input type="number" id="stats_invoices" class="form-control" value="0" min="0">
                </div>
                <div class="form-group col-md-4">
                    <label>@lang('lang_v1.companies')</label>
                    <input type="number" id="stats_companies" class="form-control" value="0" min="0">
                </div>
            `);
        }
    });

    $('#info_form').on('submit', function(e) {
        let type = $('#type').val();
        let jsonData = {};

        if (type === 'review') {
            jsonData = {
                name: $('#review_name').val(),
                title: $('#review_title').val(),
                comment: $('#review_comment').val(),
            };
        } else if (type === 'faq') {
            jsonData = {
                question: $('#faq_question').val(),
                answer: $('#faq_answer').val(),
            };
        } else if (type === 'stats') {
            jsonData = {
                monthlyUsers: $('#stats_users').val(),
                invoices: $('#stats_invoices').val(),
                companies: $('#stats_companies').val(),
            };
        }

        $('#data').val(JSON.stringify(jsonData));
    });
});
</script>
@endsection