@extends('backend.app')

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

@push('style')
    {{-- Dropify CSS --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropify/dist/css/dropify.min.css">
@endpush

@section('content')
<div class="app-content content">
    <div class="card">
        <div class="card-header bg-nest text-white">
            <div class="d-flex justify-content-between align-items-center w-100">
                <div>
                    <h3 class="card-title mb-0">About Us</h3>
                    <small class="text-white-50">Manage about us content and image</small>
                </div>
            </div>
        </div>

        <div class="card-body py-4">
            <form action="{{ route('aboutUs.update') }}" method="POST" enctype="multipart/form-data" class="tm-form">
                @csrf

                {{-- Content --}}
                <div class="form-field-wrapper">
                    <div class="form-group">
                        <label for="content">Content</label>
                        <textarea
                            name="content"
                            id="content"
                            class="ck-editor form-control @error('content') is-invalid @enderror"
                            required>{{ old('content') ?? ($aboutUs->content ?? '') }}</textarea>

                        @error('content')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- Image --}}
                <div class="form-field-wrapper">
                    <div class="form-group">
                        <label for="image">Image</label>
                        <input
                            type="file"
                            name="image"
                            class="form-control dropify @error('image') is-invalid @enderror"
                            accept="image/*"
                            data-default-file="{{ $aboutUs && $aboutUs->image ? asset($aboutUs->image) : '' }}">

                        @error('image')
                            <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- Footer --}}
                <div class="col-12 mt-3">
                    @if($aboutUs && $aboutUs->updated_at)
                        <div class="mb-3 text-muted">
                            Last updated: {{ $aboutUs->updated_at->format('d M, Y H:i') }}
                        </div>
                    @endif

                    <div class="text-end">
                        <button type="submit" class="btn btn-nest">
                            Update
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('script')
    {{-- Dropify JS --}}
    <script src="https://cdn.jsdelivr.net/npm/dropify/dist/js/dropify.min.js"></script>

    <script>
        $(document).ready(function () {
            $('.dropify').dropify({
                messages: {
                    'default': 'Drag and drop an image here or click',
                    'replace': 'Drag and drop or click to replace',
                    'remove':  'Remove',
                    'error':   'Ooops, something went wrong.'
                }
            });
        });
    </script>

    {{-- CKEditor --}}
    @include('backend.partials.ckeditor')
@endpush