@php
    $edit = !is_null($dataTypeContent->getKey());
    $add  = is_null($dataTypeContent->getKey());
    $errors = $errors ?? new \Illuminate\Support\ViewErrorBag();
@endphp

@extends('voyager::master')

@section('css')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <style>
        .logo-library-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            gap: 15px;
            max-height: 420px;
            overflow-y: auto;
            padding: 10px;
        }
        .logo-library-item {
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            padding: 12px 8px;
            text-align: center;
            cursor: pointer;
            background: #fff;
            transition: all 0.2s ease;
        }
        .logo-library-item:hover {
            border-color: #22a7f0;
            box-shadow: 0 4px 12px rgba(34, 167, 240, 0.15);
            transform: translateY(-2px);
        }
        .logo-library-item.selected {
            border-color: #2ecc71;
            background: #f0fdf4;
            box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.3);
        }
        .logo-library-item img {
            max-height: 45px;
            max-width: 100%;
            object-fit: contain;
            margin-bottom: 8px;
        }
        .logo-library-item .logo-title {
            font-size: 11px;
            font-weight: 600;
            color: #4a5568;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .current-logo-preview {
            display: flex;
            align-items: center;
            gap: 15px;
            background: #f8fafc;
            border: 1px dashed #cbd5e0;
            border-radius: 6px;
            padding: 10px 15px;
            margin-top: 10px;
        }
        .current-logo-preview img {
            max-height: 40px;
            max-width: 100px;
            object-fit: contain;
            background: #fff;
            border: 1px solid #edf2f7;
        }
        .resolution-guide-box {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-left: 4px solid #22a7f0;
            border-radius: 6px;
            padding: 10px 14px;
            margin-bottom: 12px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }
        .resolution-guide-box .guide-title {
            font-size: 12.5px;
            font-weight: 700;
            color: #1e293b;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
        }
        .resolution-guide-box .guide-title i {
            font-size: 15px;
            color: #22a7f0;
        }
        .resolution-guide-box ul {
            margin: 0;
            padding-left: 18px;
            font-size: 12px;
            line-height: 1.6;
            color: #475569;
        }
        .resolution-guide-box ul strong {
            color: #1e293b;
        }
        .resolution-tag {
            display: inline-block;
            background: #e0f2fe;
            color: #0369a1;
            font-weight: 600;
            padding: 1px 7px;
            border-radius: 4px;
            font-size: 11.5px;
            border: 1px solid #bae6fd;
        }
    </style>
@stop

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

@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_field("PUT") }}
                        @endif

                        {{ csrf_field() }}

                        <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

                            @php
                                $dataTypeRows = $dataType->{($edit ? 'editRows' : 'addRows' )};
                                if ($add && request()->filled('type')) {
                                    $dataTypeContent->type = request('type');
                                }
                            @endphp

                            @foreach($dataTypeRows as $row)
                                @php
                                    $display_options = $row->details->display ?? NULL;
                                    if ($dataTypeContent->{$row->field.'_'.($edit ? 'edit' : 'add')}) {
                                        $dataTypeContent->{$row->field} = $dataTypeContent->{$row->field.'_'.($edit ? 'edit' : 'add')};
                                    }
                                @endphp

                                @if($row->field === 'publication_logo')
                                    <!-- Custom Publication Logo Field with Library Selector -->
                                    <div class="form-group col-md-{{ $display_options->width ?? 12 }} {{ $errors->has($row->field) ? 'has-error' : '' }}">
                                        <label class="control-label">Publication Logo</label>

                                        <div class="resolution-guide-box">
                                            <div class="guide-title">
                                                <i class="voyager-info-circled"></i> Recommended Publication Logo Resolution & Format
                                            </div>
                                            <ul>
                                                <li><strong>Recommended Resolution:</strong> <span class="resolution-tag">300 &times; 100 px</span> (approx. 3:1 width-to-height ratio, height 60–80px).</li>
                                                <li><strong>Recommended Format:</strong> <strong>Transparent PNG</strong> or <strong>SVG</strong> vector (renders sharply across light and dark backgrounds).</li>
                                                <li><strong>Max File Size:</strong> 2 MB.</li>
                                                <li><strong>Storage Folder:</strong> New uploads are stored directly in <code>storage/publication/</code> without date or month subfolders, and are instantly reusable across all articles.</li>
                                            </ul>
                                        </div>

                                        <!-- Hidden input for selected existing logo -->
                                        <input type="hidden" name="existing_publication_logo" id="existingPubLogoInput" value="{{ $dataTypeContent->publication_logo }}">

                                        <!-- Preview Box -->
                                        <div id="selectedLogoPreviewBox" class="current-logo-preview" style="{{ !empty($dataTypeContent->publication_logo) ? '' : 'display: none;' }}">
                                            <img id="selectedLogoImg" src="{{ $dataTypeContent->publication_logo_url ?? '' }}">
                                            <div style="flex: 1;">
                                                <div id="selectedLogoText" style="font-weight: 600; color: #2d3748; font-size: 13px;">
                                                    {{ $dataTypeContent->publication_logo ? basename($dataTypeContent->publication_logo) : '' }}
                                                </div>
                                                <small class="text-success"><i class="voyager-check"></i> Selected Logo</small>
                                            </div>
                                            <button type="button" class="btn btn-xs btn-danger" id="btnClearPubLogo" title="Remove logo">
                                                <i class="voyager-trash"></i> Clear
                                            </button>
                                        </div>

                                        <div style="margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
                                            <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#modalPubLogoLibrary">
                                                <i class="voyager-images"></i> Select From Existing Logos
                                            </button>
                                            <span class="text-muted" style="font-size: 12px;">— OR upload new image: —</span>
                                            <input type="file" name="publication_logo" id="pubLogoFileInput" accept="image/*" style="display: inline-block;">
                                        </div>

                                        @if ($errors->has($row->field))
                                            @foreach ($errors->get($row->field) as $error)
                                                <span class="help-block">{{ $error }}</span>
                                            @endforeach
                                        @endif
                                    </div>

                                @else
                                    <div class="form-group @if($row->type == 'hidden') hidden @endif col-md-{{ $display_options->width ?? 12 }} {{ $errors->has($row->field) ? 'has-error' : '' }}" @if(isset($display_options->id)){{ "id=$display_options->id" }}@endif>
                                        {{ $row->slugify }}
                                        <label class="control-label" for="name">{{ $row->getTranslatedAttribute('display_name') }}</label>
                                        @include('voyager::multilingual.input-hidden-bread-edit-add')

                                        @if($row->field === 'image')
                                            <div class="resolution-guide-box">
                                                <div class="guide-title">
                                                    <i class="voyager-info-circled"></i> Recommended Featured Image Resolution & Format
                                                </div>
                                                <ul>
                                                    <li><strong>Recommended Resolution:</strong> <span class="resolution-tag">1200 &times; 800 px</span> (3:2 ratio) or <span class="resolution-tag">1200 &times; 675 px</span> (16:9 widescreen ratio).</li>
                                                    <li><strong>Recommended Format:</strong> <strong>JPG</strong>, <strong>WebP</strong>, or <strong>PNG</strong> (optimized for crisp display and quick load times).</li>
                                                    <li><strong>Max File Size:</strong> Under 2 MB recommended.</li>
                                                    <li><strong>Display Context:</strong> Displayed on news cards, featured highlight banners, and social share previews.</li>
                                                </ul>
                                            </div>
                                        @endif

                                        @if ($add && isset($row->details->view_add))
                                            @include($row->details->view_add, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $dataTypeContent->{$row->field}, 'view' => 'add', 'options' => $row->details])
                                        @elseif ($edit && isset($row->details->view_edit))
                                            @include($row->details->view_edit, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $dataTypeContent->{$row->field}, 'view' => 'edit', 'options' => $row->details])
                                        @elseif (isset($row->details->view))
                                            @include($row->details->view, ['row' => $row, 'dataType' => $dataType, 'dataTypeContent' => $dataTypeContent, 'content' => $dataTypeContent->{$row->field}, 'action' => ($edit ? 'edit' : 'add'), 'view' => ($edit ? 'edit' : 'add'), 'options' => $row->details])
                                        @elseif ($row->type == 'relationship')
                                            @include('voyager::formfields.relationship', ['options' => $row->details])
                                        @else
                                            {!! app('voyager')->formField($row, $dataType, $dataTypeContent) !!}
                                        @endif

                                        @foreach (app('voyager')->afterFormFields($row, $dataType, $dataTypeContent) as $after)
                                            {!! $after->handle($row, $dataType, $dataTypeContent) !!}
                                        @endforeach
                                        @if ($errors->has($row->field))
                                            @foreach ($errors->get($row->field) as $error)
                                                <span class="help-block">{{ $error }}</span>
                                            @endforeach
                                        @endif
                                    </div>
                                @endif
                            @endforeach

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

                        <div class="panel-footer">
                            @section('submit-buttons')
                                <button type="submit" class="btn btn-primary save">{{ __('voyager::generic.save') }}</button>
                            @stop
                            @yield('submit-buttons')
                        </div>
                    </form>

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

    <!-- =======================================================
         MODAL: Existing Publication Logos Library
         ======================================================= -->
    <div class="modal fade" id="modalPubLogoLibrary" 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> Publication Logos Library</h4>
                </div>
                <div class="modal-body">
                    <p class="text-muted" style="margin-bottom: 15px;">
                        Click on an existing logo to use it for this article. No new file will be uploaded.
                    </p>
                    <div id="pubLogosLoading" class="text-center" style="padding: 30px;">
                        <i class="voyager-refresh voyager-spin" style="font-size: 28px; color: #22a7f0;"></i>
                        <p style="margin-top: 10px;">Loading logos...</p>
                    </div>
                    <div id="pubLogosGrid" class="logo-library-grid" style="display: none;"></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 () {
            // Load publication logos when opening modal
            let logosLoaded = false;
            $('#modalPubLogoLibrary').on('show.bs.modal', function () {
                if (logosLoaded) return;

                $.ajax({
                    url: '{{ route("voyager.publication_logos") }}',
                    type: 'GET',
                    dataType: 'json',
                    success: function (logos) {
                        $('#pubLogosLoading').hide();
                        const $grid = $('#pubLogosGrid').show().empty();
                        const currentVal = $('#existingPubLogoInput').val();

                        if (!logos || logos.length === 0) {
                            $grid.html('<p class="text-muted text-center col-md-12">No existing publication logos found.</p>');
                            return;
                        }

                        logos.forEach(function (logo) {
                            const isSelected = currentVal === logo.path;
                            const $item = $(`
                                <div class="logo-library-item ${isSelected ? 'selected' : ''}" data-path="${logo.path}" data-url="${logo.url}" data-name="${logo.name}">
                                    <img src="${logo.url}" alt="${logo.name}">
                                    <div class="logo-title">${logo.name}</div>
                                </div>
                            `);

                            $item.on('click', function () {
                                const path = $(this).data('path');
                                const url = $(this).data('url');
                                const name = $(this).data('name');

                                // Update selection
                                $('.logo-library-item').removeClass('selected');
                                $(this).addClass('selected');

                                // Update inputs
                                $('#existingPubLogoInput').val(path);
                                $('#pubLogoFileInput').val(''); // clear file input

                                // Update preview box
                                $('#selectedLogoImg').attr('src', url);
                                $('#selectedLogoText').text(name);
                                $('#selectedLogoPreviewBox').slideDown();

                                $('#modalPubLogoLibrary').modal('hide');
                            });

                            $grid.append($item);
                        });

                        logosLoaded = true;
                    },
                    error: function () {
                        $('#pubLogosLoading').html('<p class="text-danger">Failed to load logos.</p>');
                    }
                });
            });

            // Clear selected logo
            $('#btnClearPubLogo').on('click', function () {
                $('#existingPubLogoInput').val('');
                $('#selectedLogoPreviewBox').slideUp();
                $('.logo-library-item').removeClass('selected');
            });

            // If user selects a new file upload, notify that existing selection is replaced
            $('#pubLogoFileInput').on('change', function () {
                if (this.files && this.files[0]) {
                    $('#existingPubLogoInput').val('');
                    $('#selectedLogoText').text(this.files[0].name + ' (New Upload)');
                    $('#selectedLogoPreviewBox').slideUp();
                }
            });
        });
    </script>
@stop