@extends('layouts.app', ['page' => __('Mis documentos'), 'pageSlug' => 'mydocuments', 'section' => 'menu'])

@section('content')

<div class="row">
    <div class="col-12">
       <div class="card">
            <div class="card-header">
                <div class="row" style="border-bottom:2px solid #343434;height: 42px;"></div>
                <div class="row align-items-center">
                    <div class="col-12 col-md-8">
                        <h1 class="my-3 my-md-0">{{ __('Mis documentos') }}</h1>
                    </div>
                    <div class="col-12 col-md-4 text-md-right text-left">
                        <a href="#" class="btn btn-sm btn-gradient mb-3 mb-md-0" data-toggle="modal" data-target="#createBluePrintModal">{{ __('Subir documento') }}</a>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <div class="row mb-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 mb-4 px-3">
                    <div class="table-responsive">
                        <table class="table tablesorter text-center mb-0">
                            <tbody>
                                @foreach($customer->blueprints as $blueprint)
                                    <tr class="table-row-hover td-gradient">
                                        <td class="align-middle text-truncate" style="max-width: 200px;">
                                            <h5 class="card-text mb-0" title="{{ $blueprint->name }}">{{ $blueprint->name }}</h5>
                                        </td>
                                        <td class="align-middle">
                                            @php
                                                $extension = pathinfo($blueprint->path, PATHINFO_EXTENSION);
                                            @endphp
                                            <span>Archivo.{{ strtoupper($extension) }}</span>
                                        </td>
                                        <td class="align-middle">
                                            <a target="_blank" href="/admin/storage/{{ $blueprint->path }}" class="btn btn-sm btn-gradient">{{ __('Descargar') }}</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @if(count($customer->blueprints) == 0)
                    <div class="col-12">
                        <h4 class="text-center">No hay documentos aún.</h4>
                    </div>
                    @endif
                </div>
            </div>
        </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.customer-blueprints-portal.store', ['customer' => $customer]) }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="createBluePrintModalLabel">Agregar Nuevo Documento</h5>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="customer_id" value="{{ $customer->id }}">

                    <div class="mb-3">
                        <label for="new-blueprint-file" class="form-label">Cargar Documento</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 Documento</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="" type="application/pdf" style="width: 100%; max-height: 300px; object-fit: cover;" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button 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() {

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

                document.getElementById('blueprint-name').value = blueprintName;

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

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

        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