@extends('layouts.admin.master')

@section('title')
    {{ __('About') }}
@endsection

@push('css')
@endpush

@section('content')
    @component('components.breadcrumb')
        @slot('breadcrumb_title')
            <h3></h3>
        @endslot

        <li class="breadcrumb-item"><a href="{{ route('pages.index', [$page->page, $page->section]) }}">{{ __('About') }}</a>
        </li>
        <li class="breadcrumb-item active">{{ __('Edit About') }}</li>
    @endcomponent
    <div class="row justify-content-center mt-3">
        <div class="col-lg-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h5>{{ __('master.data') }}</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('pages.update', $page->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="validationCustom01">{{ __('Title') }}</label>
                                <input class="form-control" id="validationCustom01" type="text" required=""
                                    name="title" placeholder="{{ __('Title') }}"
                                    value="{{ old('title') ? old('title') : $page->title }}" />
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>

                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <div class="form-group">
                                    <label>{{ __('Content') }}</label>
                                    <textarea id="description" name="content" cols="10" rows="2"> {!! $page->content !!} </textarea>
                                </div>
                            </div>
                        </div>


                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="validationDefault04">{{ __('Language') }}</label>
                                <select class="form-select" required id="validationDefault04" required=""
                                    name="language_id">
                                    @foreach ($languages as $language)
                                        <option value="{{ $language->id }}"
                                            {{ old('language_id') ? (old('language_id') == $language->id ? 'selected' : '') : ($language->id == $page->language_id ? 'selected' : '') }}>
                                            {{ $language->name }}</option>
                                    @endforeach

                                </select>
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>



                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="validationDefault04">{{ __('Status') }}</label>
                                <select class="form-select" id="validationDefault04" required="" name="status">
                                    <option value="active"
                                        {{ old('status') ? (old('status') == 'active' ? 'selected' : '') : ($page->status == 'active' ? 'selected' : '') }}>
                                        {{ __('Active') }}</option>
                                    <option value="inactive"
                                        {{ old('status') ? (old('status') == 'inactive' ? 'selected' : '') : ($page->status == 'inactive' ? 'selected' : '') }}>
                                        {{ __('Inactive') }}</option>
                                </select>
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>

                        @if ($image)
                            <div class="row g-1">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label" for="validationDefault04">{{ __('Image') }}</label>
                                    <div class="avatar">
                                        <img class="img-100 b-r-8" src="{{ $page->imagePath }}" alt="#">
                                    </div>
                                    @include('dashbord.include.image')
                                    <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                    <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                </div>
                            </div>
                        @endif


                        <button class="btn btn-primary" type="submit">{{ __('Update') }}</button>
                    </form>

                </div>
            </div>

        </div>

    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/js/notify/bootstrap-notify.min.js') }}"></script>
    <script src="{{ asset('assets/js/sweet-alert/sweetalert.min.js') }}"></script>
    <script src="{{ asset('assets/js/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/js/select2/select2-custom.js') }}"></script>
    <script src="{{ asset('assets/js/form-validation-custom.js') }}"></script>
    <script src="{{ asset('assets/js/bookmark/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/js/contacts/custom.js') }}"></script>

    <script src="{{ asset('assets/js/editor/ckeditor/ckeditor.js') }}"></script>
    <script src="{{ asset('assets/js/editor/ckeditor/adapters/jquery.js') }}"></script>
    <script>
        "use strict";
        CKEDITOR.replace('description', {
            on: {
                contentDom: function(evt) {
                    // Allow custom context menu only with table elemnts.
                    evt.editor.editable().on('contextmenu', function(contextEvent) {
                        var path = evt.editor.elementPath();

                        if (!path.contains('table')) {
                            contextEvent.cancel();
                        }
                    }, null, null, 5);
                }
            }
        });
    </script>
@endpush