@extends('admin.master')

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

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

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

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

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

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

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

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

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

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

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

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

    .partner-form-group {
        margin-bottom: 20px;
    }

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

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

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

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

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

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

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

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

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

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

    .partner-preview-image {
        max-width: 100%;
        max-height: 150px;
        width: auto;
        height: auto;
        display: none;
        object-fit: contain;
    }

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

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

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

    .partner-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;
    }

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

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

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

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

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

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

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

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

        .partner-form-actions .partner-form-button {
            width: 100%;
        }
    }
</style>

<div class="partner-form-page">
    <div class="partner-form-header">
        <div>
            <h1 class="partner-form-title">
                Add Partner Logo
            </h1>

            <p class="partner-form-subtitle">
                Upload a trusted partner logo for the homepage slider.
            </p>
        </div>

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

    <div class="partner-form-card">
        <div class="partner-form-card-header">
            <h2 class="partner-form-card-title">
                <i class="fa-solid fa-handshake"></i>
                Partner Information
            </h2>

            <p class="partner-form-card-description">
                Only the partner image and active status are required.
            </p>
        </div>

        <div class="partner-form-card-body">
            @if ($errors->any())
                <div class="partner-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.home-partners.store') }}"
                method="POST"
                enctype="multipart/form-data"
            >
                @csrf

                <div class="partner-form-group">
                    <label
                        for="image"
                        class="partner-form-label"
                    >
                        <i class="fa-solid fa-cloud-arrow-up"></i>
                        Partner Image
                        <span class="partner-form-required">*</span>
                    </label>

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

                    <p class="partner-form-help">
                        Transparent PNG, WEBP or SVG logo is recommended.
                        Maximum size: 5 MB.
                    </p>

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

                <div class="partner-form-group">
                    <label class="partner-form-label">
                        <i class="fa-solid fa-toggle-on"></i>
                        Status
                    </label>

                    <div class="partner-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 partner logo on homepage
                        </label>
                    </div>

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

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

                    <div class="partner-preview-box">
                        <img
                            src=""
                            alt="Partner logo preview"
                            class="partner-preview-image"
                            id="partnerImagePreview"
                        >

                        <div
                            class="partner-preview-placeholder"
                            id="partnerImagePlaceholder"
                        >
                            <i class="fa-regular fa-image"></i>
                            Select a partner logo to preview
                        </div>
                    </div>
                </div>

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

                    <button
                        type="submit"
                        class="partner-form-button"
                    >
                        <i class="fa-solid fa-floppy-disk"></i>
                        Save Partner Logo
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

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

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

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

        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 file.');

                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