@extends('layouts.app', ['page' => __('Administración de Tipologías'), 'pageSlug' => 'typologies', 'section' => 'typologies'])

@section('content')

@component('components.searchBar', ['fields' => $fields , 'action' => route('typology-blueprints.showByTypology', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology]), 'search' => $search]) @endcomponent

<div class="row">
    <div class="col-md-12 div-container-amt">
        <div class="card-header">
            <div class="row">
                <div class="col-8">
                    <span class="bw-card-title">{{ __('Planos de la tipología') }}</span>
                    <span class="bw-card-title-bold">
                        <i class="fa-solid fa-circle-right fa-lg" style="color: #aa9d64;"></i>
                        {{ $typology->name }}
                    </span>
                </div>
                <div class="col-4 text-right">
                    <a href="#" class="btn btn-sm btn-gradient" data-toggle="modal" data-target="#createBluePrintModal">
                        {{ __('Alta de Plano') }}
                    </a>
                    <a href="{{ route('typologies.index', ['houseDevelopmentId' => $houseDevelopment->id]) }}" class="btn btn-sm btn-primary btn-gradient">
                        {{ __('Regresar a listado de tipologias') }}
                    </a>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12">
                <div class="gallery d-flex flex-wrap">
                    @foreach ($typologyBluePrints 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;">
                                <embed src="{{ asset('storage/' . $blueprint->path) }}" type="application/pdf" style="width: 100%; height: 100%; object-fit: cover;" />
                            </div>
                            <span>{{ $blueprint->name }}</span>
                            <a href="#" class="btn btn-sm btn-primary btn-gradient">
                                {{ __('Editar') }}
                            </a>
                        </div>
                    @endforeach
                </div>
                @if(count($typologyBluePrints) == 0)
                    <p class="text-center">No hay planos para esta tipología.</p>
                @endif
            </div>
        </div>
    </div>
</div>

<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 Plano</h5>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="typology_id" value="{{ $typology->id }}">
                    <div class="mb-3 text-center">
                        <embed id="current-blueprint-preview" src="" type="application/pdf" style="width: 100%; height: 300px; object-fit: cover;" />
                    </div>
                    <div class="mb-3">
                        <label for="blueprint-file" class="form-label">Cambiar PDF</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 Plano</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('typology-blueprints.store', ['houseDevelopment' => $houseDevelopment, 'typology' => $typology]) }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="createBluePrintModalLabel">Agregar Nuevo Plano</h5>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="typology_id" value="{{ $typology->id }}">

                    <div class="mb-3">
                        <label for="new-blueprint-file" class="form-label">Cargar PDF</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 Plano</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%; 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');

                document.getElementById('editBluePrintForm').action = `/typology-blueprints/update/${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');
            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(`/admin/typology-blueprints/${blueprintId}`, {
                        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 plano.');
                        }
                    })
                    .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: 'Plano 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