@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Error Page')

@section('content')

    <div class="flex justify-between items-center mb-4">
        <h3 class="mb-1 text-2xl font-semibold">Error Page</h3>
        <a href="{{ route('admin.setting.index') }}" class="btn btn-primary">
            <i class="fas fa-arrow-left me-2"></i> Back
        </a>
    </div>

    <form action="{{ route('admin.setting.error.save') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="card mb-5">
            <div class="card-body">
                <div class="mb-4 input-with-label">
                    <label for="error_title">Error title</label>
                    <input type="text" class="form-control @error('error_title') is-invalid @enderror" id="error_title"
                        name="error_title" value="{{ old('error_title', $error_title ?? '') }}">
                    @error('error_title')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4 input-with-label">
                    <label for="error_message">Error Message</label>
                    <textarea class="form-control" rows="3" name="error_message" id="error_message">{{ $error_message ?? '' }}</textarea>
                    @error('error_message')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="image-input w-full mb-4 max-w-[30rem]">
                    <h3 class="mb-2">Featured Image</h3>
                    <label for="cover-image" class="aspect-[360/157]">
                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_2161_7517)">
                                <path d="M20 10.6665H20.0133" stroke="#1F61EC" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path
                                    d="M22.6673 5.3335H9.33398C7.12485 5.3335 5.33398 7.12436 5.33398 9.3335V22.6668C5.33398 24.876 7.12485 26.6668 9.33398 26.6668H22.6673C24.8765 26.6668 26.6673 24.876 26.6673 22.6668V9.3335C26.6673 7.12436 24.8765 5.3335 22.6673 5.3335Z"
                                    stroke="#1F61EC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <path
                                    d="M5.33398 19.9999L10.6673 14.6666C11.2754 14.0815 11.9652 13.7734 12.6673 13.7734C13.3695 13.7734 14.0592 14.0815 14.6673 14.6666L21.334 21.3333"
                                    stroke="#1F61EC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                <path
                                    d="M18.666 18.6664L19.9993 17.3331C20.6074 16.748 21.2972 16.4399 21.9993 16.4399C22.7015 16.4399 23.3913 16.748 23.9993 17.3331L26.666 19.9998"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </g>
                            <defs>
                                <clipPath id="clip0_2161_7517">
                                    <rect width="32" height="32" fill="white" />
                                </clipPath>
                            </defs>
                        </svg>
                        <div class="flex gap-2">
                            <p><span>Choose file</span></p>
                        </div>
                        <p class="text-14 text-paragraph">
                            JPEG, PNG, JPG, GIF, WEBP
                        </p>
                    </label>
                    <input type="file" name="error_image" accept="image/*" id="cover-image" />
                    @error('error_image')
                        <img class="mt-3" style="max-width: 300px;" src="{{ asset($error_image) }}">
                    @enderror
                </div>

                <div class="mb-4 input-with-label">
                    <label for="error_status">Visible Status</label>
                    <div>
                        <label class="switch">
                            <input type="checkbox" id="error_status" @checked(isset($error_status) && $error_status == 1) class="form-check-input"
                                name="error_status">
                            <span class="slider round"></span>
                        </label>
                        @error('error_status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="flex justify-end">
                <div class="flex flex-row gap-3">
                    <a href="{{ route('admin.setting.index') }}" class="btn btn-secondary">Back</a>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </div>

        </div>

    </form>
@endsection
@push('scripts')
    @include('backend::components.image-preview')
@endpush