@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;">

                    @foreach($dataType->readRows as $row)
                        @php
                            if ($dataTypeContent->{$row->field.'_read'}) {
                                $dataTypeContent->{$row->field} = $dataTypeContent->{$row->field.'_read'};
                            }
                        @endphp
                        <div class="panel-heading" style="border-bottom:0;">
                            <h3 class="panel-title">{{ $row->getTranslatedAttribute('display_name') }}</h3>
                        </div>

                        <div class="panel-body" style="padding-top:0;">
                            @if($row->field === 'icon')
                                @php
                                    $isImg = $dataTypeContent->is_image;
                                    $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->label }}" 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
                            @elseif($row->field === 'value')
                                <span class="label label-primary" style="font-size: 15px; font-weight: 700; background-color: #09383a; border-radius: 4px; padding: 6px 12px; display: inline-block;">
                                    {{ $dataTypeContent->value }}
                                </span>
                            @elseif($row->field === 'key')
                                <code>{{ $dataTypeContent->key }}</code>
                            @else
                                <p style="font-size: 15px; margin: 0; color: #1e293b;">{{ $dataTypeContent->{$row->field} }}</p>
                            @endif
                        </div>

                        @if(!$loop->last)
                            <hr style="margin:0;">
                        @endif
                    @endforeach

                </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