<?php
    $colorFields = [
        'brand_primary_color' => ['Primary brand color', 'Main buttons, links, active states, and front page highlights.', '#f7931a'],
        'brand_secondary_color' => ['Secondary brand color', 'Deep supporting shade for headers, footer blocks, and admin surfaces.', '#155c9d'],
        'brand_accent_color' => ['Accent color', 'Premium highlights, gradients, badges, and receipt accents.', '#0f766e'],
        'brand_dark_color' => ['Dark text color', 'Primary readable text and dark email/receipt footer areas.', '#102033'],
        'brand_light_color' => ['Light background color', 'Soft page backgrounds, receipt notice panels, and light sections.', '#fff7ed'],
        'brand_success_color' => ['Success color', 'Successful status labels and confirmation accents.', '#16a34a'],
        'brand_warning_color' => ['Warning color', 'Pending notices and attention states.', '#f59e0b'],
        'brand_danger_color' => ['Danger color', 'Error, failed, cancelled, and destructive action states.', '#dc2626'],
    ];
?>

<style>
    .brand-color-settings {
        margin-top: 1.5rem;
    }

    .brand-color-hero {
        border-radius: 18px;
        padding: 1.25rem;
        color: #fff;
        background:
            linear-gradient(135deg, <?php echo e($settings->brand_primary_color ?? '#f7931a'); ?>, <?php echo e($settings->brand_secondary_color ?? '#155c9d'); ?> 58%, <?php echo e($settings->brand_accent_color ?? '#0f766e'); ?>);
        box-shadow: 0 16px 40px rgba(15, 23, 42, .16);
    }

    .brand-color-hero h4 {
        color: #fff;
        margin-bottom: .35rem;
        font-weight: 800;
    }

    .brand-color-hero p {
        max-width: 760px;
        margin-bottom: 0;
        color: rgba(255, 255, 255, .88);
    }

    .brand-color-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 1.25rem;
    }

    .brand-color-card {
        border: 1px solid rgba(148, 163, 184, .25);
        border-radius: 16px;
        padding: 1rem;
        background: #fff;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    }

    .brand-color-card label {
        display: block;
        margin-bottom: .35rem;
        font-weight: 800;
        color: #111827;
    }

    .brand-color-card small {
        display: block;
        color: #64748b;
        line-height: 1.45;
        min-height: 38px;
    }

    .brand-color-input {
        display: flex;
        gap: .65rem;
        align-items: center;
        margin-top: .8rem;
    }

    .brand-color-input input[type="color"] {
        width: 54px;
        height: 44px;
        padding: 3px;
        border: 1px solid #dbe4ef;
        border-radius: 12px;
        background: #fff;
        cursor: pointer;
    }

    .brand-color-input input[type="text"] {
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .brand-color-preview {
        margin-top: 1.25rem;
        border-radius: 18px;
        padding: 1rem;
        background: linear-gradient(135deg, var(--brand-primary, #f7931a), var(--brand-secondary, #155c9d), var(--brand-accent, #0f766e));
        color: #fff;
    }

    @media (max-width: 767px) {
        .brand-color-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="brand-color-settings">
    <div class="brand-color-hero">
        <h4>General Color Settings</h4>
        <p>These colors control the site-wide brand palette for front pages, admin buttons and highlights, shipment receipts, and email alert templates.</p>
    </div>

    <form method="post" action="<?php echo e(route('updatecolors')); ?>">
        <?php echo csrf_field(); ?>
        <?php echo method_field('PUT'); ?>

        <div class="brand-color-grid">
            <?php $__currentLoopData = $colorFields; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $field => [$label, $help, $fallback]): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php
                    $value = old($field, $settings->{$field} ?? $fallback);
                ?>
                <div class="brand-color-card">
                    <label for="<?php echo e($field); ?>"><?php echo e($label); ?></label>
                    <small><?php echo e($help); ?></small>
                    <div class="brand-color-input">
                        <input type="color" id="<?php echo e($field); ?>" value="<?php echo e($value); ?>" data-color-picker="<?php echo e($field); ?>">
                        <input type="text" class="form-control" name="<?php echo e($field); ?>" value="<?php echo e($value); ?>" maxlength="7" pattern="^#[0-9A-Fa-f]{6}$" data-color-text="<?php echo e($field); ?>" required>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        <div class="brand-color-preview" id="brandColorPreview">
            <strong><?php echo e($settings->site_name); ?></strong>
            <div>Live preview for buttons, headings, receipts, and email accents.</div>
        </div>

        <div class="mt-4">
            <button type="submit" class="px-5 btn btn-primary btn-lg">Save Colors</button>
        </div>
    </form>
</div>

<script>
    document.querySelectorAll('[data-color-picker]').forEach(function (picker) {
        var key = picker.getAttribute('data-color-picker');
        var text = document.querySelector('[data-color-text="' + key + '"]');
        if (!text) {
            return;
        }
        picker.addEventListener('input', function () {
            text.value = picker.value.toUpperCase();
        });
        text.addEventListener('input', function () {
            if (/^#[0-9A-Fa-f]{6}$/.test(text.value)) {
                picker.value = text.value;
            }
        });
    });
</script>
<?php /**PATH /home/kdcwrbdi/public_html/resources/views/admin/Settings/AppSettings/colors.blade.php ENDPATH**/ ?>