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

@section('content')

<div class="row">
    <div class="col-12 div-container-amt">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col-12 col-md-6 mb-2 mb-md-0">
                    <span class="bw-card-title">{{ __('Comprobantes') }}</span>
                    <span class="bw-card-title-bold d-block mt-1">
                        <i class="fa-solid fa-circle-right fa-lg" style="color: #aa9d64;"></i>
                        <br/>{{ $accountStatement->tipo_de_pago }}, emitido el {{ $accountStatement->issue_date->translatedFormat('d F Y') }}
                    </span>
                </div>
                <div class="col-12 col-md-6 text-md-right text-left">
                    <a href="#" class="btn btn-sm btn-gradient mb-1 mb-md-0 me-2" data-toggle="modal" data-target="#createBluePrintModal">
                        {{ __('Alta de Comprobante') }}
                    </a>
                    <a href="{{ route('portal-customers.account-statement.index',['customer' => $customer, 'unit' => $unit ]) }}" class="btn btn-sm btn-primary btn-gradient">
                        {{ __('Regresar') }}
                    </a>
                </div>
            </div>
        </div>

        <div class="row mt-4 px-3">
            <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                <h4>Cliente: <span class="bw-card-text">{{ $customer->name }}</span></h4>
            </div>
            <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                <h4>Precio de lista: <span class="bw-card-text">${{ number_format($unit->price) }}</span></h4>
            </div>
            <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                <h4>Desarrollo: <span class="bw-card-text">{{ $unit->typology->houseDevelopment->name }}</span></h4>
            </div>
            <div class="col-12 col-sm-6 col-md-3">
                <h4>Departamento: <span class="bw-card-text">{{ $unit->name }}</span></h4>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12">
                <div class="d-flex flex-wrap justify-content-center">
                    @foreach ($accountStatementBluePrints as $blueprint)
                        <div class="gallery-item text-center m-2 blueprint-card" style="flex: 0 0 150px; max-width: 150px;" data-id="{{ $blueprint->id }}" data-name="{{ $blueprint->name }}" data-path="{{ asset('storage/' . $blueprint->path) }}">
                            <div style="border: 2px solid black; padding: 5px; width: 100%; height: 150px; 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 class="d-block mt-2 text-truncate" title="{{ $blueprint->name }}">{{ $blueprint->name }}</span>
                            <a href="#" class="btn btn-sm btn-primary btn-gradient mt-1">
                                {{ __('Editar') }}
                            </a>
                        </div>
                    @endforeach
                </div>
                @if(count($accountStatementBluePrints) == 0)
                    <p class="text-center">No hay comprobantes aún.</p>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modals (sin cambios, solo asegurando que usan Bootstrap 5 data-bs-toggle y data-bs-target si es el caso) -->
<div class="modal fade" id="editBluePrintModal" tabindex="-1" aria-labelledby="editBluePrintModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="editBluePrintForm" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title" id="editBluePrintModalLabel">Editar Comprobante</h5>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="account_statement_id" value="{{ $accountStatement->id }}">
                    <div class="mb-3 text-center">
                        <embed id="current-blueprint-preview" src="" style="width: 100%; height: 300px; object-fit: cover;" />
                    </div>
                    <div class="mb-3">
                        <label for="blueprint-file" class="form-label">Cambiar Comprobante</label>
                        <input type="file" class="form-control" id="blueprint-file" name="path">
                    </div>
                    <div class="mb-3">
                        <label for="blueprint-name" class="form-label">Nombre del Comprobante</label>
                        <input type="text" class="form-control" id="blueprint-name" name="name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-gradient" data-bs-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn bw-btn-danger-gradient" id="deleteBluePrintButton">Eliminar</button>
                    <button type="submit" class="btn btn-gradient">Actualizar</button>
                    <button type="button" class="btn btn-gradient" id="viewBluePrintButton">Ver</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="createBluePrintModal" tabindex="-1" aria-labelledby="createBluePrintModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="createBluePrintForm" method="POST" action="{{ route('portal-customers.accountstatement-blueprints.store', ['customer' => $customer, 'unit' => $unit, 'accountStatement' => $accountStatement]) }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="createBluePrintModalLabel">Agregar Nuevo Comprobante</h5>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="account_statement_id" value="{{ $accountStatement->id }}">

                    <div class="mb-3">
                        <label for="new-blueprint-file" class="form-label">Cargar Comprobante</label>
                        <input type="file" class="form-control" id="new-blueprint-file" name="path" required>
                    </div>
                    <div class="mb-3">
                        <label for="new-blueprint-name" class="form-label">Nombre del Comprobante</label>
                        <input type="text" class="form-control" id="new-blueprint-name" name="name" required>
                    </div>
                    <div class="mb-3 text-center">
                        <embed id="new-blueprint-preview" src="" style="width: 100%; height: 300px; object-fit: cover;" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="close-createBluePrintModal" type="button" class="btn btn-gradient" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-gradient">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const closeModalButton = document.getElementById('close-createBluePrintModal');
    closeModalButton.addEventListener('click', function () {
        const modalElement = document.getElementById('createBluePrintModal');
        const modalInstance = bootstrap.Modal.getInstance(modalElement);
        modalInstance.hide();
    });

    document.querySelectorAll('.blueprint-card').forEach(function(card) {
        card.addEventListener('mouseenter', function() {
            card.style.transform = 'scale(1.05)';
            card.style.transition = 'transform 0.3s';
        });
        card.addEventListener('mouseleave', function() {
            card.style.transform = 'scale(1)';
        });

        card.addEventListener('click', function() {
            let blueprintId = card.getAttribute('data-id');
            let blueprintName = card.getAttribute('data-name');
            let blueprintPath = card.getAttribute('data-path');
            const updateBlueprintUrl = "{{ route('portal-customers.accountstatement-blueprints.update', ':blueprintId') }}";

            document.getElementById('editBluePrintForm').action = updateBlueprintUrl.replace(':blueprintId', blueprintId);
            document.getElementById('blueprint-name').value = blueprintName;
            document.getElementById('current-blueprint-preview').src = blueprintPath;

            document.getElementById('deleteBluePrintButton').setAttribute('data-id', blueprintId);

            new bootstrap.Modal(document.getElementById('editBluePrintModal')).show();
        });
    });

    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);
        }
    });

    document.getElementById('deleteBluePrintButton').addEventListener('click', function() {
        let blueprintId = this.getAttribute('data-id');
        const deleteBlueprintUrl = "{{ route('portal-customers.accountstatement-blueprints.destroy', ':blueprintId') }}";
        const url = deleteBlueprintUrl.replace(':blueprintId', blueprintId);

        Swal.fire({
            title: '¿Estás seguro?',
            text: 'Esta acción no se puede deshacer.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch(url, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                })
                .then(response => {
                    if (response.ok) {
                        return response.json();
                    } else {
                        throw new Error('Error al eliminar el Comprobante.');
                    }
                })
                .then(data => {
                    document.querySelector(`.gallery-item[data-id="${blueprintId}"]`).remove();

                    let editBluePrintModal = document.getElementById('editBluePrintModal');
                    let modalInstance = bootstrap.Modal.getInstance(editBluePrintModal);
                    modalInstance.hide();

                    Swal.fire({
                        icon: 'success',
                        title: 'Éxito',
                        text: 'Comprobante eliminado exitosamente.',
                        confirmButtonText: 'OK'
                    });
                })
                .catch(error => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: error.message,
                        confirmButtonText: 'OK'
                    });
                });
            }
        });
    });

    document.getElementById('editBluePrintForm').addEventListener('submit', function(event) {
        event.preventDefault();

        const formData = new FormData();
        let fileInput = document.getElementById('blueprint-file');
        let nameInput = document.getElementById('blueprint-name');

        if (fileInput.files.length > 0) {
            formData.append('path', fileInput.files[0]);
        }

        formData.append('name', nameInput.value);
        formData.append('_method', 'POST');

        fetch(document.getElementById('editBluePrintForm').action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === '200') {
                Swal.fire({
                    icon: 'success',
                    title: 'Éxito',
                    text: data.message,
                    confirmButtonText: 'OK'
                }).then(() => {
                    location.reload();
                });
            } else {
                throw new Error('Error en la respuesta del servidor.');
            }
        })
        .catch(error => {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: error.message,
                confirmButtonText: 'OK'
            });
        });
    });

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