@extends('admin.master')

@section('title')
    About
@endsection

@section('content')
    <!--begin::Card-->
    <div class="card card-custom gutter-b example example-compact card-collapsed" data-card="true" id="kt_card_4">
        <div class="card-header">
            <h3 class="card-title">
                Edit About us
            </h3>
            <div class="card-toolbar">
                <a href="#" class="btn btn-icon btn-sm btn-light-primary mr-1" data-card-tool="toggle">
                    <i class="ki ki-arrow-down icon-nm"></i>
                </a>
            </div>
        </div>

        <form class="form" action="{{ route('abouts.update', $about->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="card-body">
                <div class="form-group row">
                    <div class="col-lg-12">
                        <label>About Title: <span class="text-danger">*</span> </label>
                        <input type="text" name="title" class="form-control mb-2" placeholder="Enter about title here" value="{{ old('title', $about->title) }}" required />
                        @error('title')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-12">
                        <label>About Summary: <span class="text-danger">*</span></label>
                        <textarea name="summary" rows="5" class="form-control" placeholder="Enter about summary">{{ old('summary', $about->summary) }}</textarea>
                        @error('summary')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-6">
                        <label>Image For About Page:</label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="customFile" name="main_image" />
                            <label class="custom-file-label" for="customFile">Choose file</label>
                        </div>
                        @if ($about->main_image)
                            <div class="mt-3">
                                <span class="form-text text-muted">Current Image:</span>
                                <img src="{{ asset('uploads/abouts/' . $about->main_image) }}" alt="About Image" width="100" />
                            </div>
                        @endif
                        @error('main_image')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-lg-6">
                        <label>Image For About Section on Home Page:</label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="customFile" name="home_image" />
                            <label class="custom-file-label" for="customFile">Choose file</label>
                        </div>
                        @if ($about->home_image)
                            <div class="mt-3">
                                <span class="form-text text-muted">Current Image:</span>
                                <img src="{{ asset('uploads/abouts/' . $about->home_image) }}" alt="About Image" width="100" />
                            </div>
                        @endif
                        @error('home_image')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-6">
                        <label>Main Image Alt: <span class="text-danger">*</span> </label>
                        <input type="text" name="main_image_alt" class="form-control mb-2" placeholder="Enter main image alt here" value="{{ old('main_image_alt', $about->main_image_alt) }}" required />
                        @error('main_image_alt')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-lg-6">
                        <label>Home Image Alt: <span class="text-danger">*</span> </label>
                        <input type="text" name="home_image_alt" class="form-control mb-2" placeholder="Enter home image alt here" value="{{ old('home_image_alt', $about->home_image_alt) }}" required />
                        @error('home_image_alt')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-12">
                        <label>About Detail:</label>
                        <textarea name="detail" id="kt_summernote_1" class="form-control summernote" placeholder="Enter about detail">{{ old('detail', $about->detail) }}</textarea>
                        @error('detail')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-6">
                        <div class="bg-gray-200 rounded p-5">
                            <label>SEO Title:</label>
                            <input type="text" name="seo_title" class="form-control mb-2" placeholder="Enter about seo title here" value="{{ old('seo_title', $about->seo_title) }}" required />
                            @error('seo_title')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="bg-gray-200 rounded p-5">
                            <label>SEO Keywords:</label>
                            <input type="text" name="seo_keywords" class="form-control mb-2" placeholder="Enter about seo keywords here" value="{{ old('seo_keywords', $about->seo_keywords) }}" required />
                            @error('seo_keywords')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-12">
                        <div class="bg-gray-200 rounded p-5">
                            <label>SEO Description: </label>
                            <textarea name="seo_description" rows="3" class="form-control" placeholder="Enter about seo description">{{ old('seo_description', $about->seo_description) }}</textarea>
                            @error('seo_description')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <button type="submit" class="btn btn-success mr-2">Edit About</button>
                    </div>
                </div>
            </div>
        </form>

    </div>
    <!--end::Card-->


    <!--begin::Card-->
    <div class="card card-custom gutter-b">
        <div class="card-body">
            <!--begin::Top-->
            <div class="d-flex">
                <!--begin::Pic-->
                <div class="flex-shrink-0 mr-7">
                    <div class="symbol symbol-50 symbol-lg-120">
                        @if ($about->main_image)
                            <img src="{{ asset('uploads/abouts/' . $about->main_image) }}" class="img-fluid object-fit-cover" />
                        @else
                            <p>No image available</p>
                        @endif
                    </div>
                </div>
                <!--end::Pic-->

                <!--begin: Info-->
                <div class="flex-grow-1">
                    <!--begin::Title-->
                    <div class="d-flex align-items-center justify-content-between flex-wrap mt-2">
                        <!--begin::User-->
                        <div class="mr-3">
                            <!--begin::Name-->
                            <div class="d-flex align-items-center text-dark font-size-h5 font-weight-bold mr-3">
                                {{ $about->title }}
                            </div>
                            <!--end::Name-->


                            <!--end::Contacts-->
                        </div>
                        <!--begin::User-->

                    </div>
                    <!--end::Title-->

                    <!--begin::Content-->
                    <div class="d-flex align-items-center flex-wrap justify-content-between">
                        <!--begin::Summary-->
                        <div class="flex-grow-1 font-weight-bold text-dark-50 py-2 py-lg-2 mr-5">
                            {!! $about->summary !!}
                        </div>
                        <!--end::Summary-->

                        <!--begin::Detail-->
                        <div class="flex-grow-1 font-weight-bold text-dark-50 py-2 py-lg-2 mr-5">
                            {!! $about->detail !!}
                        </div>
                        <!--end::Detail-->

                    </div>
                    <!--end::Content-->
                </div>
                <!--end::Info-->


                <!--begin::Pic-->
                <div class="flex-shrink-0 mr-7">
                    <div class="symbol symbol-50 symbol-lg-120">
                        @if ($about->home_image)
                            <img src="{{ asset('uploads/abouts/' . $about->home_image) }}" alt="About Image" class="img-fluid" />
                        @else
                            <p>No image available</p>
                        @endif
                    </div>
                </div>
                <!--end::Pic-->
            </div>
            <!--end::Top-->

        </div>
    </div>
    <!--end::Card-->

    <!--begin::Card-->
    <div class="card card-custom gutter-b">
        <div class="card-body">
            <!--begin::Top-->
            <div class="d-flex">

                <!--begin: Info-->
                <div class="flex-grow-1">
                    <!--begin::Title-->
                    <div class="d-flex align-items-center justify-content-between flex-wrap mt-2">
                        <!--begin::User-->
                        <div class="mr-3">
                            <!--begin::Name-->
                            <div class="d-flex align-items-center text-dark font-size-h5 font-weight-bold mr-3">
                                SEO Title
                            </div>
                            <!--end::Name-->


                            <!--end::Contacts-->
                        </div>
                        <!--begin::User-->

                    </div>
                    <!--end::Title-->

                    <!--begin::Content-->
                    <div class="d-flex align-items-center flex-wrap justify-content-between">
                        <!--begin::SEO Title-->
                        <div class="flex-grow-1 font-weight-bold text-dark-50 py-2 py-lg-2 mr-5">
                            {!! $about->seo_title !!}
                        </div>
                        <!--end::SEO Title-->

                    </div>
                    <!--end::Content-->
                </div>
                <!--end::Info-->

                <!--begin: Info-->
                <div class="flex-grow-1">
                    <!--begin::Title-->
                    <div class="d-flex align-items-center justify-content-between flex-wrap mt-2">
                        <!--begin::User-->
                        <div class="mr-3">
                            <!--begin::Name-->
                            <div class="d-flex align-items-center text-dark font-size-h5 font-weight-bold mr-3">
                                SEO Keywords
                            </div>
                            <!--end::Name-->


                            <!--end::Contacts-->
                        </div>
                        <!--begin::User-->

                    </div>
                    <!--end::Title-->

                    <!--begin::Content-->
                    <div class="d-flex align-items-center flex-wrap justify-content-between">
                        <!--begin::SEO Keywords-->
                        <div class="flex-grow-1 font-weight-bold text-dark-50 py-2 py-lg-2 mr-5">
                            {!! $about->seo_keywords !!}
                        </div>
                        <!--end::SEO Keywords-->

                    </div>
                    <!--end::Content-->
                </div>
                <!--end::Info-->

                <!--begin: Info-->
                <div class="flex-grow-1">
                    <!--begin::Title-->
                    <div class="d-flex align-items-center justify-content-between flex-wrap mt-2">
                        <!--begin::User-->
                        <div class="mr-3">
                            <!--begin::Name-->
                            <div class="d-flex align-items-center text-dark font-size-h5 font-weight-bold mr-3">
                                SEO Description
                            </div>
                            <!--end::Name-->


                            <!--end::Contacts-->
                        </div>
                        <!--begin::User-->

                    </div>
                    <!--end::Title-->

                    <!--begin::Content-->
                    <div class="d-flex align-items-center flex-wrap justify-content-between">
                        <!--begin::SEO Description-->
                        <div class="flex-grow-1 font-weight-bold text-dark-50 py-2 py-lg-2 mr-5">
                            {!! $about->seo_description !!}
                        </div>
                        <!--end::SEO Description-->

                    </div>
                    <!--end::Content-->
                </div>
                <!--end::Info-->
            </div>
            <!--end::Top-->

        </div>
    </div>
    <!--end::Card-->
@endsection
