@extends('voyager::master')

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

@section('page_header')
    <h1 class="page-title">
        <i class="{{ $dataType->icon }}"></i> {{ __('voyager::generic.viewing') }} {{ ucfirst($dataType->getTranslatedAttribute('display_name_singular')) }} &nbsp;

        @can('edit', $dataTypeContent)
            <a href="{{ route('voyager.'.$dataType->slug.'.edit', $dataTypeContent->getKey()) }}" class="btn btn-info">
                <i class="glyphicon glyphicon-pencil"></i> <span class="hidden-xs hidden-sm">{{ __('voyager::generic.edit') }}</span>
            </a>
        @endcan
        @can('delete', $dataTypeContent)
            <a href="javascript:;" title="{{ __('voyager::generic.delete') }}" class="btn btn-danger delete" data-id="{{ $dataTypeContent->getKey() }}" id="delete-{{ $dataTypeContent->getKey() }}">
                <i class="voyager-trash"></i> <span class="hidden-xs hidden-sm">{{ __('voyager::generic.delete') }}</span>
            </a>
        @endcan
        @can('browse', $dataTypeContent)
            <a href="{{ route('voyager.'.$dataType->slug.'.index') }}" class="btn btn-warning">
                <i class="glyphicon glyphicon-list"></i> <span class="hidden-xs hidden-sm">{{ __('voyager::generic.return_to_list') }}</span>
            </a>
        @endcan
    </h1>
    @include('voyager::multilingual.language-selector')
@stop

@section('content')
    <div class="page-content read container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-bordered" style="padding-bottom:5px;">

                    <!-- Icon Row -->
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">Icon</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        @php
                            $isImg = $dataTypeContent->is_image_icon;
                            $iconUrl = $dataTypeContent->icon_url;
                            $faClass = $dataTypeContent->fa_class;
                        @endphp
                        @if($isImg && $iconUrl)
                            <div style="display: flex; align-items: center; gap: 15px; margin-top: 5px;">
                                <div style="width: 64px; height: 64px; background: #fafafa; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                                    <img src="{{ $iconUrl }}" alt="{{ $dataTypeContent->title }}" style="max-height: 100%; max-width: 100%; object-fit: contain;">
                                </div>
                                <div>
                                    <span class="label label-info" style="font-size: 11px; text-transform: uppercase;">Image Asset</span>
                                    <p style="margin: 4px 0 0 0; font-family: monospace; font-size: 13px; color: #475569;">{{ $dataTypeContent->icon }}</p>
                                </div>
                            </div>
                        @else
                            <div style="display: flex; align-items: center; gap: 15px; margin-top: 5px;">
                                <div style="width: 64px; height: 64px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
                                    <i class="{{ $faClass }}" style="font-size: 32px; color: #16a34a;"></i>
                                </div>
                                <div>
                                    <span class="label label-success" style="font-size: 11px; text-transform: uppercase;">Font Awesome Icon</span>
                                    <p style="margin: 4px 0 0 0; font-family: monospace; font-size: 13px; color: #475569;">{{ $dataTypeContent->icon ?: 'fa-leaf' }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                    <hr style="margin:0;">

                    <!-- Title -->
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">Title</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        <h4 style="margin: 0; font-weight: 700; color: #0f172a;">{{ $dataTypeContent->title }}</h4>
                    </div>
                    <hr style="margin:0;">

                    <!-- Description -->
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">Description</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        <p style="font-size: 14px; line-height: 1.6; color: #334155; margin: 0;">{{ $dataTypeContent->description }}</p>
                    </div>
                    <hr style="margin:0;">

                    <!-- Citations -->
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">Citations / Scientific Evidence</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        @php
                            $citations = is_array($dataTypeContent->citations) ? $dataTypeContent->citations : [];
                        @endphp
                        @if(count($citations) > 0)
                            <ul style="margin: 0; padding-left: 18px;">
                                @foreach($citations as $cite)
                                    @if(!empty($cite['label']))
                                        <li style="margin-bottom: 6px;">
                                            <a href="{{ $cite['url'] ?? '#' }}" target="_blank" rel="noopener" style="color: #0284c7; text-decoration: underline;">
                                                {{ $cite['label'] }} <i class="fas fa-external-link-alt" style="font-size: 11px; margin-left: 3px;"></i>
                                            </a>
                                        </li>
                                    @endif
                                @endforeach
                            </ul>
                        @else
                            <p class="text-muted" style="margin: 0;">No citations attached.</p>
                        @endif
                    </div>
                    <hr style="margin:0;">

                    <!-- Display Order -->
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">Display Order</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        <span class="badge" style="background: #e2e8f0; color: #475569; font-weight: 600; font-size: 13px;">
                            {{ $dataTypeContent->display_order }}
                        </span>
                    </div>
                    <hr style="margin:0;">

                    <!-- Status -->
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">Status</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        @if($dataTypeContent->status === 'Active')
                            <span class="label label-success" style="font-size: 12px;">Active</span>
                        @else
                            <span class="label label-default" style="font-size: 12px;">Inactive</span>
                        @endif
                    </div>
                    <hr style="margin:0;">

                    <!-- Timestamps -->
                    <div class="panel-heading" style="border-bottom:0;">
                        <h3 class="panel-title">Created / Updated</h3>
                    </div>
                    <div class="panel-body" style="padding-top:0;">
                        <p class="text-muted" style="margin: 0; font-size: 12px;">
                            Created: {{ $dataTypeContent->created_at ? $dataTypeContent->created_at->format('M d, Y H:i') : 'N/A' }} |
                            Last Updated: {{ $dataTypeContent->updated_at ? $dataTypeContent->updated_at->format('M d, Y H:i') : 'N/A' }}
                        </p>
                    </div>

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

    {{-- Single delete modal --}}
    <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"><i class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}?</h4>
                </div>
                <div class="modal-footer">
                    <form action="{{ route('voyager.'.$dataType->slug.'.index') }}" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm"
                               value="{{ __('voyager::generic.delete_confirm') }} {{ strtolower($dataType->getTranslatedAttribute('display_name_singular')) }}">
                    </form>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('javascript')
    <script>
        var deleteFormAction;
        $('.delete').on('click', function (e) {
            var form = $('#delete_form')[0];

            if (!deleteFormAction) {
                deleteFormAction = form.action;
            }

            form.action = deleteFormAction.match(/\/[0-9]+$/)
                ? deleteFormAction.replace(/([0-9]+$)/, $(this).data('id'))
                : deleteFormAction + '/' + $(this).data('id');

            $('#delete_modal').modal('show');
        });
    </script>
@stop