@extends('layouts.app')
@section('title', isset($practicalExample) && isset($readonly) && $readonly ? __('labels.view_practical_example') : (isset($practicalExample) ? __('labels.edit_practical_example') : __('labels.create_practical_example')))
@push('pageTitle')
    {{ __('labels.practical_examples') }}
@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($practicalExample) && !empty($practicalExample->tags) ? $practicalExample->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($practicalExample) && isset($readonly) && $readonly ? __('labels.practical_example') : (isset($practicalExample) ? __('labels.edit_practical_example') : __('labels.add_practical_example')),
        'actionButton' => [
            'url' => route('practical-examples.index'),
            'text' => __('labels.back_to_list')
        ]
    ])

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

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

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

        <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', $practicalExample->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', $practicalExample->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', $practicalExample->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', $practicalExample->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($practicalExample) ? __('labels.update') : __('labels.save') }}
                </button>
                <a href="{{ route('practical-examples.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('practical-examples.edit', $practicalExample->id) }}" class="btn btn-warning">
                    <i class="fas fa-edit me-1"></i> {{ __('labels.edit') }}
                </a>
                <a href="{{ route('practical-examples.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i> {{ __('labels.back') }}
                </a>
            </div>
        @endif
    </form>
@endsection