@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 ?? false;
    $iconUrl = $dataTypeContent->icon_url ?? null;
    $faClass = $dataTypeContent->fa_class ?? 'fa-solid fa-leaf';
@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;
        }
    </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

                            <!-- Key -->
                            <div class="form-group col-md-12 {{ $errors->has('key') ? 'has-error' : '' }}">
                                <label class="control-label" for="key">Key <span class="text-danger">*</span></label>
                                @if($edit)
                                    <input type="text" class="form-control" name="key" value="{{ $dataTypeContent->key }}" readonly>
                                    <span class="help-block">Unique machine identifier for template rendering.</span>
                                @else
                                    <input type="text"
                                           class="form-control"
                                           name="key"
                                           id="key"
                                           value="{{ old('key', $dataTypeContent->key) }}"
                                           placeholder="e.g. communities_supported"
                                           required>
                                    <span class="help-block">Unique machine identifier (lowercase, words separated by underscores, e.g. <code>trees_planted</code>).</span>
                                @endif
                            </div>

                            <!-- Value -->
                            <div class="form-group col-md-6 {{ $errors->has('value') ? 'has-error' : '' }}">
                                <label class="control-label" for="value">Metric Value / Number <span class="text-danger">*</span></label>
                                <input type="text"
                                       class="form-control"
                                       name="value"
                                       id="value"
                                       value="{{ old('value', $dataTypeContent->value) }}"
                                       placeholder="e.g. 2,00,000+ or 40M+"
                                       required>
                                <span class="help-block">The counter value displayed prominently on the homepage.</span>
                            </div>

                            <!-- Label -->
                            <div class="form-group col-md-6 {{ $errors->has('label') ? 'has-error' : '' }}">
                                <label class="control-label" for="label">Label / Description <span class="text-danger">*</span></label>
                                <input type="text"
                                       class="form-control"
                                       name="label"
                                       id="label"
                                       value="{{ old('label', $dataTypeContent->label) }}"
                                       placeholder="e.g. Hectares of forest under protection"
                                       required>
                                <span class="help-block">Description text displayed next to or below the number.</span>
                            </div>

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

                                <!-- Standard Voyager-Styled 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/carbon.png</code>), uploaded storage path, or Font Awesome class (e.g. <code>fa-leaf</code>).
                                </span>
                            </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 impact stat:
                    </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');
                const name = $(this).data('name');

                $('.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 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');

                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);
                }
            });
        });
    </script>
@stop