@extends('layouts.appv2')

@section('content')
<style>
    .color-preview {
        width: 70px;
        height: 40px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }

    .preset-color {
        width: 32px;
        height: 32px;
        border-radius: 6px;
        cursor: pointer;
        border: 2px solid transparent;
    }

    .preset-color:hover {
        border-color: #000;
    }
</style>

<h1 class="mb-4 gradient-text">Edit Report Color</h1>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,.2);">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Edit Color Setting</h5>
                    <a href="{{ route('admins.reportcolors') }}" class="btn btn-sm btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back
                    </a>
                </div>

                <div class="card-body">
                    <form action="{{ route('admins.reportcolors.update', $color->id) }}" method="POST">
    @csrf


                        <!-- Color Type -->
                        <div class="mb-3">
                            <label class="form-label">Color Type</label>
                            <input type="text"
                                   class="form-control"
                                   value="{{ ucwords(str_replace('_',' ', $color->color_type)) }}"
                                   disabled>
                        </div>

                        <!-- Color Name -->
                        <div class="mb-3">
                            <label class="form-label">Color Name</label>
                            <input type="text"
                                   name="color_name"
                                   class="form-control"
                                   value="{{ old('color_name', $color->color_name) }}"
                                   required>
                        </div>

                        <!-- Pick Color -->
                        <div class="mb-3">
                            <label class="form-label">Pick Color</label>
                            <div class="d-flex align-items-center gap-3">
                                <input type="color"
                                       id="colorPicker"
                                       class="form-control form-control-color"
                                       value="#{{ substr($color->color_code, 2) }}">

                                <div id="colorPreview"
                                     class="color-preview"
                                     style="background-color:#{{ substr($color->color_code, 2) }};">
                                </div>
                            </div>
                        </div>

                        <!-- Preset Colors -->
                        <div class="mb-3">
                            <label class="form-label">Quick Presets</label>
                            <div class="d-flex gap-2 flex-wrap">
                                <div class="preset-color" style="background:#28a745" data-color="28A745"></div>
                                <div class="preset-color" style="background:#dc3545" data-color="DC3545"></div>
                                <div class="preset-color" style="background:#ffc107" data-color="FFC107"></div>
                                <div class="preset-color" style="background:#17a2b8" data-color="17A2B8"></div>
                                <div class="preset-color" style="background:#6c757d" data-color="6C757D"></div>
                                <div class="preset-color" style="background:#f8f9fa" data-color="F8F9FA"></div>
                            </div>
                            <small class="text-muted">
                                Click any preset to apply instantly
                            </small>
                        </div>

                        <!-- Excel ARGB -->
                        <div class="mb-3">
                            <label class="form-label">Excel Color Code (ARGB)</label>
                            <input type="text"
                                   name="color_code"
                                   id="colorCode"
                                   class="form-control"
                                   value="{{ $color->color_code }}"
                                   pattern="[A-Fa-f0-9]{6,8}"
                                   title="Enter 6-digit hex (RGB) or 8-digit hex (ARGB)">
                            <small class="text-muted">
                                Enter any valid hex color code (6 or 8 characters). For transparency, use 8 characters (AARRGGBB).
                            </small>
                        </div>

                        <!-- Description -->
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea name="description"
                                      class="form-control"
                                      rows="3">{{ old('description', $color->description) }}</textarea>
                        </div>

                        <!-- Status -->
                        <div class="mb-4">
                            <label class="form-label">Status</label>
                            <select name="is_active" class="form-select">
                                <option value="1" {{ $color->is_active ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ !$color->is_active ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>

                        <!-- Actions -->
                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('admins.reportcolors') }}" class="btn btn-light">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Update Color
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="alert alert-info mt-4">
                <i class="fas fa-info-circle"></i>
                Color changes will apply on the next Excel export.
            </div>
        </div>
    </div>
</div>

<script>
    const picker = document.getElementById('colorPicker');
    const preview = document.getElementById('colorPreview');
    const codeInput = document.getElementById('colorCode');

    function updateFromHex(hex) {
        const cleanHex = hex.replace('#', '').toUpperCase();
        let rgbHex = cleanHex;
        let alpha = 'FF';

        if (cleanHex.length === 8) {
            alpha = cleanHex.substring(0, 2);
            rgbHex = cleanHex.substring(2);
        } else if (cleanHex.length === 6) {
            rgbHex = cleanHex;
            alpha = 'FF';
        }

        preview.style.backgroundColor = '#' + rgbHex;
        picker.value = '#' + rgbHex;
        codeInput.value = alpha + rgbHex;
    }

    function updateFromPicker() {
        const cleanHex = picker.value.replace('#', '').toUpperCase();
        preview.style.backgroundColor = picker.value;
        codeInput.value = 'FF' + cleanHex;
    }

    picker.addEventListener('input', updateFromPicker);

    codeInput.addEventListener('input', function() {
        const value = this.value.replace('#', '').toUpperCase();
        if (/^[A-F0-9]{6,8}$/.test(value)) {
            updateFromHex(value);
        }
    });

    document.querySelectorAll('.preset-color').forEach(el => {
        el.addEventListener('click', function () {
            updateFromHex(this.dataset.color);
        });
    });
</script>
@endsection