@extends('admin.layouts.app')
@section('content')
    <div class="pagetitle">
        <h1>About Us Page</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->
    <section class="section">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="card-title">About Us Page Edit</h5>
                            </div>
                        </div>
                        <!-- Multi Columns Form -->
                        <form class="row g-2" action="{{ route('admin.website.about.us.page.update') }}" method="post"
                            enctype="multipart/form-data" id="aboutPageForm">
                            @csrf
                            <div class="col-md-12">
                                @if (Session::has('error'))
                                    <div class="alert alert-danger bg-danger text-light border-0 alert-dismissible fade show"
                                        role="alert">
                                        {{ Session::get('error') }}
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"
                                            aria-label="Close"></button>
                                    </div>
                                @endif
                                @if (Session::has('success'))
                                    <div class="alert alert-success bg-success text-light border-0 alert-dismissible fade show"
                                        role="alert">
                                        {{ Session::get('success') }}
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert"
                                            aria-label="Close"></button>
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Page Title</label>
                                <input type="text" class="form-control" name="meta_title" placeholder="Enter here" value="{{ old('meta_title', $page->meta_title) }}">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Meta Description</label>
                                <input type="text" class="form-control" name="meta_description" placeholder="Enter here"
                                    value="{{ old('meta_description', $page->meta_description) }}">
                            </div>                            
                            <div class="col-md-6">
                                <label class="form-label">About Heading (EN)</label>
                                <input type="text" class="form-control" name="about_heading_en" placeholder="Enter here"
                                    value="{{ old('about_heading_en', $page->about_heading_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">About Heading (AR)</label>
                                <input type="text" class="form-control" name="about_heading_ar" placeholder="Enter here"
                                    value="{{ old('about_heading_ar', $page->about_heading_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">About Description (EN)</label>
                                <textarea name="about_description_en" class="form-control" cols="1" rows="5"
                                    vale="{{ old('about_description_en') }}">{{ $page->about_description_en }}</textarea>

                            </div>
                            <div class="col-md-6">
                                <label class="form-label">About Description (AR)</label>
                                <textarea name="about_description_ar" class="form-control" cols="1" rows="5"
                                    vale="{{ old('about_description_ar') }}">{{ $page->about_description_ar }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Need Help Link (EN)</label>
                                <input type="text" class="form-control" name="need_help_link" placeholder="Enter here"
                                    value="{{ old('need_help_link', $page->need_help_link) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Need Help Link (AR)</label>
                                <input type="text" class="form-control" name="need_help_link_ar" placeholder="Enter here"
                                    value="{{ old('need_help_link_ar', $page->need_help_link_ar) }}">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Image</label>
                                <input type="file" name="about_image" class="dropify"
                                    data-allowed-file-extensions="jpg png jpeg gif webp"
                                    data-default-file="{{ isset($page->about_image) ? asset('uploads/about_page/' . $page->about_image) : '' }}" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">About Sub Heading (EN)</label>
                                <input type="text" class="form-control" name="about_sub_heading_en"
                                    placeholder="Enter here"
                                    value="{{ old('about_sub_heading_en', $page->about_sub_heading_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">About Sub Heading (AR)</label>
                                <input type="text" class="form-control" name="about_sub_heading_ar"
                                    placeholder="Enter here"
                                    value="{{ old('about_sub_heading_ar', $page->about_sub_heading_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">About Long Description Four (EN)</label>
                                <textarea name="about_sub_description_en" class="form-control" cols="1" rows="5"
                                    vale="{{ old('about_sub_description_en') }}">{{ $page->about_sub_description_en }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">About Long Description Four (AR)</label>
                                <textarea name="about_sub_description_ar" class="form-control" cols="1" rows="5"
                                    vale="{{ old('about_sub_description_ar') }}">{{ $page->about_sub_description_ar }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Application Dashboard Heading (EN)</label>
                                <input type="text" class="form-control" name="application_dashboard_heading_en"
                                    placeholder="Enter here"
                                    value="{{ old('application_dashboard_heading_en', $page->application_dashboard_heading_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Application Dashboard Heading (AR)</label>
                                <input type="text" class="form-control" name="application_dashboard_heading_ar"
                                    placeholder="Enter here"
                                    value="{{ old('application_dashboard_heading_ar', $page->application_dashboard_heading_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Application Dashboard Description (EN)</label>
                                <textarea name="application_dashboard_description_en" class="form-control" cols="1" rows="5"
                                    vale="{{ old('application_dashboard_description_en') }}">{{ $page->application_dashboard_description_en }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Application Dashboard Description (AR)</label>
                                <textarea name="application_dashboard_description_ar" class="form-control" cols="1" rows="5"
                                    vale="{{ old('application_dashboard_description_ar') }}">{{ $page->application_dashboard_description_ar }}</textarea>
                            </div>                            
                            <div class="col-md-6">
                                <label class="form-label">Background Screening Category (EN)</label>
                                <input type="text" class="form-control" name="result_heading_en" placeholder="Enter here"
                                    value="{{ old('result_heading_en', $page->result_heading_en) }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Background Screening Category (AR)</label>
                                <input type="text" class="form-control" name="result_heading_ar" placeholder="Enter here"
                                    value="{{ old('result_heading_ar', $page->result_heading_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Verification Screening (EN)</label>
                                <input type="text" class="form-control" name="counter_heading_one_en"
                                    placeholder="Enter here" value="{{ old('counter_heading_one_en',$page->counter_heading_one_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Verification Screening (AR)</label>
                                <input type="text" class="form-control" name="counter_heading_one_ar"
                                    placeholder="Enter here"
                                    value="{{ old('counter_heading_one_ar', $page->counter_heading_one_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Verification Screening Description (EN)</label>
                                <input type="text" class="form-control" name="counter_description_one_en"
                                    placeholder="Enter here"
                                    value="{{ old('counter_description_one_en', $page->counter_description_one_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Verification Screening Description (AR)</label>
                                <input type="text" class="form-control" name="counter_description_one_ar"
                                    placeholder="Enter here"
                                    value="{{ old('counter_description_one_ar', $page->counter_description_one_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Point One (EN)</label>
                                <input type="text" class="form-control" name="counter_heading_two_en"
                                    placeholder="Enter here"
                                    value="{{ old('counter_heading_two_en', $page->counter_heading_two_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Point One (AR)</label>
                                <input type="text" class="form-control" name="counter_heading_two_ar"
                                    placeholder="Enter here"
                                    value="{{ old('counter_heading_two_ar', $page->counter_heading_two_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Point Two (EN)</label>
                                <input type="text" class="form-control" name="counter_description_two_en"
                                    placeholder="Enter here"
                                    value="{{ old('counter_description_two_en', $page->counter_description_two_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Point Two (AR)</label>
                                <input type="text" class="form-control" name="counter_description_two_ar"
                                    placeholder="Enter here"
                                    value="{{ old('counter_description_two_ar', $page->counter_description_two_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Point Three (EN)</label>
                                <input type="text" class="form-control" name="counter_heading_three_en"
                                    placeholder="Enter here" value="{{ old('counter_heading_three_en',$page->counter_heading_three_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Point Three (AR)</label>
                                <input type="text" class="form-control" name="counter_heading_three_ar"
                                    placeholder="Enter here"
                                    value="{{ old('counter_heading_three_ar', $page->counter_heading_three_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Read More Link (EN)</label>
                                <input type="text" class="form-control" name="counter_description_three_en"
                                    placeholder="Enter here"
                                    value="{{ old('counter_description_three_en', $page->counter_description_three_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Read More Link (AR)</label>
                                <input type="text" class="form-control" name="counter_description_three_ar"
                                    placeholder="Enter here"
                                    value="{{ old('counter_description_three_ar', $page->counter_description_three_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Talk to Sales (EN)</label>
                                <input type="text" class="form-control" name="counter_heading_four_en"
                                    placeholder="Enter here"
                                    value="{{ old('counter_heading_four_en', $page->counter_heading_four_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Talk to Sales (AR)</label>
                                <input type="text" class="form-control" name="counter_heading_four_ar"
                                    placeholder="Enter here"
                                    value="{{ old('counter_heading_four_ar', $page->counter_heading_four_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Screening (EN)</label>
                                <input type="text" class="form-control" name="counter_description_four_en"
                                    placeholder="Enter here"
                                    value="{{ old('counter_description_four_en', $page->counter_description_four_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Screening (AR)</label>
                                <input type="text" class="form-control" name="counter_description_four_ar"
                                    placeholder="Enter here"
                                    value="{{ old('counter_description_four_ar', $page->counter_description_four_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Description (EN)</label>
                                <input type="text" class="form-control" name="qualification_description_en"
                                    placeholder="Enter here"
                                    value="{{ old('qualification_description_en', $page->qualification_description_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Description (AR)</label>
                                <input type="text" class="form-control" name="qualification_description_ar"
                                    placeholder="Enter here"
                                    value="{{ old('qualification_description_ar', $page->qualification_description_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Point One (EN)</label>
                                <input type="text" class="form-control" name="qualification_point_one_en"
                                    placeholder="Enter here"
                                    value="{{ old('qualification_point_one_en', $page->qualification_point_one_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Point One (AR)</label>
                                <input type="text" class="form-control" name="qualification_point_one_ar"
                                    placeholder="Enter here"
                                    value="{{ old('qualification_point_one_ar', $page->qualification_point_one_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Point Two (EN)</label>
                                <input type="text" class="form-control" name="qualification_point_two_en"
                                    placeholder="Enter here"
                                    value="{{ old('qualification_point_two_en', $page->qualification_point_two_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Point Two (AR)</label>
                                <input type="text" class="form-control" name="qualification_point_two_ar"
                                    placeholder="Enter here"
                                    value="{{ old('qualification_point_two_ar', $page->qualification_point_two_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Point Three (EN)</label>
                                <input type="text" class="form-control" name="qualification_point_three_en"
                                    placeholder="Enter here"
                                    value="{{ old('qualification_point_three_en', $page->qualification_point_three_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Point Three (AR)</label>
                                <input type="text" class="form-control" name="qualification_point_three_ar"
                                    placeholder="Enter here"
                                    value="{{ old('qualification_point_three_ar', $page->qualification_point_three_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Read More Link (EN)</label>
                                <input type="text" class="form-control" name="qualification_read_more_link_en"
                                    placeholder="Enter here"
                                    value="{{ old('qualification_read_more_link_en', $page->qualification_read_more_link_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Read More Link (AR)</label>
                                <input type="text" class="form-control" name="qualification_read_more_link_ar"
                                    placeholder="Enter here"
                                    value="{{ old('qualification_read_more_link_ar', $page->qualification_read_more_link_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Talk to Sales (EN)</label>
                                <input type="text" class="form-control" name="qualification_talk_to_sales_en"
                                    placeholder="Enter here"
                                    value="{{ old('qualification_talk_to_sales_en', $page->qualification_talk_to_sales_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Qualification Talk to Sales (AR)</label>
                                <input type="text" class="form-control" name="qualification_talk_to_sales_ar"
                                    placeholder="Enter here"
                                    value="{{ old('qualification_talk_to_sales_ar', $page->qualification_talk_to_sales_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Category (EN)</label>
                                <input type="text" class="form-control" name="evaluation_category_en"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_category_en', $page->evaluation_category_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Category (AR)</label>
                                <input type="text" class="form-control" name="evaluation_category_ar"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_category_ar', $page->evaluation_category_ar) }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Evaluation Screening (EN)</label>
                                <input type="text" class="form-control" name="evaluation_heading_en"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_heading_en', $page->evaluation_heading_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Screening (AR)</label>
                                <input type="text" class="form-control" name="evaluation_heading_ar"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_heading_ar', $page->evaluation_heading_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Description (EN)</label>
                                <input type="text" class="form-control" name="evaluation_description_en"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_description_en', $page->evaluation_description_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Description (AR)</label>
                                <input type="text" class="form-control" name="evaluation_description_ar"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_description_ar', $page->evaluation_description_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Point One (EN)</label>
                                <input type="text" class="form-control" name="evaluation_point_one_en"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_point_one_en', $page->evaluation_point_one_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Point One (AR)</label>
                                <input type="text" class="form-control" name="evaluation_point_one_ar"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_point_one_ar', $page->evaluation_point_one_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Point Two (EN)</label>
                                <input type="text" class="form-control" name="evaluation_point_two_en"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_point_two_en', $page->evaluation_point_two_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Point Two (AR)</label>
                                <input type="text" class="form-control" name="evaluation_point_two_ar"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_point_two_ar', $page->evaluation_point_two_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Point Three (EN)</label>
                                <input type="text" class="form-control" name="evaluation_point_three_en"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_point_three_en', $page->evaluation_point_three_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Point Three (AR)</label>
                                <input type="text" class="form-control" name="evaluation_point_three_ar"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_point_three_ar', $page->evaluation_point_three_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Read More Link (EN)</label>
                                <input type="text" class="form-control" name="evaluation_read_more_link_en"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_read_more_link_en', $page->evaluation_read_more_link_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Read More Link (AR)</label>
                                <input type="text" class="form-control" name="evaluation_read_more_link_ar"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_read_more_link_ar', $page->evaluation_read_more_link_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Talk to Sales (EN)</label>
                                <input type="text" class="form-control" name="evaluation_talk_to_sales_en"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_talk_to_sales_en', $page->evaluation_talk_to_sales_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Evaluation Talk to Sales (AR)</label>
                                <input type="text" class="form-control" name="evaluation_talk_to_sales_ar"
                                    placeholder="Enter here"
                                    value="{{ old('evaluation_talk_to_sales_ar', $page->evaluation_talk_to_sales_ar) }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Shape Future Heading (EN)</label>
                                <input type="text" class="form-control" name="shape_future_heading_en"
                                    placeholder="Enter here"
                                    value="{{ old('shape_future_heading_en', $page->shape_future_heading_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Shape Future Heading (AR)</label>
                                <input type="text" class="form-control" name="shape_future_heading_ar"
                                    placeholder="Enter here"
                                    value="{{ old('shape_future_heading_ar', $page->shape_future_heading_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Heading One (EN)</label>
                                <input type="text" class="form-control" name="accordion_heading_one_en"
                                    placeholder="Enter here"
                                    value="{{ old('accordion_heading_one_en', $page->accordion_heading_one_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Heading One (AR)</label>
                                <input type="text" class="form-control" name="accordion_heading_one_ar"
                                    placeholder="Enter here"
                                    value="{{ old('accordion_heading_one_ar', $page->accordion_heading_one_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Description One (EN)</label>
                                <textarea name="accordion_description_one_en" class="form-control" cols="1" rows="5"
                                    vale="{{ old('accordion_description_one_en') }}">{{ $page->accordion_description_one_en }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Description One (AR)</label>
                                <textarea name="accordion_description_one_ar" class="form-control" cols="1" rows="5"
                                    vale="{{ old('accordion_description_one_ar') }}">{{ $page->accordion_description_one_ar }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Heading Two (EN)</label>
                                <input type="text" class="form-control" name="accordion_heading_two_en"
                                    placeholder="Enter here"
                                    value="{{ old('accordion_heading_two_en', $page->accordion_heading_two_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Heading Two (AR)</label>
                                <input type="text" class="form-control" name="accordion_heading_two_ar"
                                    placeholder="Enter here"
                                    value="{{ old('accordion_heading_two_ar', $page->accordion_heading_two_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Description Two (EN)</label>
                                <textarea name="accordion_description_two_en" class="form-control" cols="1" rows="5"
                                    vale="{{ old('accordion_description_two_en') }}">{{ $page->accordion_description_two_en }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Description Two (AR)</label>
                                <textarea name="accordion_description_two_ar" class="form-control" cols="1" rows="5"
                                    vale="{{ old('accordion_description_two_ar') }}">{{ $page->accordion_description_two_ar }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Heading Three (EN)</label>
                                <input type="text" class="form-control" name="accordion_heading_three_en"
                                    placeholder="Enter here"
                                    value="{{ old('accordion_heading_three_en', $page->accordion_heading_three_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Heading Three (AR)</label>
                                <input type="text" class="form-control" name="accordion_heading_three_ar"
                                    placeholder="Enter here"
                                    value="{{ old('accordion_heading_three_ar', $page->accordion_heading_three_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Description Three (EN)</label>
                                <textarea name="accordion_description_three_en" class="form-control" cols="1" rows="5"
                                    vale="{{ old('accordion_description_three_en') }}">{{ $page->accordion_description_three_en }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Description Three (AR)</label>
                                <textarea name="accordion_description_three_ar" class="form-control" cols="1" rows="5"
                                    vale="{{ old('accordion_description_three_ar') }}">{{ $page->accordion_description_three_ar }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Get Started Link</label>
                                <input type="text" class="form-control" name="accordion_get_started_link"
                                    placeholder="Enter here"
                                    value="{{ old('accordion_get_started_link', $page->accordion_get_started_link) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Accordion Talk to Sales Link</label>
                                <input type="text" class="form-control" name="accordion_talk_to_sales_link"
                                    placeholder="Enter here"
                                    value="{{ old('accordion_talk_to_sales_link', $page->accordion_talk_to_sales_link) }}">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Accordion Image</label>
                                <input type="file" name="accordion_image" class="dropify"
                                    data-allowed-file-extensions="jpg png jpeg gif webp"
                                    data-default-file="{{ isset($page->accordion_image) ? asset('uploads/about_page/' . $page->accordion_image) : '' }}" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Join Our Team (EN)</label>
                                <input type="text" class="form-control" name="join_our_team_en"
                                    placeholder="Enter here"
                                    value="{{ old('join_our_team_en', $page->join_our_team_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Join Our Team (EN)</label>
                                <input type="text" class="form-control" name="join_our_team_ar"
                                    placeholder="Enter here"
                                    value="{{ old('join_our_team_ar', $page->join_our_team_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Join Our Team Description (EN)</label>
                                <textarea name="join_our_team_description_en" class="form-control" cols="1" rows="5"
                                    vale="{{ old('join_our_team_description_en') }}">{{ $page->join_our_team_description_en }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Join Our Team Description (AR)</label>
                                <textarea name="join_our_team_description_ar" class="form-control" cols="1" rows="5"
                                    vale="{{ old('join_our_team_description_ar') }}">{{ $page->join_our_team_description_ar }}</textarea>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Join Our Team Link</label>
                                <input type="text" class="form-control" name="join_our_team_link"
                                    placeholder="Enter here"
                                    value="{{ old('join_our_team_link', $page->join_our_team_link) }}">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Join Our Team Image</label>
                                <input type="file" name="join_our_team_image" class="dropify"
                                    data-allowed-file-extensions="jpg png jpeg gif webp"
                                    data-default-file="{{ isset($page->join_our_team_image) ? asset('uploads/about_page/' . $page->join_our_team_image) : '' }}" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Need Assistance (EN)</label>
                                <input type="text" class="form-control" name="need_assistance_en"
                                    placeholder="Enter here"
                                    value="{{ old('need_assistance_en', $page->need_assistance_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Need Assistance (AR)</label>
                                <input type="text" class="form-control" name="need_assistance_ar"
                                    placeholder="Enter here"
                                    value="{{ old('need_assistance_ar', $page->need_assistance_ar) }}">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Need Assistance Image</label>
                                <input type="file" name="need_assistance_image" class="dropify"
                                    data-allowed-file-extensions="jpg png jpeg gif webp"
                                    data-default-file="{{ isset($page->need_assistance_image) ? asset('uploads/about_page/' . $page->need_assistance_image) : '' }}" />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Professional Heading (EN)</label>
                                <input type="text" class="form-control" name="professional_heading_en"
                                    placeholder="Enter here"
                                    value="{{ old('professional_heading_en', $page->professional_heading_en) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Professional Heading (AR)</label>
                                <input type="text" class="form-control" name="professional_heading_ar"
                                    placeholder="Enter here"
                                    value="{{ old('professional_heading_ar', $page->professional_heading_ar) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Professional Description (EN)</label>
                                <textarea name="professional_description_en" class="form-control" cols="1" rows="5"
                                    vale="{{ old('professional_description_en') }}">{{ $page->professional_description_en }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Professional Description (AR)</label>
                                <textarea name="professional_description_ar" class="form-control" cols="1" rows="5"
                                    vale="{{ old('professional_description_ar') }}">{{ $page->professional_description_ar }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Professional Get Started Link (EN)</label>
                                <input type="text" class="form-control" name="professional_get_started_link"
                                    placeholder="Enter here"
                                    value="{{ old('professional_get_started_link', $page->professional_get_started_link) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Professional Get Started Link (AR)</label>
                                <input type="text" class="form-control" name="professional_get_started_link_ar"
                                    placeholder="Enter here"
                                    value="{{ old('professional_get_started_link_ar', $page->professional_get_started_link_ar) }}">
                            </div>                            
                            <div class="col-md-6">
                                <label class="form-label">Professional FAQ Link (EN)</label>
                                <input type="text" class="form-control" name="professional_faq_link"
                                    placeholder="Enter here"
                                    value="{{ old('professional_faq_link', $page->professional_faq_link) }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Professional FAQ Link (AR)</label>
                                <input type="text" class="form-control" name="professional_faq_link_ar"
                                    placeholder="Enter here"
                                    value="{{ old('professional_faq_link_ar', $page->professional_faq_link_ar) }}">
                            </div>                            
                            <div class="col-md-12">
                                <label class="form-label">Professional Image</label>
                                <input type="file" name="professional_image" class="dropify"
                                    data-allowed-file-extensions="jpg png jpeg gif webp"
                                    data-default-file="{{ isset($page->professional_image) ? asset('uploads/about_page/' . $page->professional_image) : '' }}" />
                            </div>
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6 col-6 text-start" style="padding-top: 20px; font-weight:bold;">
                                        <span class="pt-5 mt-3">List Items</span>
                                    </div>
                                    <div class="col-md-6 col-6 text-end">
                                        <input type="button" class="btn btn-success mt-3 btn-sm" id="addRow"
                                            value="Add Row">
                                        {{-- <a href="#" class="btn btn-success mt-3 btn-sm" id="addRow">Add Row</a> --}}
                                    </div>
                                </div>
                                <div class="row px-2" id="rowAdder" class="removeRow">
                                    @if (count($pageItems) > 0)
                                        @foreach ($pageItems as $item)
                                            <table>
                                                <tr>
                                                    <td>
                                                        <div class="row g-2">
                                                            <div class="col-md-6">
                                                                <input type="text" class="form-control item_en mt-1"
                                                                    name="item_en[]" placeholder="Enter Item En"
                                                                    value="{{ $item->item_en }}">
                                                                <p class="validation-message text-danger"></p>
                                                                <!-- Validation message will appear here -->
                                                            </div>
                                                            <div class="col-md-5">
                                                                <input type="text" class="form-control item_ar mt-1"
                                                                    name="item_ar[]" placeholder="Enter Item Ar"
                                                                    value="{{ $item->item_ar }}">
                                                                <p class="validation-message text-danger"></p>
                                                                <!-- Validation message will appear here -->
                                                            </div>                                                            
                                                            <div class="col-md-1 text-center">
                                                                <input type="button"
                                                                    class="btn btn-danger w-100 removeRow mt-1"
                                                                    value="Delete">
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </table>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <div class="text-start">
                                <button type="submit" class="btn btn-primary w-100">Submit</button>
                            </div>
                        </form><!-- End Multi Columns Form -->
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script>
        $("#addRow").click(function() {
            newRowAdd =
                `<table>
                <tr>
                    <td>
                            <div class="row g-1">
                                <div class="col-md-6">
                                    <input type="text" class="form-control item_en mt-1" name="item_en[]" placeholder="Enter Item En">
                                    <p class="validation-message text-danger"></p> <!-- Validation message will appear here -->
                                </div>
                                <div class="col-md-5">
                                    <input type="text" class="form-control item_ar mt-1" name="item_ar[]" placeholder="Enter Item Ar">
                                    <p class="validation-message text-danger"></p> <!-- Validation message will appear here -->
                                </div>
                                <div class="col-md-1 text-center">
                                    <input type="button" class="btn btn-danger w-100 removeRow mt-1" value="Delete">
                                </div>
                            </div>    
                    </td>
                </tr>
                </table>`;

            $('#rowAdder').append(newRowAdd);
        });

        $(document).on("click", ".removeRow", function() {
            $(this).closest("tr").remove();
        });

        // Validate on form submission
        $("#aboutPageForm").submit(function(event) {
            if (!addValidationRules()) {
                event.preventDefault(); // Prevent form submission if validation fails
            }
        });

        function addValidationRules() {
            var isValid = true;

            $('input[name="item_en[]"]').each(function() {
                var inputField = $(this);
                var validationMessage = inputField.closest('td').find('.validation-message');

                if (inputField.val() == "") {
                    validationMessage.text("Please fill this field"); // Show validation message
                    isValid = false;
                } else {
                    validationMessage.text(""); // Clear validation message if input is valid
                }
            });

            $('input[name="item_ar[]"]').each(function() {
                var inputField = $(this);
                var validationMessage = inputField.closest('td').find('.validation-message');

                if (inputField.val() == "") {
                    validationMessage.text("Please fill this field"); // Show validation message
                    isValid = false;
                } else {
                    validationMessage.text(""); // Clear validation message if input is valid
                }
            });

            return isValid;
        }

        // Initialize validation plugin
        $("#aboutPageForm").validate();
    </script>
@endsection