@extends('layouts.app', ['page' => __('Administración de Comprobantes'), 'pageSlug' => 'account-statements', 'section' => 'account-statements'])

@section('content')

<div class="row">
    <div class="col-md-12 div-container-amt">
        <div class="card-header">
            <div class="row">
                <div class="col-4">
                    <span class="bw-card-title">{{ __('Comprobantes de') }} {{ $accountStatement->customer->name }}</span>
                    <span class="bw-card-title-bold">
                        <i class="fa-solid fa-circle-right fa-lg" style="color: #aa9d64;"></i>
                        <br/>{{ $accountStatement->tipo_de_pago }}, Pagado el {{ $accountStatement->payment_date->translatedFormat('d F Y') }}
                    </span>
                </div>
                <div class="col-4 text-center">
                    <span class="bw-card-title">Unidad: {{ $unit->name }}</span>
                </div>
                <div class="col-4 text-right">
                    <a href="{{ route('customers.pendingconciliation') }}" class="btn btn-sm btn-primary btn-gradient">
                        {{ __('Regresar') }}
                    </a>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12">
                <div class="gallery d-flex flex-wrap">
                    @foreach ($accountStatementBluePrints as $blueprint)
                            <div class="gallery-item text-center m-2 blueprint-card" style="flex: 0 0 150px;" data-id="{{ $blueprint->id }}" data-path="{{ asset('storage/' . $blueprint->path) }}">
                                <div style="border: 2px solid black; padding: 5px; width: 400px; height: 300px; overflow: hidden; position: relative;">
                                    @php
                                        $allowedExtensions = ['pdf', 'jpg', 'jpeg', 'png', 'txt', 'doc', 'docx'];
                                        $extension = strtolower(pathinfo($blueprint->path, PATHINFO_EXTENSION));
                                    @endphp

                                    @if(in_array($extension, $allowedExtensions))
                                        @if($extension === 'pdf')
                                            <embed src="{{ asset('storage/' . $blueprint->path) }}" type="application/pdf" style="width: 100%; height: 100%; object-fit: cover;" />
                                        @elseif(in_array($extension, ['jpg', 'jpeg', 'png']))
                                            <img src="{{ asset('storage/' . $blueprint->path) }}" alt="{{ $blueprint->name }}" style="width: 100%; height: 100%; object-fit: cover;" />
                                        @elseif($extension === 'txt')
                                            <iframe src="{{ asset('storage/' . $blueprint->path) }}" style="width: 100%; height: 100%;"></iframe>
                                        @elseif(in_array($extension, ['doc', 'docx']))
                                            <img src="/assets/img/document_image.png" alt="Archivo de Word" style="width: 100%; height: 100%; object-fit: cover;" />
                                        @endif
                                    @endif
                                </div>
                                <span>{{ $blueprint->name }}</span>
                                <a href="{{ asset('storage/' . $blueprint->path) }}" target="_blank" class="btn btn-sm btn-primary btn-gradient">
                                    {{ __('Ver') }}
                                </a>
                            </div>

                    @endforeach
                </div>
                @if(count($accountStatementBluePrints) == 0)
                    <p class="text-center">No hay comprobantes aún.</p>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection
@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function() {

        document.getElementById('viewBluePrintButton').addEventListener('click', function() {
            let blueprintPath = document.getElementById('current-blueprint-preview').src;
            window.open(blueprintPath, '_blank');
        });

        document.getElementById('blueprint-file').addEventListener('change', function(event) {
            const [file] = event.target.files;
            if (file) {
                document.getElementById('current-blueprint-preview').src = URL.createObjectURL(file);
            }
        });

        document.getElementById('new-blueprint-file').addEventListener('change', function(event) {
            const [file] = event.target.files;
            if (file) {
                document.getElementById('new-blueprint-preview').src = URL.createObjectURL(file);
            }
        });
    });
</script>
@endpush