@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.formscss')
    <style>
        :root {
            --color-primary-light: #fdfaff;
            --color-primary-light-rgb: 253, 250, 255;
            --color-primary-50: #f8eefe;
            --color-primary-50-rgb: 248, 238, 254;
            --color-primary-100: #f1dcfc;
            --color-primary-100-rgb: 241, 220, 252;
            --color-primary-200: #e1b6f9;
            --color-primary-200-rgb: 225, 182, 249;
            --color-primary-300: #d290f6;
            --color-primary-300-rgb: 210, 144, 246;
            --color-primary-400: #c36af3;
            --color-primary-400-rgb: 195, 106, 243;
            --color-primary-500: #b344f0;
            --color-primary-500-rgb: 179, 68, 240;
            --color-primary-600: #a41eee;
            --color-primary-600-rgb: 164, 30, 238;
            --color-primary-700: #8e10d3;
            --color-primary-700-rgb: 142, 16, 211;
            --color-primary-800: #740dad;
            --color-primary-800-rgb: 116, 13, 173;
            --color-primary-900: #5b0a87;
            --color-primary-900-rgb: 91, 10, 135;
            --color-primary-950: #4e0974;
            --color-primary-950-rgb: 78, 9, 116;
            --color-primary-dark: #08010c;
            --color-primary-dark-rgb: 8, 1, 12;

            --color-secondary-50: #f9fafb;
            --color-secondary-50-rgb: 249, 250, 251;
            --color-secondary-100: #f3f4f6;
            --color-secondary-100-rgb: 243, 244, 246;
            --color-secondary-200: #e5e7eb;
            --color-secondary-200-rgb: 229, 231, 235;
            --color-secondary-300: #d1d5db;
            --color-secondary-300-rgb: 209, 213, 219;
            --color-secondary-400: #9ca3af;
            --color-secondary-400-rgb: 156, 163, 175;
            --color-secondary-500: #6b7280;
            --color-secondary-500-rgb: 107, 114, 128;
            --color-secondary-600: #4b5563;
            --color-secondary-600-rgb: 75, 85, 99;
            --color-secondary-700: #374151;
            --color-secondary-700-rgb: 55, 65, 81;
            --color-secondary-800: #1f2937;
            --color-secondary-800-rgb: 31, 41, 55;
            --color-secondary-900: #111827;
            --color-secondary-900-rgb: 17, 24, 39;
            --color-secondary-950: #030712;
            --color-secondary-950-rgb: 3, 7, 18;
            --color-secondary-dark: #030712;
            --color-secondary-dark-rgb: 3, 7, 18;



        }
    </style>
@endsection
@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"> اعدادات الالوان </h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection
@section('content')
    <div id='pageid'>

        <div>
            <div class="row">

                <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">

                    <!--div-->

                    <form id='settings' name="colorSettingsForm" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="card">
                            <div class="card-body">
                                <div class="row row-sm">

                                    <!-- Color Picker -->
                                    <!-- An Alpine.js and Bootstrap component -->
                                    <div class="container-fluid py-3">
                                        <div class="card mb-4">
                                            @php
                                                $colorTypes = [
                                                    'primary' => [
                                                        'title' => 'اختر اللون الأساسي',
                                                        'previewTitle' => 'معاينة الألوان الأساسية',
                                                        'name' => 'primary_color',
                                                        'fallback' => '#b344f0', // Default primary color
                                                    ],
                                                    'secondary' => [
                                                        'title' => 'اختر اللون الثانوي',
                                                        'previewTitle' => 'معاينة الألوان الثانوية',
                                                        'name' => 'secondary_color',
                                                        'fallback' => '#6b7280', // Default secondary color
                                                    ],
                                                    'background' => [
                                                        'title' => 'اختر لون الخلفية',
                                                        // No preview for background color
                                                        'name' => '--color-background',
                                                        'fallback' => '#f8fafc', // Default background color
                                                    ],
                                                    'text' => [
                                                        'title' => 'اختر لون النص',
                                                        // No preview for text color
                                                        'name' => '--color-text',
                                                        'fallback' => '#030712', // Default text color
                                                    ],
                                                    'textLight' => [
                                                        'title' => 'اختر لون النص الفاتح',
                                                        // No preview for border color
                                                        'name' => '--color-text-light',
                                                        'fallback' => '#f8fafc', // Default text light color
                                                    ],
                                                ];
                                            @endphp

                                            @foreach ($colorTypes as $colorType => $labels)
                                                <div class="card-body">
                                                    <!-- {{ $colorType }} Color Input -->
                                                    <div class="form-group  " x-data="{{ $colorType }}_color">
                                                        <label for="{{ $colorType }}-color-picker" class="form-label">
                                                            {{ $labels['title'] }}
                                                        </label>
                                                        <div class="input-group">
                                                            <span class="input-group-text">
                                                                <div class="position-relative"
                                                                    style="width: 24px; height: 24px;">
                                                                    <div class="rounded-circle w-100 h-100"
                                                                        x-bind:style="{ backgroundColor: color }">
                                                                    </div>
                                                                    <input type="color"
                                                                        id="{{ $colorType }}-color-picker"
                                                                        x-model="color"
                                                                        class="position-absolute top-0 start-0 opacity-0 w-100 h-100 cursor-pointer"
                                                                        style="top: 0;inset-inline-start: 0;cursor: pointer;opacity: 0;" />
                                                                </div>
                                                            </span>
                                                            <input dir="ltr" type="text" {{-- TODO: onsubmit submit only this  --}}
                                                                id="{{ $colorType }}-color-picker-input"
                                                                name="{{ $labels['name'] }}" x-model="textInput"
                                                                class="form-control" required style="text-align: end;" />
                                                        </div>
                                                        @if (isset($labels['previewTitle']))
                                                            <!-- Color Palette Preview -->
                                                            <h5 class="card-title mt-4 mb-3">{{ $labels['previewTitle'] }}
                                                            </h5>
                                                            <div class="row row-cols-5 g-2">
                                                                <template
                                                                    x-for="shade in ['light', '50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950', 'dark']"
                                                                    :key="shade">
                                                                    <div class="col text-center">
                                                                        <div class="d-flex flex-column align-items-center">
                                                                            <div class="rounded mb-1"
                                                                                style="width: 48px; height: 48px;"
                                                                                x-bind:style="{
                                                                                    backgroundColor: colorPalette ?
                                                                                        colorPalette[
                                                                                            '{{ $colorType }}-' +
                                                                                            shade
                                                                                        ] : '#ffffff'
                                                                                }">
                                                                            </div>
                                                                            <span class="small" x-text="shade"></span>
                                                                        </div>
                                                                    </div>
                                                                </template>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach





                                            {{-- No hidden fields for CSS variables anymore --}}
                                        </div>

                                        <div class="text-center">
                                            <button type="submit" class="col-5 btn btn-primary mt-3 mb-0">
                                                حفظ</button>
                                            <button class="col-5 btn btn-secondary mt-3 mb-0" type="button"
                                                onclick="history.back()"> رجوع</button>
                                        </div>
                                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection




@section('js')
    @include('admin.helper.formscripts')
    @include('vue')

    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script>
        // Color utility functions (shared across all color components)
        const ColorUtils = {
            // Check if the color is valid
            isValidColor(color) {
                const temp = document.createElement('div');
                temp.style.color = color;
                return temp.style.color !== '';
            },

            // Convert color to hex
            colorToHex(color) {
                if (!color) return '#000000';

                color = color.toLowerCase().replace(/\s/g, '');

                // Handle RGB format
                let rgbMatch = color.match(/^rgb\((\d+),(\d+),(\d+)\)$/);
                if (rgbMatch) {
                    const [_, r, g, b] = rgbMatch;
                    return '#' + [r, g, b].map(x => {
                        const hex = parseInt(x).toString(16);
                        return hex.length === 1 ? '0' + hex : hex;
                    }).join('');
                }

                // Handle RGBA format
                let rgbaMatch = color.match(/^rgba\((\d+),(\d+),(\d+),([\d.]+)\)$/);
                if (rgbaMatch) {
                    const [_, r, g, b] = rgbaMatch;
                    return '#' + [r, g, b].map(x => {
                        const hex = parseInt(x).toString(16);
                        return hex.length === 1 ? '0' + hex : hex;
                    }).join('');
                }

                // Handle HSL format
                let hslMatch = color.match(/^hsl\((\d+),(\d+)%,(\d+)%\)$/);
                if (hslMatch) {
                    const [_, h, s, l] = hslMatch.map(Number);
                    return this.hslToHex(h, s, l);
                }

                // Handle HSLA format
                let hslaMatch = color.match(/^hsla\((\d+),(\d+)%,(\d+)%,([\d.]+)\)$/);
                if (hslaMatch) {
                    const [_, h, s, l] = hslaMatch.map(Number);
                    return this.hslToHex(h, s, l);
                }

                // If it's already a hex color or another valid color format, return as is
                return color;
            },

            // Convert HSL to hex
            hslToHex(h, s, l) {
                l /= 100;
                const a = s * Math.min(l, 1 - l) / 100;
                const f = n => {
                    const k = (n + h / 30) % 12;
                    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
                    return Math.round(255 * color).toString(16).padStart(2, '0');
                };
                return `#${f(0)}${f(8)}${f(4)}`;
            },

            // Convert hex to RGB
            hexToRgb(hex) {
                // Remove # if present
                hex = hex.replace(/^#/, '');

                // Parse r, g, b values
                let r = parseInt(hex.substring(0, 2), 16);
                let g = parseInt(hex.substring(2, 4), 16);
                let b = parseInt(hex.substring(4, 6), 16);

                return {
                    r,
                    g,
                    b
                };
            },

            // Convert RGB to CSS string
            rgbToString(rgb) {
                return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
            },

            // Generate color palette from base color
            generateColorVariations(baseHex, colorType) {
                const colors = {};

                // Function for more nuanced color adjustments
                const adjustColorHSL = (hex, saturationAdjust, lightnessAdjust) => {
                    // Convert hex to RGB
                    const rgb = this.hexToRgb(hex);

                    // Convert RGB to HSL
                    const r = rgb.r / 255;
                    const g = rgb.g / 255;
                    const b = rgb.b / 255;

                    const max = Math.max(r, g, b);
                    const min = Math.min(r, g, b);
                    let h, s, l = (max + min) / 2;

                    if (max === min) {
                        h = s = 0; // achromatic
                    } else {
                        const d = max - min;
                        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);

                        switch (max) {
                            case r:
                                h = (g - b) / d + (g < b ? 6 : 0);
                                break;
                            case g:
                                h = (b - r) / d + 2;
                                break;
                            case b:
                                h = (r - g) / d + 4;
                                break;
                        }

                        h /= 6;
                    }

                    // Adjust saturation and lightness
                    s = Math.max(0, Math.min(1, s + saturationAdjust));
                    l = Math.max(0, Math.min(1, l + lightnessAdjust));

                    // Convert back to RGB
                    let r1, g1, b1;

                    if (s === 0) {
                        r1 = g1 = b1 = l;
                    } else {
                        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                        const p = 2 * l - q;

                        const hueToRgb = (p, q, t) => {
                            if (t < 0) t += 1;
                            if (t > 1) t -= 1;
                            if (t < 1 / 6) return p + (q - p) * 6 * t;
                            if (t < 1 / 2) return q;
                            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
                            return p;
                        };

                        r1 = hueToRgb(p, q, h + 1 / 3);
                        g1 = hueToRgb(p, q, h);
                        b1 = hueToRgb(p, q, h - 1 / 3);
                    }

                    // Convert to hex
                    const toHex = x => {
                        const hex = Math.round(x * 255).toString(16);
                        return hex.length === 1 ? '0' + hex : hex;
                    };

                    return `#${toHex(r1)}${toHex(g1)}${toHex(b1)}`;
                };

                // Generate all color variations
                colors[`${colorType}-500`] = baseHex; // Base color
                const rgbBase = this.hexToRgb(baseHex);
                colors[`${colorType}-500-rgb`] = this.rgbToString(rgbBase);

                // Lighter variations
                colors[`${colorType}-50`] = adjustColorHSL(baseHex, -0.1, 0.4);
                colors[`${colorType}-50-rgb`] = this.rgbToString(this.hexToRgb(colors[`${colorType}-50`]));

                colors[`${colorType}-100`] = adjustColorHSL(baseHex, -0.05, 0.35);
                colors[`${colorType}-100-rgb`] = this.rgbToString(this.hexToRgb(colors[`${colorType}-100`]));

                colors[`${colorType}-200`] = adjustColorHSL(baseHex, 0, 0.25);
                colors[`${colorType}-200-rgb`] = this.rgbToString(this.hexToRgb(colors[`${colorType}-200`]));

                colors[`${colorType}-300`] = adjustColorHSL(baseHex, 0, 0.15);
                colors[`${colorType}-300-rgb`] = this.rgbToString(this.hexToRgb(colors[`${colorType}-300`]));

                colors[`${colorType}-400`] = adjustColorHSL(baseHex, 0, 0.05);
                colors[`${colorType}-400-rgb`] = this.rgbToString(this.hexToRgb(colors[`${colorType}-400`]));

                // Darker variations
                colors[`${colorType}-600`] = adjustColorHSL(baseHex, 0.05, -0.05);
                colors[`${colorType}-600-rgb`] = this.rgbToString(this.hexToRgb(colors[`${colorType}-600`]));

                colors[`${colorType}-700`] = adjustColorHSL(baseHex, 0.05, -0.15);
                colors[`${colorType}-700-rgb`] = this.rgbToString(this.hexToRgb(colors[`${colorType}-700`]));

                colors[`${colorType}-800`] = adjustColorHSL(baseHex, 0.05, -0.25);
                colors[`${colorType}-800-rgb`] = this.rgbToString(this.hexToRgb(colors[`${colorType}-800`]));

                colors[`${colorType}-900`] = adjustColorHSL(baseHex, 0, -0.35);
                colors[`${colorType}-900-rgb`] = this.rgbToString(this.hexToRgb(colors[`${colorType}-900`]));

                colors[`${colorType}-950`] = adjustColorHSL(baseHex, 0, -0.4);
                colors[`${colorType}-950-rgb`] = this.rgbToString(this.hexToRgb(colors[`${colorType}-950`]));

                // Extra light and dark
                colors[`${colorType}-light`] = adjustColorHSL(baseHex, -0.2, 0.45);
                colors[`${colorType}-light-rgb`] = this.rgbToString(this.hexToRgb(colors[`${colorType}-light`]));

                colors[`${colorType}-dark`] = adjustColorHSL(baseHex, 0, -0.48);
                colors[`${colorType}-dark-rgb`] = this.rgbToString(this.hexToRgb(colors[`${colorType}-dark`]));

                return colors;
            }
        };

        // Factory function to create color picker components
        function createColorPicker(colorType, defaultColor, generatePalette = true) {
            return {
                // Options
                defaultColor: defaultColor,
                colorType: colorType,
                generatePalette: generatePalette,

                // Helpers
                color: null,
                textInput: null,
                message: null,
                colorPalette: null,

                // Initialization
                init() {
                    // Convert initial color and set both inputs
                    const convertedColor = ColorUtils.colorToHex(this.defaultColor);

                    this.color = convertedColor;
                    this.textInput = convertedColor;

                    // Generate initial color palette if needed
                    if (this.generatePalette) {
                        this.generateColorPalette(convertedColor);
                    }

                    // Watch for changes in the text input and update the color
                    this.$watch('textInput', value => {
                        if (ColorUtils.isValidColor(value)) {
                            const hexColor = ColorUtils.colorToHex(value);
                            this.color = hexColor;
                            if (this.generatePalette) {
                                this.generateColorPalette(hexColor);
                            }
                            this.message = null;
                        } else {
                            this.message = 'Invalid color!';
                        }
                    });

                    // Watch for changes in the color input and update the text input
                    this.$watch('color', value => {
                        this.textInput = value;
                        if (this.generatePalette) {
                            this.generateColorPalette(value);
                        }
                    });
                },

                // Generate the palette
                generateColorPalette(baseColor) {
                    this.colorPalette = ColorUtils.generateColorVariations(baseColor, this.colorType);
                }
            };
        }

        // Alpine.js data initialization
        document.addEventListener('alpine:init', () => {
            @foreach ($colorTypes as $colorType => $labels)
                // {{ ucfirst($colorType) }} Color Component
                Alpine.data('{{ $colorType }}_color', () => createColorPicker(
                    '{{ $colorType }}',
                    @if (isset($data[$labels['name']]) && !is_null($data[$labels['name']]))
                        '{{ $data[$labels['name']] }}'
                    @elseif (isset($labels['fallback']) && !is_null($labels['fallback']))
                        '{{ $labels['fallback'] }}'
                    @else
                        ''
                    @endif ,
                    {{ isset($labels['previewTitle']) ? 'true' : 'false' }} // Generate palette based on preview availability
                ));
            @endforeach
        })
    </script>
    <script>
        $(function() {
            $('#settings').on('submit', function(e) {
                e.preventDefault();
                let formData = new FormData(document.getElementById('settings'));
                adawe(`{{ route('admin.settings.updateTheme') }}`, formData);
            });
        });
    </script>
@endsection