@extends('admin.master')

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

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

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

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

    .partner-edit-subtitle {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .partner-edit-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-edit-button.back {
        background: #e2e8f0;
        color: #334155;
    }

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

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

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

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

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

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

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

<div class="partner-edit-page">
    <div class="partner-edit-header">
        <div>
            <h1 class="partner-edit-title">
                Edit Partner Logo
            </h1>

            <p class="partner-edit-subtitle">
                Change the partner image or active status.
            </p>
        </div>

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

    <div class="partner-edit-card">
        <div class="partner-edit-card-header">
            <h2 class="partner-edit-card-title">
                <i class="fa-solid fa-pen-to-square"></i>
                Update Partner Logo
            </h2>

            <p class="partner-edit-description">
                Leave the image input empty to keep the existing image.
            </p>
        </div>

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

                <div class="partner-edit-group">
                    <label
                        for="image"
                        class="partner-edit-label"
                    >
                        <i class="fa-solid fa-cloud-arrow-up"></i>
                        Change Partner Image
                    </label>

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

                    <p class="partner-edit-help">
                        Leave empty to keep the current logo.
                    </p>

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

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

                    <div class="partner-edit-status">
                        <input
                            type="hidden"
                            name="is_active"
                            value="0"
                        >

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

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

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

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

                    <div class="partner-edit-preview">
                        <img
                            src="{{ asset(
                                'storage/' .
                                $homePartner->image
                            ) }}"
                            alt="Partner logo preview"
                            id="partnerImagePreview"
                        >
                    </div>
                </div>

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

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

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

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

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

            if (!file) {
                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;
            };

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