@extends('backend.layouts.app')

@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3">
        <h1 class="h3">{{ translate('Add New Lens') }}</h1>
    </div>

    <style>
        /* Cursor pointer for uploader */
        [data-toggle="aiz-uploader"] {
            cursor: pointer !important;
        }

        .file-amount {
            cursor: pointer !important;
        }

        /* Color badge styling */
        .color-badge {
            display: inline-flex;
            align-items: center;
            padding: 8px 12px;
            margin-right: 8px;
            margin-bottom: 8px;
            border-radius: 4px;
            border: 2px solid #ddd;
            font-size: 13px;
            font-weight: 500;
        }

        .color-badge .remove-color {
            margin-left: 8px;
            background: none;
            border: none;
            color: inherit;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
            padding: 0;
            opacity: 0.7;
        }

        .color-badge .remove-color:hover {
            opacity: 1;
        }

        /* Feature checkbox styling */
        .feature-checkbox-wrapper {
            padding: 12px;
            border: 2px solid #e8e8e8;
            border-radius: 6px;
            margin-bottom: 12px;
            transition: all 0.3s ease;
            background: #f9f9f9;
        }

        .feature-checkbox-wrapper:hover {
            border-color: #d0d0d0;
            background: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .feature-checkbox-wrapper.selected {
            border-color: #4caf50;
            background: #f1f8f4;
        }

        .feature-checkbox-wrapper .aiz-checkbox {
            margin-bottom: 0;
            cursor: pointer;
        }

        .feature-checkbox-wrapper .aiz-checkbox input[type="checkbox"] {
            cursor: pointer;
        }
    </style>

    <form action="{{ route('lenses.store') }}" method="POST">
        @csrf
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0 h6">{{ translate('Lens Information') }}</h5>
                    </div>
                    <div class="card-body">
                        <!-- Name -->
                        <div class="form-group row">
                            <label class="col-md-3 col-from-label">{{ translate('Name') }}</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="name"
                                    placeholder="{{ translate('Lens Name') }}" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-3 col-from-label">{{ translate('Image') }}</label>
                            <div class="col-md-9">
                                <!-- Dhayan den: 'aizuploader' likha hai, 'aiz-uploader' nahi -->
                                <div class="input-group" data-toggle="aizuploader" data-type="image">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text bg-soft-secondary font-weight-medium">
                                            {{ translate('Browse') }}</div>
                                    </div>
                                    <div class="form-control file-amount">{{ translate('Choose File') }}</div>
                                    <input type="hidden" name="image" class="selected-files">
                                </div>
                                <div class="file-preview box sm">
                                </div>
                            </div>
                        </div>
                        <!-- Prices -->
                        <div class="form-group row">
                            <label class="col-md-3 col-from-label">{{ translate('Main Price') }}</label>
                            <div class="col-md-9">
                                <input type="number" step="0.01" class="form-control" name="main_price"
                                    placeholder="0.00" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-3 col-from-label">{{ translate('Discounted Price') }}</label>
                            <div class="col-md-9">
                                <input type="number" step="0.01" class="form-control" name="discounted_price"
                                    placeholder="0.00">
                            </div>
                        </div>

                        <!-- Color & Order -->
                        <div class="form-group row">
                            <label class="col-md-3 col-from-label">{{ translate('Colors') }}</label>
                            <div class="col-md-9">
                                <div class="d-flex align-items-center mb-2">
                                    <input type="color" id="colorPicker" class="form-control"
                                        style="width: 100px; height: 40px; padding: 2px;">
                                    <button type="button" id="addColorBtn" class="btn btn-sm btn-primary ml-2">
                                        <i class="las la-plus"></i> {{ translate('Add Color') }}
                                    </button>
                                </div>
                                <div id="selectedColors" class="d-flex flex-wrap gap-2"></div>
                                <input type="hidden" name="color" id="colorInput">
                                <small
                                    class="text-muted">{{ translate('Click "Add Color" to add multiple colors') }}</small>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-3 col-from-label">{{ translate('Sort Order') }}</label>
                            <div class="col-md-9">
                                <input type="number" class="form-control" name="sort_order"
                                    value="{{ \App\Models\Lens::max('sort_order') + 1 }}">
                                <small
                                    class="text-muted">{{ translate('Lower numbers appear first. Leave blank for auto-assignment.') }}</small>
                            </div>
                        </div>

                        <!-- Short Description -->
                        <div class="form-group row">
                            <label class="col-md-3 col-from-label">{{ translate('Short Description') }}</label>
                            <div class="col-md-9">
                                <textarea name="description" rows="5" class="form-control"></textarea>
                            </div>
                        </div>

                        <!-- Default Selected Checkbox -->
                        <div class="form-group row">
                            <label class="col-md-3 col-from-label">{{ translate('Default Selected?') }}</label>
                            <div class="col-md-9">
                                <label class="aiz-switch aiz-switch-success mb-0">
                                    <input type="checkbox" name="is_default" value="1">
                                    <span></span>
                                </label>
                            </div>
                        </div>

                        <hr>
                        <h5 class="mb-3 h6">
                            {{ translate('Select Lens Features') }}
                            <span class="badge badge-info badge-inline ml-2" id="featureCount">0 selected</span>
                        </h5>
                        <!-- Features Checkboxes -->
                        <div class="row">
                            @foreach ($features as $feature)
                                <div class="col-md-6">
                                    <div class="feature-checkbox-wrapper">
                                        <label class="aiz-checkbox">
                                            <input type="checkbox" name="features[]" value="{{ $feature->id }}"
                                                class="feature-checkbox">
                                            <span
                                                style="font-weight: 500; font-size: 14px;">{{ translate($feature->name) }}</span>
                                            <span class="aiz-checkbox-outline"></span>
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="form-group mb-0 text-right">
                            <button type="button" onclick="window.location='{{ route('lenses.index') }}'"
                                class="btn btn-secondary">{{ translate('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ translate('Save Lens') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            // Initialize uploader
            if (typeof AIZ !== 'undefined' && AIZ.plugins && AIZ.plugins.aizUploader) {
                AIZ.plugins.aizUploader();
            }

            // Color picker functionality
            let selectedColors = [];

            // Add color button click handler
            $('#addColorBtn').off('click').on('click', function(e) {
                e.preventDefault();
                const color = $('#colorPicker').val();

                console.log('Adding color:', color);

                // Check if color is already added
                if (!selectedColors.includes(color)) {
                    selectedColors.push(color);
                    updateColorDisplay();
                    updateColorInput();
                } else {
                    alert('This color is already added!');
                }
            });

            // Update color display
            function updateColorDisplay() {
                const container = $('#selectedColors');
                container.empty();

                if (selectedColors.length === 0) {
                    container.html('<small class="text-muted">No colors selected yet</small>');
                    return;
                }

                selectedColors.forEach(function(color, index) {
                    const textColor = getContrastColor(color);

                    const badge = $('<div>')
                        .addClass('color-badge')
                        .css({
                            'background-color': color,
                            'color': textColor
                        });

                    const colorText = $('<span>').text(color.toUpperCase());

                    const removeBtn = $('<button>')
                        .attr('type', 'button')
                        .addClass('remove-color')
                        .html('&times;')
                        .on('click', function(e) {
                            e.preventDefault();
                            selectedColors.splice(index, 1);
                            updateColorDisplay();
                            updateColorInput();
                        });

                    badge.append(colorText).append(removeBtn);
                    container.append(badge);
                });
            }

            // Update hidden input with colors
            function updateColorInput() {
                $('#colorInput').val(selectedColors.join(','));
                console.log('Updated colors:', selectedColors.join(','));
            }

            // Get contrast color for text
            function getContrastColor(hexColor) {
                const color = hexColor.replace('#', '');
                const r = parseInt(color.substr(0, 2), 16);
                const g = parseInt(color.substr(2, 2), 16);
                const b = parseInt(color.substr(4, 2), 16);
                const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
                return luminance > 0.5 ? '#000000' : '#ffffff';
            }

            // Initialize color display
            updateColorDisplay();

            // Feature checkbox functionality
            function updateFeatureCount() {
                const count = $('.feature-checkbox:checked').length;
                $('#featureCount').text(count + ' selected');
            }

            // Feature checkbox change handler
            $('.feature-checkbox').on('change', function() {
                const wrapper = $(this).closest('.feature-checkbox-wrapper');
                if ($(this).is(':checked')) {
                    wrapper.addClass('selected');
                } else {
                    wrapper.removeClass('selected');
                }
                updateFeatureCount();
            });

            // Make entire wrapper clickable
            $('.feature-checkbox-wrapper').on('click', function(e) {
                if (e.target.type !== 'checkbox') {
                    const checkbox = $(this).find('.feature-checkbox');
                    checkbox.prop('checked', !checkbox.prop('checked')).trigger('change');
                }
            });

            // Initialize feature count
            updateFeatureCount();
        });
    </script>
@endsection