@extends('backend.layout.main')

@section('content')
    <!-- header area start -->
    <x-admin.header pageTitle="About Us" currentPage="About Us"></x-admin.header>
    <!-- header area end -->
    <div class="main-content-inner">
        <div class="row justify-content-center">

            <div class="col-xl-10 col-lg-10 col-md-12 col-sm-12 col-10 col-xs-12">
                <div class="row">
                    <!-- basic form start -->
                    <div class="col-12 mt-5">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title">About Us</h4>
                                <x-form has-files :action="route('aboutus.store')">
                                    <div class="form-group">
                                        <x-input.label for="title">Our Vision</x-input.label>
                                        <x-input.text type="text"
                                            class="form-control @error('vision') error-message @enderror" id="vision"
                                            :value="old('vision',$data['about_intro']['vision'])" name="vision" placeholder="Our Vision" required />
                                        @error('vision')
                                            <x-input.error id="vision"
                                                class="form-text text-danger">{{ $message }}</x-input.error>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <x-input.label for="mission">Our Mission</x-input.label>
                                        <textarea name="mission" class="form-control @error('mission') error-message @enderror" id="mission"
                                        aria-label="With textarea">{{old('mission',$data['about_intro']['mission'])}}</textarea>
                                       
                                        @error('mission')
                                            <x-input.error id="mission"
                                                class="form-text text-danger">{{ $message }}</x-input.error>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <x-input.label for="value">Our Values</x-input.label>
                                        <textarea name="value" class="form-control @error('value') error-message @enderror" id="value"
                                            aria-label="With textarea">{{old('value',$data['about_intro']['value'])}}</textarea>
                                        @error('value')
                                            <x-input.error  class="form-text text-danger">{{ $message }}</x-input.error>
                                        @enderror
                                    </div>                                    
                                    <div class="row">
                                        <div class="form-group col-sm-12">
                                            <x-input.label for="organizer">Who we are Title</x-input.label>
                                            <x-input.text type="text"
                                                class="form-control @error('title') error-message @enderror"
                                                id="title" :value="old('title',$data['about_title'])" name="title" placeholder="title"
                                                required />
                                            @error('title')
                                                <x-input.error id="title"
                                                    class="form-text text-danger">{{ $message }}</x-input.error>
                                            @enderror
                                        </div>
                                        <div class="form-group col-sm-12">
                                            <x-input.label for="legal_recognition_text">Legal Recognition Text</x-input.label>
                                            <textarea name="legal_recognition_text" class="form-control @error('legal_recognition_text') error-message @enderror" id="legal_recognition_text"
                                                aria-label="With textarea">{{old('legal_recognition_text',$data['legal_recognition_text'] ?? '')}}</textarea>
                                            <small class="form-text text-muted">e.g. La Fondation TPO UMVA est légalement reconnue par ordonnance ministérielle numéro 550/1715...</small>
                                            @error('legal_recognition_text')
                                                <x-input.error  class="form-text text-danger">{{ $message }}</x-input.error>
                                            @enderror
                                        </div>
                                        <div class="form-group col-sm-12">
                                            <x-input.label for="general_objective">General Objective</x-input.label>
                                            <textarea name="general_objective" class="form-control @error('general_objective') error-message @enderror" id="general_objective"
                                                aria-label="With textarea">{{old('general_objective',$data['general_objective'] ?? '')}}</textarea>
                                            @error('general_objective')
                                                <x-input.error  class="form-text text-danger">{{ $message }}</x-input.error>
                                            @enderror
                                        </div>
                                        <div class="form-group col-sm-12">
                                            <x-input.label for="specific_objectives">Specific Objectives (one per line)</x-input.label>
                                            <textarea name="specific_objectives" class="form-control @error('specific_objectives') error-message @enderror" id="specific_objectives"
                                                aria-label="With textarea">{{old('specific_objectives',is_array($data['specific_objectives'] ?? []) ? implode("\n", $data['specific_objectives']) : '')}}</textarea>
                                            <small class="form-text text-muted">Enter each specific objective on a new line</small>
                                            @error('specific_objectives')
                                                <x-input.error  class="form-text text-danger">{{ $message }}</x-input.error>
                                            @enderror
                                        </div>
                                        <div class="form-group col-sm-12">
                                            <x-input.label for="value">Description</x-input.label>
                                            <textarea name="description" class="form-control @error('value') error-message @enderror" id="description"
                                                aria-label="With textarea">{{old('description',$data['about_content'])}}</textarea>
                                            @error('description')
                                                <x-input.error  class="form-text text-danger">{{ $message }}</x-input.error>
                                            @enderror
                                        </div>
                                    </div>

                                    <hr class="my-4">
                                    <h5 class="mb-3">Section images</h5>
                                    <p class="text-muted small mb-3">Who We Are, About One, and service background images. Exact dimensions required. If no image is uploaded, placehold.co is used on the frontend.</p>
                                    <div class="row">
                                        <div class="col-md-6 col-lg-4 mb-3">
                                            <x-input.label for="who_we_are_img_1">Who we are 1 (490×490)</x-input.label>
                                            <input type="file" class="form-control-file" id="who_we_are_img_1" name="who_we_are_img_1" accept="image/*">
                                            @error('who_we_are_img_1')
                                                <x-input.error class="form-text text-danger">{{ $message }}</x-input.error>
                                            @enderror
                                            @if(!empty($data['section_images']['who_we_are_img_1']) && str_contains($data['section_images']['who_we_are_img_1'], '/storage/'))
                                                <img src="{{ $data['section_images']['who_we_are_img_1'] }}" alt="Current" class="mt-2 img-thumbnail" style="max-width:120px;max-height:120px;object-fit:cover;">
                                            @endif
                                        </div>
                                        <div class="col-md-6 col-lg-4 mb-3">
                                            <x-input.label for="who_we_are_img_2">Who we are 2 (300×308)</x-input.label>
                                            <input type="file" class="form-control-file" id="who_we_are_img_2" name="who_we_are_img_2" accept="image/*">
                                            @error('who_we_are_img_2')
                                                <x-input.error class="form-text text-danger">{{ $message }}</x-input.error>
                                            @enderror
                                            @if(!empty($data['section_images']['who_we_are_img_2']) && str_contains($data['section_images']['who_we_are_img_2'], '/storage/'))
                                                <img src="{{ $data['section_images']['who_we_are_img_2'] }}" alt="Current" class="mt-2 img-thumbnail" style="max-width:120px;max-height:120px;object-fit:cover;">
                                            @endif
                                        </div>
                                        <div class="col-md-6 col-lg-4 mb-3">
                                            <x-input.label for="about_one_img_1">About one 1 (370×380)</x-input.label>
                                            <input type="file" class="form-control-file" id="about_one_img_1" name="about_one_img_1" accept="image/*">
                                            @error('about_one_img_1')
                                                <x-input.error class="form-text text-danger">{{ $message }}</x-input.error>
                                            @enderror
                                            @if(!empty($data['section_images']['about_one_img_1']) && str_contains($data['section_images']['about_one_img_1'], '/storage/'))
                                                <img src="{{ $data['section_images']['about_one_img_1'] }}" alt="Current" class="mt-2 img-thumbnail" style="max-width:120px;max-height:120px;object-fit:cover;">
                                            @endif
                                        </div>
                                        <div class="col-md-6 col-lg-4 mb-3">
                                            <x-input.label for="about_one_img_2">About one 2 (370×380)</x-input.label>
                                            <input type="file" class="form-control-file" id="about_one_img_2" name="about_one_img_2" accept="image/*">
                                            @error('about_one_img_2')
                                                <x-input.error class="form-text text-danger">{{ $message }}</x-input.error>
                                            @enderror
                                            @if(!empty($data['section_images']['about_one_img_2']) && str_contains($data['section_images']['about_one_img_2'], '/storage/'))
                                                <img src="{{ $data['section_images']['about_one_img_2'] }}" alt="Current" class="mt-2 img-thumbnail" style="max-width:120px;max-height:120px;object-fit:cover;">
                                            @endif
                                        </div>
                                        <div class="col-md-6 col-lg-4 mb-3">
                                            <x-input.label for="service_bg_1">Service background 1 – Our Projects (630×376)</x-input.label>
                                            <input type="file" class="form-control-file" id="service_bg_1" name="service_bg_1" accept="image/*">
                                            @error('service_bg_1')
                                                <x-input.error class="form-text text-danger">{{ $message }}</x-input.error>
                                            @enderror
                                            @if(!empty($data['section_images']['service_bg_1']) && str_contains($data['section_images']['service_bg_1'], '/storage/'))
                                                <img src="{{ $data['section_images']['service_bg_1'] }}" alt="Current" class="mt-2 img-thumbnail" style="max-width:160px;max-height:96px;object-fit:cover;">
                                            @endif
                                        </div>
                                        <div class="col-md-6 col-lg-4 mb-3">
                                            <x-input.label for="service_bg_2">Service background 2 – Contact Us (630×376)</x-input.label>
                                            <input type="file" class="form-control-file" id="service_bg_2" name="service_bg_2" accept="image/*">
                                            @error('service_bg_2')
                                                <x-input.error class="form-text text-danger">{{ $message }}</x-input.error>
                                            @enderror
                                            @if(!empty($data['section_images']['service_bg_2']) && str_contains($data['section_images']['service_bg_2'], '/storage/'))
                                                <img src="{{ $data['section_images']['service_bg_2'] }}" alt="Current" class="mt-2 img-thumbnail" style="max-width:160px;max-height:96px;object-fit:cover;">
                                            @endif
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-end mr-0 mt-4">
                                        <x-admin.submit type="submit" color="primary">Submit</x-admin.submit>
                                    </div>
                                </x-form>

                            </div>
                        </div>
                    </div>

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

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#value,#mission,#description,#legal_recognition_text,#general_objective').summernote({
                placeholder: 'Write content...',
                tabsize: 2,
                height: 150
            });
        });
    </script>
@endpush