@php
    $edit = !is_null($dataTypeContent->getKey());
    $add  = is_null($dataTypeContent->getKey());
    $errors = $errors ?? new \Illuminate\Support\ViewErrorBag();
    $currentIcon = (string) ($dataTypeContent->icon ?? '');
    $isImg = $dataTypeContent->is_image_icon ?? false;
    $iconUrl = $dataTypeContent->icon_url ?? null;
    $faClass = $dataTypeContent->fa_class ?? 'fas fa-leaf';
    $citations = is_array($dataTypeContent->citations) ? $dataTypeContent->citations : [];
@endphp

@extends('voyager::master')

@section('page_title', __('voyager::generic.'.($edit ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular'))

@section('css')
    <style>
        .project-icons-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 15px;
            max-height: 420px;
            overflow-y: auto;
            padding: 10px;
        }
        .project-icon-item {
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            padding: 14px 8px;
            text-align: center;
            cursor: pointer;
            background: #fff;
            transition: all 0.2s ease;
        }
        .project-icon-item:hover {
            border-color: #22a7f0;
            box-shadow: 0 4px 12px rgba(34, 167, 240, 0.15);
            transform: translateY(-2px);
        }
        .project-icon-item.selected {
            border-color: #2ecc71;
            background: #f0fdf4;
            box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.3);
        }
        .project-icon-item img {
            max-height: 48px;
            max-width: 48px;
            object-fit: contain;
            margin-bottom: 8px;
        }
        .project-icon-item .icon-title {
            font-size: 11px;
            font-weight: 600;
            color: #4a5568;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .current-icon-preview {
            display: flex;
            align-items: center;
            gap: 15px;
            background: #f8fafc;
            border: 1px dashed #cbd5e0;
            border-radius: 6px;
            padding: 10px 15px;
            margin-bottom: 12px;
        }
        .current-icon-preview img {
            max-height: 38px;
            max-width: 38px;
            object-fit: contain;
            background: #fff;
            padding: 3px;
            border-radius: 4px;
            border: 1px solid #edf2f7;
        }
        .citation-row {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 8px;
        }
        .citation-row .form-control {
            margin-bottom: 0;
        }
    </style>
@stop

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i>
        {{ __('voyager::generic.'.($edit ? 'edit' : 'add')).' '.$dataType->getTranslatedAttribute('display_name_singular') }}
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content edit-add container-fluid">
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-bordered">
                    <!-- form start -->
                    <form role="form"
                          class="form-edit-add"
                          action="{{ $edit ? route('voyager.'.$dataType->slug.'.update', $dataTypeContent->getKey()) : route('voyager.'.$dataType->slug.'.store') }}"
                          method="POST"
                          enctype="multipart/form-data">
                        @if($edit)
                            @method('PUT')
                        @endif
                        @csrf

                        <div class="panel-body">

                            @if (isset($errors) && count($errors) > 0)
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <!-- Title -->
                            <div class="form-group col-md-12 {{ $errors->has('title') ? 'has-error' : '' }}">
                                <label class="control-label" for="title">Principle Title <span class="text-danger">*</span></label>
                                <input type="text"
                                       class="form-control"
                                       name="title"
                                       id="title"
                                       value="{{ old('title', $dataTypeContent->title) }}"
                                       placeholder="e.g. Farmer-Led Co-Design"
                                       required>
                                <span class="help-block">The headline of this core methodology/principle.</span>
                            </div>

                            <!-- Description -->
                            <div class="form-group col-md-12 {{ $errors->has('description') ? 'has-error' : '' }}">
                                <label class="control-label" for="description">Description <span class="text-danger">*</span></label>
                                <textarea class="form-control"
                                          name="description"
                                          id="description"
                                          rows="4"
                                          placeholder="Detailed explanation of this principle..."
                                          required>{{ old('description', $dataTypeContent->description) }}</textarea>
                                <span class="help-block">Narrative explaining why and how this principle is implemented.</span>
                            </div>

                            <!-- Icon (Custom Voyager Field with FA Picker & Image Upload) -->
                            <div class="form-group col-md-12 {{ $errors->has('icon') ? 'has-error' : '' }}">
                                <label class="control-label" for="iconTextInput">Icon</label>

                                <!-- Suitable Resolution Alert -->
                                <div class="alert alert-info" style="border-left: 4px solid #22a7f0; background: #f0f7ff; color: #1e3a8a; margin-top: 5px; margin-bottom: 12px;">
                                    <i class="voyager-info-circled" style="font-size: 16px; margin-right: 6px; vertical-align: middle;"></i>
                                    <strong>Suitable Image Resolution:</strong>
                                    Recommended <strong>256 × 256 px</strong> (1:1 square ratio, transparent <strong>PNG</strong> or <strong>SVG</strong> vector). Rendered at 48px max height on the website for Retina sharpness. Max file size: 2 MB.
                                </div>

                                <!-- Current Icon Preview Box -->
                                <div id="currentIconPreviewBox" class="current-icon-preview">
                                    <div id="iconPreviewContainer" style="width: 44px; height: 44px; background: #fff; border: 1px solid #e2e8f0; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                        @if($isImg && $iconUrl)
                                            <img id="iconPreviewImg" src="{{ $iconUrl }}" style="max-height: 38px; max-width: 38px; object-fit: contain;">
                                        @else
                                            <i id="iconPreviewFa" class="{{ $faClass }}" style="font-size: 24px; color: #22a7f0;"></i>
                                        @endif
                                    </div>
                                    <div style="flex: 1;">
                                        <div id="iconPreviewText" style="font-weight: 600; color: #2d3748; font-size: 13px;">
                                            {{ $dataTypeContent->icon ?: '(No icon set)' }}
                                        </div>
                                        <small class="text-success"><i class="voyager-check"></i> Active Icon</small>
                                    </div>
                                </div>

                                <!-- Action Buttons in Voyager Style -->
                                <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px;">
                                    <button type="button" class="btn btn-info btn-sm" data-toggle="fa-picker" data-target="#iconTextInput" data-preview="#iconPreviewFa">
                                        <i class="fas fa-icons"></i> Browse Font Awesome Icons
                                    </button>
                                    <!-- <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#modalProjectIconsLibrary">
                                        <i class="voyager-images"></i> Select from Default Project Icons
                                    </button> -->
                                    <span class="text-muted" style="font-size: 12px;">— OR upload new image: —</span>
                                    <input type="file" name="icon_file" id="iconFileInput" accept="image/*" style="display: inline-block;">
                                </div>

                                <!-- Direct Icon Input -->
                                <input type="text"
                                       class="form-control"
                                       name="icon"
                                       id="iconTextInput"
                                       value="{{ old('icon', $dataTypeContent->icon) }}">
                                <span class="help-block">
                                    Direct image path (e.g. <code>assets/icons/forest-protection.png</code>), uploaded storage path, or Font Awesome class (e.g. <code>fa-users</code>).
                                </span>
                            </div>

                            <!-- Display Order & Status -->
                            <div class="form-group col-md-6 {{ $errors->has('display_order') ? 'has-error' : '' }}">
                                <label class="control-label" for="display_order">Display Order</label>
                                <input type="number"
                                       class="form-control"
                                       name="display_order"
                                       id="display_order"
                                       value="{{ old('display_order', $dataTypeContent->display_order ?? 1) }}"
                                       min="0">
                                <span class="help-block">Lower numbers appear first on the homepage.</span>
                            </div>

                            <div class="form-group col-md-6 {{ $errors->has('status') ? 'has-error' : '' }}">
                                <label class="control-label" for="status">Status <span class="text-danger">*</span></label>
                                <select name="status" id="status" class="form-control" required>
                                    <option value="Active" {{ old('status', $dataTypeContent->status) === 'Active' ? 'selected' : '' }}>Active</option>
                                    <option value="Inactive" {{ old('status', $dataTypeContent->status) === 'Inactive' ? 'selected' : '' }}>Inactive</option>
                                </select>
                                <span class="help-block">Inactive principles will be hidden from the homepage.</span>
                            </div>

                            <!-- Citations / Scientific Evidence Repeater -->
                            <div class="form-group col-md-12">
                                <label class="control-label">
                                    <span>Citations & Scientific Sources</span>
                                    <small class="text-muted" style="font-weight: normal; margin-left: 6px;">(Optional academic research papers or articles backing this principle)</small>
                                </label>

                                <div id="citationsContainer">
                                    @forelse($citations as $cite)
                                        <div class="citation-row">
                                            <input type="text" name="citation_labels[]" class="form-control" style="flex: 2;" placeholder="Citation Label (e.g. Abebaw et al., 2025 — Wiley)" value="{{ $cite['label'] ?? '' }}">
                                            <input type="url" name="citation_urls[]" class="form-control" style="flex: 3;" placeholder="Paper URL (https://...)" value="{{ $cite['url'] ?? '' }}">
                                            <button type="button" class="btn btn-danger btn-sm btn-remove-citation" style="margin: 0; padding: 6px 12px;"><i class="voyager-trash"></i></button>
                                        </div>
                                    @empty
                                        <div class="citation-row">
                                            <input type="text" name="citation_labels[]" class="form-control" style="flex: 2;" placeholder="Citation Label (e.g. Abebaw et al., 2025 — Wiley)">
                                            <input type="url" name="citation_urls[]" class="form-control" style="flex: 3;" placeholder="Paper URL (https://...)">
                                            <button type="button" class="btn btn-danger btn-sm btn-remove-citation" style="margin: 0; padding: 6px 12px;"><i class="voyager-trash"></i></button>
                                        </div>
                                    @endforelse
                                </div>

                                <button type="button" class="btn btn-default btn-sm" id="btnAddCitation" style="margin-top: 6px;">
                                    <i class="voyager-plus"></i> Add Another Citation
                                </button>
                            </div>

                        </div><!-- panel-body -->

                        <div class="panel-footer">
                            <button type="submit" class="btn btn-primary save">{{ __('voyager::generic.save') }}</button>
                            <a href="{{ route('voyager.'.$dataType->slug.'.index') }}" class="btn btn-default">Cancel</a>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

    <!-- =======================================================
         MODAL: Default Project Icons Library
         ======================================================= -->
    <div class="modal fade" id="modalProjectIconsLibrary" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><i class="voyager-images"></i> Default Project Icons Library</h4>
                </div>
                <div class="modal-body">
                    <p class="text-muted" style="margin-bottom: 15px;">
                        Click on an existing project icon to use it for this principle:
                    </p>
                    <div class="project-icons-grid">
                        @foreach(($defaultIcons ?? []) as $iconItem)
                            @php
                                $isSel = ($currentIcon === $iconItem['path']);
                            @endphp
                            <div class="project-icon-item {{ $isSel ? 'selected' : '' }}"
                                 data-path="{{ $iconItem['path'] }}"
                                 data-url="{{ asset($iconItem['path']) }}"
                                 data-name="{{ $iconItem['name'] }}">
                                <img src="{{ asset($iconItem['path']) }}" alt="{{ $iconItem['name'] }}">
                                <div class="icon-title">{{ $iconItem['name'] }}</div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('javascript')
    <script>
        $(document).ready(function () {
            // Selecting default project icon from modal
            $('.project-icon-item').on('click', function () {
                const path = $(this).data('path');
                const url = $(this).data('url');

                $('.project-icon-item').removeClass('selected');
                $(this).addClass('selected');

                // Update input
                $('#iconTextInput').val(path).trigger('input');

                // Update preview
                $('#iconPreviewContainer').html(`<img id="iconPreviewImg" src="${url}" style="max-height: 38px; max-width: 38px; object-fit: contain;">`);
                $('#iconPreviewText').text(path);

                // Close modal
                $('#modalProjectIconsLibrary').modal('hide');
            });

            // Live preview when file is selected
            const fileInput = document.getElementById('iconFileInput');
            if (fileInput) {
                fileInput.addEventListener('change', function (e) {
                    const file = e.target.files && e.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function (evt) {
                            $('#iconPreviewContainer').html(`<img id="iconPreviewImg" src="${evt.target.result}" style="max-height: 38px; max-width: 38px; object-fit: contain;">`);
                            $('#iconPreviewText').text(file.name + ' (New upload selected)');
                        };
                        reader.readAsDataURL(file);
                    }
                });
            }

            // Live preview when Font Awesome class or path is typed
            $('#iconTextInput').on('input', function() {
                const val = $(this).val().trim();
                if (!val) return;

                const lc = val.toLowerCase();
                const isImage = lc.endsWith('.png') || lc.endsWith('.svg') || lc.endsWith('.jpg') || lc.endsWith('.webp') || lc.includes('/') || lc.startsWith('storage');

                if (isImage) {
                    const src = val.startsWith('http') || val.startsWith('/') ? val : '{{ asset('') }}' + val.replace(/^\//, '');
                    $('#iconPreviewContainer').html(`<img id="iconPreviewImg" src="${src}" style="max-height: 38px; max-width: 38px; object-fit: contain;">`);
                    $('#iconPreviewText').text(val);
                } else {
                    let cls = val;
                    if (!cls.includes('fa-') && cls.length > 0) {
                        cls = 'fas fa-' + cls;
                    } else if (!cls.includes('fas') && !cls.includes('far') && !cls.includes('fab') && !cls.includes('fa-solid') && !cls.includes('fa-regular') && !cls.includes('fa-brands')) {
                        cls = 'fas ' + cls;
                    }
                    $('#iconPreviewContainer').html(`<i id="iconPreviewFa" class="${cls}" style="font-size: 24px; color: #22a7f0;"></i>`);
                    $('#iconPreviewText').text(cls);
                }
            });

            // Dynamic Citations Repeater
            $('#btnAddCitation').on('click', function() {
                const rowHtml = `
                    <div class="citation-row">
                        <input type="text" name="citation_labels[]" class="form-control" style="flex: 2;" placeholder="Citation Label (e.g. Author et al., 2025 — Journal)">
                        <input type="url" name="citation_urls[]" class="form-control" style="flex: 3;" placeholder="Paper URL (https://...)">
                        <button type="button" class="btn btn-danger btn-sm btn-remove-citation" style="margin: 0; padding: 6px 12px;"><i class="voyager-trash"></i></button>
                    </div>
                `;
                $('#citationsContainer').append(rowHtml);
            });

            $(document).on('click', '.btn-remove-citation', function() {
                if ($('#citationsContainer .citation-row').length > 1) {
                    $(this).closest('.citation-row').remove();
                } else {
                    $(this).closest('.citation-row').find('input').val('');
                }
            });
        });
    </script>
@stop