@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>
                                        <small class="form-text text-muted d-block mb-1">Plain text only.</small>
                                        <textarea name="mission" class="form-control @error('mission') error-message @enderror" id="mission" rows="4" aria-label="Our Mission">{{ 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>
                                        <small class="form-text text-muted d-block mb-1">Plain text only.</small>
                                        <textarea name="value" class="form-control @error('value') error-message @enderror" id="value" rows="4" aria-label="Our Values">{{ 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>
                                            <small class="form-text text-muted d-block mb-1">Plain text only.</small>
                                            <textarea name="legal_recognition_text" class="form-control @error('legal_recognition_text') error-message @enderror" id="legal_recognition_text" rows="2" aria-label="Legal recognition">{{ 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>
                                            <small class="form-text text-muted d-block mb-1">Plain text only.</small>
                                            <textarea name="general_objective" class="form-control @error('general_objective') error-message @enderror" id="general_objective" rows="3" aria-label="General objective">{{ 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="description">Description (Who we are main content)</x-input.label>
                                            <small class="form-text text-muted d-block mb-1">Rich text allowed.</small>
                                            <textarea name="description" class="form-control @error('description') error-message @enderror" id="description" aria-label="About description">{{ 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. JPEG, JPG, PNG, GIF, WebP, SVG, BMP, TIFF, or ICO. Max 5MB. 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 id="who_we_are_img_1" 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 id="who_we_are_img_2" 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 id="about_one_img_1" 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 id="service_bg_1" 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 id="service_bg_2" 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() {
            $('#description').summernote({
                placeholder: 'Write content...',
                tabsize: 2,
                height: 200
            });
        });
    </script>
@endpush