@extends('layouts.app')
@section('title', isset($bestPractice) && isset($readonly) && $readonly ? __('labels.view_best_practice') : (isset($bestPractice) ? __('labels.edit_best_practice') : __('labels.create_best_practice')))
@push('pageTitle')
    {{ __('labels.best_practices_testimonials') }}
@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;
        }
        .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;
        }
        .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>
        $(document).ready(function() {
            $('#description').val($('#description').summernote('code'));

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

            const oldTags = @json(old('tags', []));
            const dbTags = @json(isset($bestPractice) && !empty($bestPractice->tags) ? $bestPractice->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');

            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');

                if (!$('input[name="remove_image"]').length) {
                    $('<input>').attr({
                        type: 'hidden',
                        name: 'remove_image',
                        value: '1'
                    }).appendTo('form');
                }
            });
        });
    </script>
@endsection

@section('content')
    @include('components.common.page-header',[
        'pageTitle' => isset($bestPractice) && isset($readonly) && $readonly ? __('labels.best_practice_testimonial') : (isset($bestPractice) ? __('labels.edit_best_practice_testimonial') : __('labels.add_best_practice_testimonial')),
        'actionButton' => [
            'url' => route('best-practices.index'),
            'text' => __('labels.back_to_list')
        ]
    ])

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

    @php
        $hasImage = isset($bestPractice) && !empty($bestPractice->feature_image_url);
        $oldImage = old('feature_image', $hasImage ? $bestPractice->feature_image_url : '');
        $imageUrl = !empty($oldImage) ? $oldImage : ($hasImage ? $bestPractice->feature_image_url : '');
        $title = old('title', isset($bestPractice) ? $bestPractice->title : '');
        $introduction = old('introduction', isset($bestPractice) ? $bestPractice->introduction : '');
        $description = old('description', isset($bestPractice) ? $bestPractice->description : '');
        $sortOrder = old('sort_order', isset($bestPractice) ? $bestPractice->sort_order : 0);
        $isActive = old('is_active', isset($bestPractice) ? $bestPractice->is_active : true);
        $bestPracticeId = isset($bestPractice) ? $bestPractice->id : '';
        $showImage = !empty($imageUrl);
    @endphp

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

        <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">
                        <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>

                        <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-8">
                    <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="{{ __('labels.title') }}">
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="mb-3">
                        <label for="category_id" class="form-label">{{ __('labels.category') }} <span class="text-danger">*</span></label>
                        <select class="form-select @error('category_id') is-invalid @enderror"
                                id="category_id"
                                name="category_id"
                                {{ isset($readonly) && $readonly ? 'disabled' : '' }}>
                            <option value="">{{ __('labels.select_category') }}</option>
                            @foreach($categories as $id => $label)
                                <option value="{{ $id }}" 
                                    @selected(old('category_id', $bestPractice->category_id ?? null) == $id)>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <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="{{ __('labels.introduction') }}">{{ $introduction }}</textarea>
                        @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 ? 'readonly' : '' }}>{!! old('description', $bestPractice->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', $bestPractice->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', $bestPractice->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($bestPractice) ? __('labels.update') : __('labels.save') }}
                </button>
                <a href="{{ route('best-practices.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('best-practices.edit', $bestPractice->id) }}" class="btn btn-warning">
                    <i class="fas fa-edit me-1"></i> {{ __('labels.edit') }}
                </a>
                <a href="{{ route('best-practices.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i> {{ __('labels.back') }}
                </a>
            </div>
        @endif
    </form>
@endsection