@extends('layouts.main')

@section('title')
    {{ __('Watermark Settings') }}
@endsection

@section('page-title')
    <div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h4>{{ __('Watermark Settings') }}</h4>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <section class="section">
        {!! Form::open(['route' => 'settings.watermark-settings-store', 'data-parsley-validate', 'class' => 'create-form', 'data-success-function'=> "formSuccessFunction", 'enctype' => 'multipart/form-data']) !!}
            {{ csrf_field() }}
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="divider pt-3">
                                <h6 class="divider-text">{{ __('Watermark Configuration') }}</h6>
                            </div>

                            {{-- Enable/Disable Watermark --}}
                            <div class="form-group mt-3">
                                <label class="form-label" for="watermark_enabled">{{ __('Enable Watermark') }}</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="watermark_enabled" id="watermark_enabled" value="1"
                                           {{ ($watermarkSettings['enabled'] ?? 0) == 1 ? 'checked' : '' }}
                                           onchange="toggleWatermarkSettings(); updateEnabledLabel();">
                                    <input type="hidden" name="watermark_enabled" value="0" id="watermark_enabled_hidden">
                                    <label class="form-check-label" for="watermark_enabled" id="enabled-label">
                                        {{ ($watermarkSettings['enabled'] ?? 0) == 1 ? __('Enabled') : __('Disabled') }}
                                    </label>
                                </div>
                                <small class="text-muted">{{ __('When enabled, watermarks will be applied to uploaded images') }}</small>
                            </div>

                            {{-- Watermark Image Upload --}}
                            <div class="form-group mt-3" id="watermark-image-group">
                                <label class="form-label" for="watermark_image">{{ __('Watermark Image') }}</label>
                                <input type="file" name="watermark_image" id="watermark_image" class="form-control"
                                       accept="image/png,image/jpeg,image/jpg"
                                       onchange="previewWatermarkImage(this); updatePreview();">
                                <small class="text-muted">{{ __('Upload a custom watermark image (PNG, JPG, JPEG). If not uploaded, default logo will be used.') }}</small>
                                @if(!empty($watermarkSettings['watermark_image_url']))
                                    <div class="mt-2">
                                        <p class="text-success mb-1"><small>{{ __('Current Watermark:') }}</small></p>
                                        <img src="{{ $watermarkSettings['watermark_image_url'] }}"
                                             alt="Current Watermark"
                                             style="max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;"
                                             id="current-watermark-preview">
                                    </div>
                                @else
                                    <div class="mt-2">
                                        <p class="text-info mb-1"><small>{{ __('Using default logo: Company Logo') }}</small></p>
                                    </div>
                                @endif
                                <div id="new-watermark-preview" class="mt-2" style="display: none;">
                                    <p class="text-success mb-1"><small>{{ __('New Watermark Preview:') }}</small></p>
                                    <img id="new-watermark-preview-img" src="" alt="New Watermark"
                                         style="max-width: 150px; max-height: 150px; border: 1px solid #ddd; padding: 5px; border-radius: 4px;">
                                </div>
                            </div>

                            {{-- Opacity --}}
                            <div class="form-group mt-3" id="watermark-settings-group">
                                <label class="form-label" for="opacity">{{ __('Opacity') }} (<span id="opacity-value">{{ $watermarkSettings['opacity'] ?? 25 }}</span>%)</label>
                                <input type="range" name="opacity" id="opacity" class="form-range" min="0" max="100"
                                       value="{{ $watermarkSettings['opacity'] ?? 25 }}"
                                       data-parsley-required="true"
                                       oninput="updatePreview(); document.getElementById('opacity-value').textContent = this.value;">
                                <div class="d-flex justify-content-between">
                                    <small>0%</small>
                                    <small>100%</small>
                                </div>
                            </div>

                            {{-- Size --}}
                            <div class="form-group mt-3">
                                <label class="form-label" for="size">{{ __('Size') }} (<span id="size-value">{{ $watermarkSettings['size'] ?? 10 }}</span>%)</label>
                                <input type="range" name="size" id="size" class="form-range" min="1" max="100"
                                       value="{{ $watermarkSettings['size'] ?? 10 }}"
                                       data-parsley-required="true"
                                       oninput="updatePreview(); document.getElementById('size-value').textContent = this.value;">
                                <div class="d-flex justify-content-between">
                                    <small>1%</small>
                                    <small>100%</small>
                                </div>
                            </div>

                            {{-- Style --}}
                            <div class="form-group mt-3">
                                <label class="form-label" for="style">{{ __('Style') }}</label>
                                <select name="style" id="style" class="form-select" data-parsley-required="true" onchange="updatePreview(); togglePositionField();">
                                    <option value="tile" {{ ($watermarkSettings['style'] ?? 'tile') == 'tile' ? 'selected' : '' }}>{{ __('Tile (Repeat Pattern)') }}</option>
                                    <option value="single" {{ ($watermarkSettings['style'] ?? 'tile') == 'single' ? 'selected' : '' }}>{{ __('Single Watermark') }}</option>
                                    <option value="center" {{ ($watermarkSettings['style'] ?? 'tile') == 'center' ? 'selected' : '' }}>{{ __('Center Only') }}</option>
                                </select>
                            </div>

                            {{-- Position --}}
                            <div class="form-group mt-3" id="position-group">
                                <label class="form-label" for="position">{{ __('Position') }}</label>
                                <select name="position" id="position" class="form-select" data-parsley-required="false" onchange="updatePreview();">
                                    <option value="top-left" {{ ($watermarkSettings['position'] ?? 'center') == 'top-left' ? 'selected' : '' }}>{{ __('Top Left') }}</option>
                                    <option value="top-right" {{ ($watermarkSettings['position'] ?? 'center') == 'top-right' ? 'selected' : '' }}>{{ __('Top Right') }}</option>
                                    <option value="bottom-left" {{ ($watermarkSettings['position'] ?? 'center') == 'bottom-left' ? 'selected' : '' }}>{{ __('Bottom Left') }}</option>
                                    <option value="bottom-right" {{ ($watermarkSettings['position'] ?? 'center') == 'bottom-right' ? 'selected' : '' }}>{{ __('Bottom Right') }}</option>
                                    <option value="center" {{ ($watermarkSettings['position'] ?? 'center') == 'center' ? 'selected' : '' }}>{{ __('Center') }}</option>
                                </select>
                                <small class="text-muted" id="position-note" style="display: none;">{{ __('Position is automatically set to center for this style') }}</small>
                                {{-- Hidden input for position when style is 'tile' --}}
                                <input type="hidden" name="position_hidden" id="position_hidden" value="center">
                            </div>

                            {{-- Rotation --}}
                            <div class="form-group mt-3">
                                <label class="form-label" for="rotation">{{ __('Rotation') }} (<span id="rotation-value">{{ $watermarkSettings['rotation'] ?? -30 }}</span>°)</label>
                                <input type="range" name="rotation" id="rotation" class="form-range" min="-360" max="360"
                                       value="{{ $watermarkSettings['rotation'] ?? -30 }}"
                                       oninput="updatePreview(); document.getElementById('rotation-value').textContent = this.value;">
                                <div class="d-flex justify-content-between">
                                    <small>-360°</small>
                                    <small>360°</small>
                                </div>
                            </div>

                            <div class="col-12 d-flex justify-content-end mt-4">
                                <button type="submit" class="btn btn-primary me-1 mb-1">{{ __('Save Settings') }}</button>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Preview Section --}}
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="divider pt-3">
                                <h6 class="divider-text">{{ __('Preview') }}</h6>
                            </div>
                            <div class="form-group mt-3">
                                <div id="preview-container" style="position: relative; width: 100%; height: 400px; border: 2px solid #ffffff; border-radius: 8px; overflow: hidden; background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;">
                                    <div id="preview-image" style="width: 100%; height: 100%; background: linear-gradient(135deg, #eaebef 0%, #e1dfe4 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold;">
                                        {{ __('Sample Image') }}
                                    </div>
                                    <div id="watermark-preview" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10;"></div>
                                </div>
                                <p class="text-muted mt-2 text-center"><small>{{ __('This is a visual preview of how the watermark will appear') }}</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- @dd($watermarkSettings); --}}
        {!! Form::close() !!}
    </section>
@endsection

@section('script')
<script>
    const defaultWatermarkPath = "{{ asset('assets/images/logo/logo.png') }}";
    const customWatermarkPath = @if(!empty($watermarkSettings['watermark_image_url'])) "{{ $watermarkSettings['watermark_image_url'] }}" @else null @endif;
    let currentWatermarkPath = customWatermarkPath || defaultWatermarkPath;

    function previewWatermarkImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const previewDiv = document.getElementById('new-watermark-preview');
                const previewImg = document.getElementById('new-watermark-preview-img');
                previewImg.src = e.target.result;
                previewDiv.style.display = 'block';
                currentWatermarkPath = e.target.result;
                updatePreview();
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    function updateEnabledLabel() {
        const enabled = document.getElementById('watermark_enabled').checked;
        const label = document.getElementById('enabled-label');
        label.textContent = enabled ? '{{ __('Enabled') }}' : '{{ __('Disabled') }}';
    }

    function updateEnabledLabel() {
        const enabled = document.getElementById('watermark_enabled').checked;
        const label = document.getElementById('enabled-label');
        if (label) {
            label.textContent = enabled ? '{{ __('Enabled') }}' : '{{ __('Disabled') }}';
        }
    }


    function togglePositionField() {
    const style = document.getElementById('style').value;
    const positionSelect = document.getElementById('position');
    const positionGroup = document.getElementById('position-group');
    const positionNote = document.getElementById('position-note');

    if (style === 'tile') {
        // Requirement: Hide when Tile is selected
        positionGroup.style.display = 'none';
    } else if (style === 'center') {
        // Requirement: Show but Disable when Center Only is selected
        positionGroup.style.display = 'block';
        positionSelect.value = 'center'; // Force the value to center
        positionSelect.disabled = true;
        positionSelect.style.opacity = '0.6';
        positionNote.style.display = 'block';
    } else {
        // Default: Single Watermark
        positionGroup.style.display = 'block';
        positionSelect.disabled = false;
        positionSelect.style.opacity = '1';
        positionNote.style.display = 'none';
    }
}
   function toggleWatermarkSettings() {
    const enabled = document.getElementById('watermark_enabled').checked;
    const settingsGroup = document.getElementById('watermark-settings-group');
    const imageGroup = document.getElementById('watermark-image-group');
    const positionGroup = document.getElementById('position-group');
    const styleSelect = document.getElementById('style');
    const opacityInput = document.getElementById('opacity');
    const sizeInput = document.getElementById('size');
    const rotationInput = document.getElementById('rotation');
    const positionSelect = document.getElementById('position');

    if (enabled) {
        document.getElementById('watermark_enabled_hidden').value = '1';
        settingsGroup.style.opacity = '1';
        imageGroup.style.opacity = '1';
        styleSelect.disabled = false;
        opacityInput.disabled = false;
        sizeInput.disabled = false;
        rotationInput.disabled = false;
        
        // Let togglePositionField handle the position logic
        togglePositionField(); 
    } else {
        document.getElementById('watermark_enabled_hidden').value = '0';
        settingsGroup.style.opacity = '0.5';
        imageGroup.style.opacity = '0.5';
        styleSelect.disabled = true;
        opacityInput.disabled = true;
        sizeInput.disabled = true;
        rotationInput.disabled = true;
        positionSelect.disabled = true;
    }
    updatePreview();
}
    function createWatermarkElement(size, opacity, rotation) {
        const watermark = document.createElement('img');
        watermark.src = currentWatermarkPath;
        watermark.style.opacity = opacity / 100;
        watermark.style.transform = `rotate(${rotation}deg)`;
        watermark.style.width = size + 'px';
        watermark.style.height = 'auto';
        watermark.style.imageRendering = 'auto';
        watermark.style.maxWidth = size + 'px';
        watermark.style.maxHeight = size + 'px';
        watermark.onerror = function() {
            // If logo doesn't exist, create a placeholder
            const placeholder = document.createElement('div');
            placeholder.style.width = size + 'px';
            placeholder.style.height = size + 'px';
            placeholder.style.border = '2px dashed #999';
            placeholder.style.display = 'flex';
            placeholder.style.alignItems = 'center';
            placeholder.style.justifyContent = 'center';
            placeholder.style.opacity = opacity / 100;
            placeholder.style.transform = `rotate(${rotation}deg)`;
            placeholder.textContent = 'LOGO';
            placeholder.style.fontSize = Math.max(12, size / 4) + 'px';
            placeholder.style.color = '#999';
            placeholder.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
            placeholder.style.borderRadius = '4px';
            this.parentNode.replaceChild(placeholder, this);
        };
        watermark.onload = function() {
            // Ensure image maintains aspect ratio
            if (this.naturalWidth > 0 && this.naturalHeight > 0) {
                const aspectRatio = this.naturalHeight / this.naturalWidth;
                this.style.height = (size * aspectRatio) + 'px';
            }
        };
        return watermark;
    }

    function updatePreview() {
        const enabled = document.getElementById('watermark_enabled').checked;
        const previewContainer = document.getElementById('preview-container');
        const watermarkPreview = document.getElementById('watermark-preview');

        // Clear previous watermark
        watermarkPreview.innerHTML = '';

        // If watermark is disabled, don't show preview
        if (!enabled) {
            return;
        }

        const opacity = parseInt(document.getElementById('opacity').value);
        const size = parseInt(document.getElementById('size').value);
        const style = document.getElementById('style').value;
        const position = document.getElementById('position').value;
        const rotation = parseInt(document.getElementById('rotation').value);

        const containerWidth = previewContainer.offsetWidth;
        const containerHeight = previewContainer.offsetHeight;

        // Calculate watermark size
        const watermarkSize = (containerWidth * size) / 100;

        if (style === 'tile') {
            // Create tiled pattern
            const spacing = watermarkSize * 1.5;
            const yPositions = [];
            for (let y = 0; y < containerHeight; y += spacing) {
                yPositions.push(y);
            }
            // Ensure last row is at the bottom - calculate bottom margin to maintain spacing
            const lastY = yPositions[yPositions.length - 1];
            const isLastRow = (y) => y === lastY;
            // Calculate bottom margin to maintain similar spacing as top (10px from top)
            const bottomMargin = 10;

            for (let i = 0; i < yPositions.length; i++) {
                const y = yPositions[i];
                const isBottomRow = isLastRow(y);
                for (let x = 0; x < containerWidth; x += spacing) {
                    const tile = createWatermarkElement(watermarkSize, opacity, rotation);
                    tile.style.position = 'absolute';
                    tile.style.left = x + 'px';
                    if (isBottomRow) {
                        // Use bottom positioning to stick to bottom
                        tile.style.bottom = bottomMargin + 'px';
                        tile.style.top = 'auto';
                    } else {
                        tile.style.top = y + 'px';
                        tile.style.bottom = 'auto';
                    }
                    watermarkPreview.appendChild(tile);
                }
            }
        } else if (style === 'center') {
            // Center only - always use center position
            const watermark = createWatermarkElement(watermarkSize, opacity, rotation);
            watermark.style.position = 'absolute';
            const left = (containerWidth - watermarkSize) / 2;
            const top = (containerHeight - watermarkSize) / 2;
            watermark.style.left = left + 'px';
            watermark.style.top = top + 'px';
            watermarkPreview.appendChild(watermark);
        } else if (style === 'single') {
            // Single watermark - use position dropdown
            const watermark = createWatermarkElement(watermarkSize, opacity, rotation);
            watermark.style.position = 'absolute';

            // Calculate position based on dropdown
            let left = 0, top = 0, bottom = null;
            switch(position) {
                case 'top-left':
                    left = 10;
                    top = 10;
                    break;
                case 'top-right':
                    left = containerWidth - watermarkSize - 10;
                    top = 10;
                    break;
                case 'bottom-left':
                    left = 10;
                    bottom = 10;
                    break;
                case 'bottom-right':
                    left = containerWidth - watermarkSize - 10;
                    bottom = 10;
                    break;
                case 'center':
                default:
                    left = (containerWidth - watermarkSize) / 2;
                    top = (containerHeight - watermarkSize) / 2;
                    break;
            }

            watermark.style.left = left + 'px';
            if (bottom !== null) {
                watermark.style.bottom = bottom + 'px';
                watermark.style.top = 'auto';
            } else {
                watermark.style.top = top + 'px';
                watermark.style.bottom = 'auto';
            }
            watermarkPreview.appendChild(watermark);
        }
    }

    function togglePositionField() {
        const style = document.getElementById('style').value;
        const positionSelect = document.getElementById('position');
        const positionGroup = document.getElementById('position-group');
        const positionNote = document.getElementById('position-note');
        const positionHidden = document.getElementById('position_hidden');

        if (style === 'tile') {
            // Hide position group when Tile is selected
            positionGroup.style.display = 'none';
            // Set hidden input value for form submission
            if (positionHidden) {
                positionHidden.value = 'center';
            }
            // Also set the select value (even though hidden)
            positionSelect.value = 'center';
            // Remove required attribute
            positionSelect.removeAttribute('data-parsley-required');
        } else if (style === 'center') {
            // Show but disable when Center Only is selected
            positionGroup.style.display = 'block';
            positionSelect.value = 'center'; // Force the value to center
            positionSelect.disabled = true;
            positionSelect.style.opacity = '0.6';
            positionNote.style.display = 'block';
            // Set required for validation
            positionSelect.setAttribute('data-parsley-required', 'true');
        } else {
            // Default: Single Watermark - show and enable
            positionGroup.style.display = 'block';
            positionSelect.disabled = false;
            positionSelect.style.opacity = '1';
            positionNote.style.display = 'none';
            // Set required for validation
            positionSelect.setAttribute('data-parsley-required', 'true');
        }
    }

    // Initialize preview on page load
    document.addEventListener('DOMContentLoaded', function() {
        // Wait for container to be fully rendered
        setTimeout(function() {
            toggleWatermarkSettings();
            togglePositionField();
            updatePreview();
        }, 100);

        // Update preview when window is resized
        window.addEventListener('resize', function() {
            setTimeout(updatePreview, 100);
        });
    });

    function formSuccessFunction(response) {
        if(!response.error && !response.warning){
            setTimeout(() => {
                window.location.reload();
            }, 500);
        }
    }
</script>
@endsection