@extends('admin.master')

@section('content')
<style>
    .about-form-page {
        width: 100%;
        padding: 24px;
    }

    .about-form-page * {
        box-sizing: border-box;
    }

    .about-form-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 22px;
    }

    .about-form-title {
        margin: 0 0 6px;
        color: #111827;
        font-size: 26px;
        font-weight: 700;
    }

    .about-form-subtitle {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.6;
    }

    .about-form-card {
        overflow: hidden;
        border-radius: 10px;
        background: #ffffff;
    }

    .about-form-card-header {
        padding: 18px 20px;
        background: #f8fafc;
    }

    .about-form-card-title {
        margin: 0;
        color: #111827;
        font-size: 17px;
        font-weight: 700;
    }

    .about-form-card-description {
        margin: 6px 0 0;
        color: #6b7280;
        font-size: 12px;
    }

    .about-form-card-body {
        padding: 22px;
    }

    .about-form-error-alert {
        margin-bottom: 20px;
        padding: 14px 16px;
        border-radius: 8px;
        background: #fee2e2;
        color: #b91c1c;
        font-size: 13px;
        line-height: 1.7;
    }

    .about-form-error-alert ul {
        margin: 8px 0 0 20px;
    }

    .about-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .about-form-group {
        min-width: 0;
    }

    .about-form-group.full-width {
        grid-column: 1 / -1;
    }

    .about-form-label {
        display: block;
        margin-bottom: 8px;
        color: #374151;
        font-size: 13px;
        font-weight: 700;
    }

    .about-form-required {
        color: #dc2626;
    }

    .about-form-control {
        width: 100%;
        min-height: 47px;
        padding: 11px 14px;
        border: 0;
        border-radius: 7px;
        outline: 0;
        background: #f1f5f9;
        color: #111827;
        font-size: 14px;
        transition: 0.2s ease;
    }

    .about-form-control:focus {
        background: #fff0eb;
    }

    textarea.about-form-control {
        min-height: 150px;
        resize: vertical;
    }

    .about-form-help {
        margin: 7px 0 0;
        color: #6b7280;
        font-size: 11px;
        line-height: 1.6;
    }

    .about-form-field-error {
        margin: 7px 0 0;
        color: #dc2626;
        font-size: 12px;
        font-weight: 600;
    }

    .about-status-box {
        min-height: 47px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border-radius: 7px;
        background: #f1f5f9;
    }

    .about-status-box input {
        width: 18px;
        height: 18px;
        accent-color: #ff5722;
    }

    .about-status-box label {
        cursor: pointer;
        color: #374151;
        font-size: 13px;
        font-weight: 600;
    }

    .about-preview-box {
        min-height: 270px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 8px;
        background: #f1f5f9;
    }

    .about-preview-image {
        width: 100%;
        height: 400px;
        display: none;
        object-fit: cover;
    }

    .about-preview-placeholder {
        padding: 30px;
        color: #94a3b8;
        text-align: center;
        font-size: 14px;
    }

    .about-preview-placeholder i {
        display: block;
        margin-bottom: 12px;
        font-size: 42px;
    }

    .about-form-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 24px;
    }

    .about-form-button {
        min-height: 43px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 17px;
        border: 0;
        border-radius: 7px;
        background: #ff5722;
        color: #ffffff;
        cursor: pointer;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: 0.2s ease;
    }

    .about-form-button:hover {
        background: #e64917;
        color: #ffffff;
    }

    .about-form-button.back {
        background: #e2e8f0;
        color: #334155;
    }

    .about-form-button.back:hover {
        background: #cbd5e1;
        color: #111827;
    }

    @media (max-width: 767px) {
        .about-form-page {
            padding: 16px;
        }

        .about-form-header {
            flex-direction: column;
        }

        .about-form-header .about-form-button {
            width: 100%;
        }

        .about-form-title {
            font-size: 22px;
        }

        .about-form-grid {
            grid-template-columns: 1fr;
        }

        .about-form-group.full-width {
            grid-column: auto;
        }

        .about-form-card-body {
            padding: 17px;
        }

        .about-form-actions {
            flex-direction: column-reverse;
        }

        .about-form-actions .about-form-button {
            width: 100%;
        }

        .about-preview-image {
            height: 260px;
        }
    }
</style>

<div class="about-form-page">
    <div class="about-form-header">
        <div>
            <h1 class="about-form-title">
                Add About Home Section
            </h1>

            <p class="about-form-subtitle">
                Create the homepage About Wasel Exchange content.
            </p>
        </div>

        <a
            href="{{ route('admin.about-home.index') }}"
            class="about-form-button back"
        >
            <i class="fa-solid fa-arrow-left"></i>
            Back to List
        </a>
    </div>

    <div class="about-form-card">
        <div class="about-form-card-header">
            <h2 class="about-form-card-title">
                <i class="fa-regular fa-address-card"></i>
                About Section Information
            </h2>

            <p class="about-form-card-description">
                Enter the content, experience information and image.
            </p>
        </div>

        <div class="about-form-card-body">
            @if ($errors->any())
                <div class="about-form-error-alert">
                    <strong>
                        <i class="fa-solid fa-circle-exclamation"></i>
                        Please fix the following errors:
                    </strong>

                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>
                                {{ $error }}
                            </li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form
                action="{{ route('admin.about-home.store') }}"
                method="POST"
                enctype="multipart/form-data"
            >
                @csrf

                <div class="about-form-grid">
                    <div class="about-form-group">
                        <label
                            for="label"
                            class="about-form-label"
                        >
                            <i class="fa-solid fa-tag"></i>
                            Section Label
                        </label>

                        <input
                            type="text"
                            id="label"
                            name="label"
                            class="about-form-control"
                            value="{{ old(
                                'label',
                                'ABOUT WASEL EXCHANGE'
                            ) }}"
                            placeholder="ABOUT WASEL EXCHANGE"
                            maxlength="150"
                        >

                        @error('label')
                            <p class="about-form-field-error">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="about-form-group">
                        <label
                            for="title"
                            class="about-form-label"
                        >
                            <i class="fa-solid fa-heading"></i>
                            Section Title
                            <span class="about-form-required">*</span>
                        </label>

                        <input
                            type="text"
                            id="title"
                            name="title"
                            class="about-form-control"
                            value="{{ old(
                                'title',
                                'Global Transfers, Local Trust'
                            ) }}"
                            placeholder="Global Transfers, Local Trust"
                            maxlength="255"
                            required
                        >

                        @error('title')
                            <p class="about-form-field-error">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="about-form-group full-width">
                        <label
                            for="description_one"
                            class="about-form-label"
                        >
                            <i class="fa-solid fa-align-left"></i>
                            First Description
                            <span class="about-form-required">*</span>
                        </label>

                        <textarea
                            id="description_one"
                            name="description_one"
                            class="about-form-control"
                            required
                        >{{ old('description_one', '<strong>Wasel Exchange SAOC</strong> is a premier money exchange company in the Sultanate of Oman, operating under the strict regulatory framework of the <strong>Central Bank of Oman</strong>. We are a wholly owned subsidiary of <strong>Oman Investment & Finance Company SAOG (OIFC)</strong>—a reputable institution with a distinguished legacy in financial services since 1979.') }}</textarea>

                        <p class="about-form-help">
                            Bold text করতে
                            &lt;strong&gt;your text&lt;/strong&gt;
                            ব্যবহার করুন।
                        </p>

                        @error('description_one')
                            <p class="about-form-field-error">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="about-form-group full-width">
                        <label
                            for="description_two"
                            class="about-form-label"
                        >
                            <i class="fa-solid fa-align-left"></i>
                            Second Description
                        </label>

                        <textarea
                            id="description_two"
                            name="description_two"
                            class="about-form-control"
                        >{{ old('description_two', 'Leveraging <strong>OIFC’s decades of experience</strong> in billing, collection, and debt factoring for essential services such as electricity, water, and telecommunications, Wasel Exchange has established itself as a <strong>trusted provider of currency exchange and cross border payment solutions</strong>.') }}</textarea>

                        <p class="about-form-help">
                            এই description optional।
                        </p>

                        @error('description_two')
                            <p class="about-form-field-error">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="about-form-group">
                        <label
                            for="button_text"
                            class="about-form-label"
                        >
                            <i class="fa-solid fa-computer-mouse"></i>
                            Button Text
                        </label>

                        <input
                            type="text"
                            id="button_text"
                            name="button_text"
                            class="about-form-control"
                            value="{{ old(
                                'button_text',
                                'Read More'
                            ) }}"
                            placeholder="Read More"
                            maxlength="100"
                        >

                        @error('button_text')
                            <p class="about-form-field-error">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="about-form-group">
                        <label
                            for="button_url"
                            class="about-form-label"
                        >
                            <i class="fa-solid fa-link"></i>
                            Button URL
                        </label>

                        <input
                            type="text"
                            id="button_url"
                            name="button_url"
                            class="about-form-control"
                            value="{{ old(
                                'button_url',
                                '/about-us'
                            ) }}"
                            placeholder="/about-us"
                            maxlength="2048"
                        >

                        @error('button_url')
                            <p class="about-form-field-error">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="about-form-group">
                        <label
                            for="experience_number"
                            class="about-form-label"
                        >
                            <i class="fa-solid fa-award"></i>
                            Experience Number
                            <span class="about-form-required">*</span>
                        </label>

                        <input
                            type="number"
                            id="experience_number"
                            name="experience_number"
                            class="about-form-control"
                            value="{{ old(
                                'experience_number',
                                10
                            ) }}"
                            min="0"
                            max="999"
                            required
                        >

                        @error('experience_number')
                            <p class="about-form-field-error">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="about-form-group">
                        <label
                            for="experience_suffix"
                            class="about-form-label"
                        >
                            <i class="fa-solid fa-plus"></i>
                            Experience Suffix
                        </label>

                        <input
                            type="text"
                            id="experience_suffix"
                            name="experience_suffix"
                            class="about-form-control"
                            value="{{ old(
                                'experience_suffix',
                                '+'
                            ) }}"
                            placeholder="+"
                            maxlength="10"
                        >

                        @error('experience_suffix')
                            <p class="about-form-field-error">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="about-form-group">
                        <label
                            for="experience_text"
                            class="about-form-label"
                        >
                            <i class="fa-solid fa-font"></i>
                            Experience Text
                            <span class="about-form-required">*</span>
                        </label>

                        <input
                            type="text"
                            id="experience_text"
                            name="experience_text"
                            class="about-form-control"
                            value="{{ old(
                                'experience_text',
                                'Years of Experience'
                            ) }}"
                            placeholder="Years of Experience"
                            maxlength="150"
                            required
                        >

                        @error('experience_text')
                            <p class="about-form-field-error">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="about-form-group">
                        <label
                            for="image_alt"
                            class="about-form-label"
                        >
                            <i class="fa-solid fa-universal-access"></i>
                            Image Alt Text
                        </label>

                        <input
                            type="text"
                            id="image_alt"
                            name="image_alt"
                            class="about-form-control"
                            value="{{ old('image_alt') }}"
                            placeholder="Wasel Exchange Global Transfers"
                            maxlength="255"
                        >

                        @error('image_alt')
                            <p class="about-form-field-error">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="about-form-group full-width">
                        <label
                            for="image"
                            class="about-form-label"
                        >
                            <i class="fa-solid fa-cloud-arrow-up"></i>
                            About Section Image
                            <span class="about-form-required">*</span>
                        </label>

                        <input
                            type="file"
                            id="image"
                            name="image"
                            class="about-form-control"
                            accept="image/jpeg,image/png,image/webp"
                            required
                        >

                        <p class="about-form-help">
                            Recommended square image: 900 × 900 pixels.
                            Maximum size: 5 MB.
                        </p>

                        @error('image')
                            <p class="about-form-field-error">
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <div class="about-form-group full-width">
                        <label class="about-form-label">
                            <i class="fa-solid fa-toggle-on"></i>
                            Section Status
                        </label>

                        <div class="about-status-box">
                            <input
                                type="hidden"
                                name="is_active"
                                value="0"
                            >

                            <input
                                type="checkbox"
                                id="is_active"
                                name="is_active"
                                value="1"
                                @checked(old('is_active', true))
                            >

                            <label for="is_active">
                                Show this section on homepage
                            </label>
                        </div>
                    </div>

                    <div class="about-form-group full-width">
                        <label class="about-form-label">
                            <i class="fa-solid fa-eye"></i>
                            Image Preview
                        </label>

                        <div class="about-preview-box">
                            <img
                                src=""
                                alt="About image preview"
                                class="about-preview-image"
                                id="aboutImagePreview"
                            >

                            <div
                                class="about-preview-placeholder"
                                id="aboutImagePlaceholder"
                            >
                                <i class="fa-regular fa-image"></i>
                                Select an image to preview
                            </div>
                        </div>
                    </div>
                </div>

                <div class="about-form-actions">
                    <a
                        href="{{ route('admin.about-home.index') }}"
                        class="about-form-button back"
                    >
                        <i class="fa-solid fa-xmark"></i>
                        Cancel
                    </a>

                    <button
                        type="submit"
                        class="about-form-button"
                    >
                        <i class="fa-solid fa-floppy-disk"></i>
                        Save About Section
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const imageInput =
            document.getElementById('image');

        const imagePreview =
            document.getElementById('aboutImagePreview');

        const placeholder =
            document.getElementById('aboutImagePlaceholder');

        imageInput?.addEventListener('change', function () {
            const file = this.files?.[0];

            if (!file) {
                imagePreview.style.display = 'none';
                placeholder.style.display = 'block';
                return;
            }

            if (!file.type.startsWith('image/')) {
                this.value = '';

                alert('Please select a valid image.');

                return;
            }

            const reader = new FileReader();

            reader.onload = function (event) {
                imagePreview.src = event.target.result;
                imagePreview.style.display = 'block';
                placeholder.style.display = 'none';
            };

            reader.readAsDataURL(file);
        });
    });
</script>
@endsection