@push('styles')
    <link rel="stylesheet" href="{{ asset('css/jquery.fancybox.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/timeline.css') }}">
    <style>
        .pdfobject-container {
            height: 75vh;
        }
    </style>
@endpush

<div class="card">
    <div class="card-header">
        <h5 class="card-title font-weight-semibold">
            Historial
        </h5>
    </div>
    <div class="card-body">
        <ul class="cbp_tmtimeline">
            @if (! empty($history))
                @foreach ($history as $event)
                    <li>
                        <time class="cbp_tmtime" datetime="{{ $event['fulltime'] }}">
                            <span>{{ $event['date'] }}</span>
                            <span>{{ $event['time'] }}</span>
                        </time>
                        <div class="cbp_tmicon {{ $event['icon_color'] }}">
                            <i class="{{ $event['icon'] }}"></i>
                        </div>
                        <div class="cbp_tmlabel {{ $event['color'] ?? '' }}" style="position: relative;">

                            @can('access', 'record.actions.delete')
                                @if (isset($event['id_remove_action']))
                                    <div style="display:inline-block;position:absolute; top:-10px; right:-10px;">
                                        <a href="{{ route('record.actions.delete', $event['id_remove_action']) }}" class="btn btn-danger btn-sm btn-icon rounded-pill" onclick="return confirm('¿Seguro desea eliminar la actuación?');">
                                            <i class="mi-delete text-white"></i>
                                        </a>
                                    </div>
                                @endif
                            @endcan

                            @if ($event['title'] !== null)
                                <h2>{{ $event['title'] }}</h2>
                            @endif

                            @if ($event['content'] !== null)
                                <blockquote>{{ $event['content'] }}</blockquote>
                            @endif

                            @if ($event['raw_content'] !== null)
                                {!! $event['raw_content'] !!}
                            @endif

                            @if ($event['files'] !== null && $event['files']->isNotEmpty())
                                <p><strong>Adjuntos:</strong></p>
                                <div class="d-flex flex-column">
                                    @foreach ($event['files'] as $file)
                                        <div class="">
                                            @if (Str::contains($file->mime, 'image/'))
                                                <div class="">
                                                    <i class="fas fa-file-image"></i>
                                                    <span class="ml-2">
                                                        {{ $file->name }}
                                                    </span>
                                                    <a href="{{ config('sipemu.url_web').$file->full_path }}" class="ml-2" data-fancybox="gallery" ><i class="fas fa-eye"></i></a>
                                                    <a href="{{ route('record.files.download', [$record->id, $file->id]) }}" class="ml-2"><i class="fas fa-download"></i></a>

                                                    <br>
                                                    <br>
                                                    <img src="{{ config('sipemu.url_web').$file->full_path }}" style="width:100%;">

                                                    <hr>
                                                </div>
                                            @elseif ($file->mime === "application/pdf")
                                                <div class="">
                                                    <i class="fas fa-file-pdf"></i>
                                                    <span class="ml-2">
                                                        {{ $file->name }}
                                                    </span>

                                                    @if(!empty($file->id))
                                                    <a href="{{ route('record.files.download', [$record->id, $file->id]) }}" class="ml-2"><i class="fas fa-download"></i></a>
                                                    @endif

                                                    <br>
                                                    <br>

                                                    @if(!empty($file->sipemu_path))
                                                    <object data="{{ $file->sipemu_path }}" type="application/pdf" width="100%" height="400px;"></object>
                                                    @else
                                                    <object data="{{ config('sipemu.url_web').$file->full_path }}" type="application/pdf" width="100%" height="400px;"></object>
                                                    @endif

                                                    <hr>
                                                </div>
                                            @else
                                                <div class="">
                                                    <i class="fas fa-file"></i>
                                                    <span class="ml-2">
                                                        {{ $file->name }}
                                                    </span>

                                                    <a href="{{ route('record.files.download', [$record->id, $file->id]) }}" class="ml-2"><i class="fas fa-download"></i></a>

                                                    <hr>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </li>
                @endforeach
            @endif
        </ul>
    </div>
</div>

<div id="pdfPreviewModal" class="modal fade show" tabindex="-1">
    <div class="modal-dialog modal-full">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Viendo documento</h5>
                <button class="close" type="button" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div id="pdfPreview"></div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script src="{{ asset('js/jquery.fancybox.min.js') }}"></script>
    <script src="{{ asset('js/pdfobject.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            $(".pdfPreview").click(function () {
                if (PDFObject.supportsPDFs) {
                    $('#pdfPreviewModal').modal();
                    PDFObject.embed($(this).attr('data-url'), "#pdfPreview");
                } else {
                    swal({
                        title: 'Navegador incompatible',
                        text: 'No es posible mostrar el documento',
                        icon: 'error',
                    });
                }
            });
        });
    </script>
@endpush