@extends('layouts.app')
@section('title', isset($securityBenefitService) && isset($readonly) && $readonly ? __('labels.view_case_study') : (isset($securityBenefitService) ? __('labels.edit_case_study') : __('labels.create_case_study')))
@push('pageTitle')
    {{ __('labels.security_benefit_services') }}
@endpush

@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <style>
        .image-preview-container {
            border: 2px dashed #dee2e6;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            background-color: #f8f9fa;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .image-preview {
            max-width: 100%;
            max-height: 300px;
            border-radius: 6px;
        }
        .statistics-container {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .statistic-item {
            background-color: white;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .tag-badge {
            background-color: #e9ecef;
            color: #495057;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            margin-right: 5px;
            margin-bottom: 5px;
            display: inline-block;
        }
        .tag-remove {
            cursor: pointer;
            margin-left: 5px;
            color: #dc3545;
        }
        .form-section {
            background-color: white;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .section-title {
            color: #0d6efd;
            border-bottom: 2px solid #0d6efd;
            padding-bottom: 10px;
            margin-bottom: 20px;
            font-weight: 600;
        }
        .note-editor {
            border: 1px solid #dee2e6 !important;
            border-radius: 6px !important;
            overflow: hidden;
        }
        .note-editor .note-toolbar {
            background-color: #f8f9fa !important;
            border-bottom: 1px solid #dee2e6 !important;
        }
        /* Fix for image display */
        .d-block {
            display: block !important;
        }
        .d-none {
            display: none !important;
        }
    </style>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize Summernote
            // $('#description').summernote({
            //     height: 300,
            //     toolbar: [
            //         ['style', ['bold', 'italic', 'underline', 'clear']],
            //         ['font', ['strikethrough', 'superscript', 'subscript']],
            //         ['fontsize', ['fontsize']],
            //         ['color', ['color']],
            //         ['para', ['ul', 'ol', 'paragraph']],
            //         ['height', ['height']],
            //         ['insert', ['link', 'picture', 'video']],
            //         ['view', ['fullscreen', 'codeview', 'help']]
            //     ],
            //     placeholder: 'Write detailed case study description here...'
            // });

            $('#description').val($('#description').summernote('code'));

            // Initialize Select2 for tags
            $('#tags_select').select2({
                tags: true,
                tokenSeparators: [',', ' '],
                placeholder: "{{  __('labels.add_tags_instruction') }}",
                allowClear: true
            });

            // Handle existing tags - prioritize old() values over database values
            const oldTags = @json(old('tags', []));
            const dbTags = @json(isset($securityBenefitService) && !empty($securityBenefitService->tags) ? $securityBenefitService->tags : []);
            const existingTags = oldTags.length > 0 ? oldTags : dbTags;
            
            existingTags.forEach(tag => {
                if (tag && !$('#tags_select option[value="' + tag + '"]').length) {
                    $('#tags_select').append(new Option(tag, tag, true, true));
                }
            });
            $('#tags_select').trigger('change');

            // Statistics management
            let statisticCounter = 0;
            
            function addStatistic(value = '', label = '', icon = '') {
                const id = statisticCounter++;
                const html = `
                    <div class="statistic-item" data-id="${id}">
                        <div class="row">
                            <div class="col-md-4">
                                <label class="form-label">Value</label>
                                <input type="text" class="form-control" 
                                       name="statistics[${id}][value]" 
                                       value="${value}" 
                                       placeholder="e.g., 240%"
                                       {{ isset($readonly) && $readonly ? 'readonly' : '' }}>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Label</label>
                                <input type="text" class="form-control" 
                                       name="statistics[${id}][label]" 
                                       value="${label}" 
                                       placeholder="e.g., Increase in Sales"
                                       {{ isset($readonly) && $readonly ? 'readonly' : '' }}>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Icon</label>
                                <input type="text" class="form-control" 
                                       name="statistics[${id}][icon]" 
                                       value="${icon}" 
                                       placeholder="fas fa-chart-line"
                                       {{ isset($readonly) && $readonly ? 'readonly' : '' }}>
                                <small class="text-muted">{{  __('labels.font_awesome_class') }}</small>
                            </div>
                        </div>
                        @if(!isset($readonly) || !$readonly)
                        <button type="button" class="btn btn-sm btn-danger mt-2 remove-statistic" 
                                onclick="removeStatistic(${id})">
                            <i class="fas fa-trash"></i> Remove
                        </button>
                        @endif
                    </div>
                `;
                $('#statisticsContainer').append(html);
            }

            // Initialize statistics - prioritize old() values over database values
            const oldStats = @json(old('statistics', []));
            const dbStats = @json(isset($securityBenefitService) && !empty($securityBenefitService->statistics) ? $securityBenefitService->statistics : []);
            const existingStats = oldStats.length > 0 ? oldStats : dbStats;
            
            existingStats.forEach(stat => {
                if (stat) {
                    addStatistic(stat.value || '', stat.label || '', stat.icon || '');
                }
            });

            // Add new statistic button
            $('#addStatistic').click(function() {
                addStatistic();
            });

            // Slug generation
            // $('#title').on('blur', function() {
            //     if (!$('#slug').val()) {
            //         generateSlug();
            //     }
            // });

            // $('#generateSlug').click(function() {
            //     generateSlug();
            // });

            // function generateSlug() {
            //     const title = $('#title').val();
            //     if (title) {
            //         const slug = title.toLowerCase()
            //             .replace(/[^\w\s-]/g, '')
            //             .replace(/[\s_-]+/g, '-')
            //             .replace(/^-+|-+$/g, '');
            //         $('#slug').val(slug);
            //     }
            // }

            // Initialize sortable for statistics
            const statisticsContainer = document.getElementById('statisticsContainer');
            if (statisticsContainer) {
                new Sortable(statisticsContainer, {
                    animation: 150,
                    handle: '.statistic-item',
                    onEnd: function() {
                        // Reindex statistics
                        $('#statisticsContainer .statistic-item').each(function(index) {
                            const id = $(this).data('id');
                            $(this).find('input').each(function() {
                                const name = $(this).attr('name');
                                if (name) {
                                    const newName = name.replace(/\[\d+\]/, `[${id}]`);
                                    $(this).attr('name', newName);
                                }
                            });
                        });
                    }
                });
            }

            // Image preview
            function readURL(input) {
                if (input.files && input.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#imagePreview').attr('src', e.target.result).removeClass('d-none').addClass('d-block');
                        $('#imagePreviewPlaceholder').removeClass('d-block').addClass('d-none');
                        $('.image-preview-container').css('background-color', 'transparent');
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }

            $('#imageUpload').change(function() {
                readURL(this);
            });

            $('.remove-image').on('click', function() {
                $('#imageUpload').val('');
                $('#imagePreview').removeClass('d-block').addClass('d-none').attr('src', '');
                $('#imagePreviewPlaceholder').removeClass('d-none').addClass('d-block');
                $('.image-preview-container').css('background-color', '#f8f9fa');
                
                // Also add a hidden input to indicate image removal
                if (!$('input[name="remove_image"]').length) {
                    $('<input>').attr({
                        type: 'hidden',
                        name: 'remove_image',
                        value: '1'
                    }).appendTo('form');
                }
            });

            // Form validation
            $('form').submit(function(e) {
                // Make sure all required fields are filled
                if (!$('#title').val() || !$('#description').val()) {
                    e.preventDefault();
                    alert('Please fill in all required fields.');
                    return false;
                }
            });
        });

        function removeStatistic(id) {
            $(`.statistic-item[data-id="${id}"]`).remove();
        }
    </script>
@endsection

@section('content')
    @include('components.common.page-header', [
        'pageTitle' => isset($securityBenefitService) && isset($readonly) && $readonly
            ? __('labels.view_security_benefit_service')
            : (isset($securityBenefitService) ? __('labels.edit_security_benefit_service') : __('labels.create_security_benefit_service')),
        'actionButton' => [
            'url' => route('security-benefit-services.index'),
            'text' => __('labels.back_to_list'),
        ],
    ])

    @include('components.common.flush-message')
    @include('components.common.validation-errors')

    @php
        // Define variables at the top for cleaner code
        // Priority: old() values > database values > defaults
        $hasImage = isset($securityBenefitService) && !empty($securityBenefitService->feature_image_url);
        $oldImage = old('feature_image', $hasImage ? $securityBenefitService->feature_image_url : '');
        $imageUrl = !empty($oldImage) ? $oldImage : ($hasImage ? $securityBenefitService->feature_image_url : '');
        $title = old('title', isset($securityBenefitService) ? $securityBenefitService->title : '');
        $introduction = old('introduction', isset($securityBenefitService) ? $securityBenefitService->introduction : '');
        $description = old('description', isset($securityBenefitService) ? $securityBenefitService->description : '');
        $sortOrder = old('sort_order', isset($securityBenefitService) ? $securityBenefitService->sort_order : 0);
        $isActive = old('is_active', isset($securityBenefitService) ? $securityBenefitService->is_active : true);
        $isFeatured = old('is_featured', isset($securityBenefitService) ? $securityBenefitService->is_featured : false);
        $securityBenefitServiceId = isset($securityBenefitService) ? $securityBenefitService->id : '';
        
        // Determine if we should show image preview
        $showImage = !empty($imageUrl);
    @endphp

    <form 
        @if(!isset($readonly) || (isset($readonly) && !$readonly))
           action="{{ isset($securityBenefitService) ? route('security-benefit-services.update', $securityBenefitService->id) : route('security-benefit-services.store') }}"         
           method="POST"
           enctype="multipart/form-data"
        @endif
        autocomplete="off"
        id="caseStudyForm"
        >
        @csrf
        @if(isset($securityBenefitService))
            @method('PUT')
        @endif
        <input type="hidden" name="id" value="{{ $securityBenefitServiceId }}" />

        <!-- Basic Information Section -->
        <div class="form-section">
            <h4 class="section-title">{{ __('labels.basic_information') }}</h4>
            
            <div class="row mb-4">
                <div class="col-md-12">
                    <label class="form-label text-primary">{{ __('labels.featured_image') }}</label>
                    <div class="image-preview-container">
                        <!-- Placeholder - show when NO image -->
                        <div id="imagePreviewPlaceholder" class="{{ $showImage ? 'd-none' : 'd-block' }}">
                            <i class="fas fa-image fa-3x text-muted mb-3"></i>
                            <p class="text-muted">{{ __('labels.upload_image') }}</p>
                        </div>
                        
                        <!-- Image Preview - show when image exists -->
                        <img id="imagePreview" 
                             src="{{ $imageUrl }}" 
                             alt="Image Preview" 
                             class="image-preview {{ $showImage ? 'd-block' : 'd-none' }}">
                    </div>
                    
                    @if(!(isset($readonly) && $readonly))
                    <div class="d-flex gap-2 mt-3">
                        <input type="file" name="feature_image" class="form-control d-none" id="imageUpload" accept=".png,.jpg,.jpeg,.gif,.webp">
                        <button type="button" class="btn btn-primary btn-sm" onclick="$('#imageUpload').click()">
                            <i class="fas fa-upload me-1"></i> {{ __('labels.choose_image') }}
                        </button>
                        
                        @if($showImage)
                        <button type="button" class="btn btn-danger btn-sm remove-image">
                            <i class="fas fa-trash me-1"></i> {{ __('labels.remove_image') }}
                        </button>
                        @endif
                    </div>
                    <small class="text-muted">{{ __('labels.image_recommended_size') }}: 1200x800px, Max: 1MB</small>
                    @endif
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <label for="title" class="form-label">{{ __('labels.title') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('title') is-invalid @enderror" id="title"
                               name="title" {{ isset($readonly) && $readonly ? 'readonly' : '' }} 
                               value="{{ $title }}" 
                               placeholder="Enter case study title">
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                {{-- <div class="col-md-6">
                    <div class="mb-3">
                        <label for="tags_select" class="form-label">{{ __('labels.tags') }}</label>
                        <select class="form-control @error('tags') is-invalid @enderror" 
                                id="tags_select" name="tags[]" 
                                multiple="multiple" 
                                {{ isset($readonly) && $readonly ? 'disabled' : '' }}>
                        </select>
                        <small class="text-muted">{{ __('labels.tags_description') }}</small>
                        @error('tags')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div> --}}

            </div>


            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <label for="introduction" class="form-label">{{ __('labels.introduction') }} <span class="text-danger">*</span></label>
                        <textarea class="form-control @error('introduction') is-invalid @enderror" 
                                  id="introduction" name="introduction" 
                                  rows="3" {{ isset($readonly) && $readonly ? 'readonly' : '' }}
                                  placeholder="Brief introduction (will be shown in listings)">{{ $introduction }}</textarea>
                        {{-- <small class="text-muted">{{ __('labels.introduction') }}</small> --}}
                        @error('introduction')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <label for="description" class="form-label">{{ __('labels.description') }}</label>
                        <textarea class="form-control @error('description') is-invalid @enderror" 
                                  id="description" name="description" 
                                  {{ isset($readonly) && $readonly ? 'disabled' : '' }}>{!! old('description', $securityBenefitService->description ?? '') !!}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="sort_order" class="form-label">{{ __('labels.sort_order') }}</label>
                        <input type="number" class="form-control @error('sort_order') is-invalid @enderror" 
                               id="sort_order" name="sort_order" 
                               value="{{ old('sort_order', $securityBenefitService->sort_order ?? ($orderNumber ?? '1')) }}" min="0" step="1"
                               {{ isset($readonly) && $readonly ? 'readonly' : '' }}>
                        <small class="text-muted">{{ __('labels.lower_number_first') }}</small>
                        @error('sort_order')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">{{ __('labels.status') }}</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" role="switch" 
                                   id="is_active" name="is_active" value="1"
                                   @checked(old('is_active', $securityBenefitService->is_active ?? true))
                                   {{ isset($readonly) && $readonly ? 'disabled' : '' }}>
                            <label class="form-check-label" for="is_active">
                                {{ __('labels.active') }}
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if(!isset($readonly) || (isset($readonly) && !$readonly))
            <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-1"></i> {{ isset($securityBenefitService) ? __('labels.update') : __('labels.save') }}
                </button>
                <a href="{{ route('security-benefit-services.index') }}" class="btn btn-secondary">
                    <i class="fas fa-times me-1"></i> {{ __('labels.cancel') }}
                </a>
            </div>
        @else
            <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                <a href="{{ route('security-benefit-services.edit', $securityBenefitService->id) }}" class="btn btn-warning">
                    <i class="fas fa-edit me-1"></i> {{ __('labels.edit') }}
                </a>
                <a href="{{ route('security-benefit-services.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i> {{ __('labels.back') }}
                </a>
            </div>
        @endif
    </form>
@endsection