@extends('admin.layouts.app')

@section('title', 'About Section')

@section('content')
<form method="POST" action="{{ route('admin.about-section.update') }}" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <ul class="nav nav-tabs mb-3">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-home" type="button">Homepage Welcome Teaser</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-page" type="button">About Us Page</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-motto" type="button">Firm Motto</button>
        </li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-home">
            <div class="card p-4 mb-3">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Heading (English)</label>
                        <input type="text" name="home_heading_en" class="form-control" value="{{ old('home_heading_en', $about->home_heading_en) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Heading (Arabic)</label>
                        <input type="text" name="home_heading_ar" dir="rtl" class="form-control" value="{{ old('home_heading_ar', $about->home_heading_ar) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Body (English)</label>
                        <textarea name="home_body_en" rows="4" class="form-control">{{ old('home_body_en', $about->home_body_en) }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Body (Arabic)</label>
                        <textarea name="home_body_ar" dir="rtl" rows="4" class="form-control">{{ old('home_body_ar', $about->home_body_ar) }}</textarea>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Years Experience</label>
                        <input type="number" name="years_experience" class="form-control @error('years_experience') is-invalid @enderror" value="{{ old('years_experience', $about->years_experience) }}">
                        @error('years_experience') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-8">
                        @include('admin.partials.image-field', ['name' => 'home_image', 'label' => 'Homepage Image', 'current' => $about->home_image])
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-page">
            <div class="card p-4 mb-3">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Page Heading (English)</label>
                        <input type="text" name="about_page_heading_en" class="form-control" value="{{ old('about_page_heading_en', $about->about_page_heading_en) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Page Heading (Arabic)</label>
                        <input type="text" name="about_page_heading_ar" dir="rtl" class="form-control" value="{{ old('about_page_heading_ar', $about->about_page_heading_ar) }}">
                    </div>

                    <div class="col-md-6" x-data="textListRepeater({{ Js::from(old('about_page_body_en', $bodyEn)) }})">
                        <label class="form-label">Body Paragraphs (English)</label>
                        <template x-for="(item, index) in items" :key="index">
                            <div class="input-group mb-2">
                                <textarea :name="'about_page_body_en[' + index + ']'" x-model="items[index]" rows="3" class="form-control"></textarea>
                                <button type="button" class="btn btn-outline-danger" @click="removeItem(index)"><i class="far fa-trash"></i></button>
                            </div>
                        </template>
                        <button type="button" class="btn btn-sm btn-outline-secondary" @click="addItem()">+ Add paragraph</button>
                    </div>

                    <div class="col-md-6" x-data="textListRepeater({{ Js::from(old('about_page_body_ar', $bodyAr)) }})">
                        <label class="form-label">Body Paragraphs (Arabic)</label>
                        <template x-for="(item, index) in items" :key="index">
                            <div class="input-group mb-2">
                                <textarea :name="'about_page_body_ar[' + index + ']'" dir="rtl" x-model="items[index]" rows="3" class="form-control"></textarea>
                                <button type="button" class="btn btn-outline-danger" @click="removeItem(index)"><i class="far fa-trash"></i></button>
                            </div>
                        </template>
                        <button type="button" class="btn btn-sm btn-outline-secondary" @click="addItem()">+ Add paragraph</button>
                    </div>

                    <div class="col-md-6">
                        @include('admin.partials.image-field', ['name' => 'about_page_image', 'label' => 'Main Image', 'current' => $about->about_page_image])
                    </div>
                    <div class="col-md-6">
                        @include('admin.partials.image-field', ['name' => 'about_page_image_2', 'label' => 'Second Image (overlapping)', 'current' => $about->about_page_image_2])
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-motto">
            <div class="card p-4 mb-3">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Motto (English)</label>
                        <input type="text" name="motto_en" class="form-control" value="{{ old('motto_en', $about->motto_en) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Motto (Arabic)</label>
                        <input type="text" name="motto_ar" dir="rtl" class="form-control" value="{{ old('motto_ar', $about->motto_ar) }}">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary text-white">Save Changes</button>
</form>
@endsection