@extends('dashboard.layouts.app')

@section('title', 'Block Storage')
@section('page-title', 'Block Storage')

@section('content')
<div style="margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center;">
    <h2 style="font-size: 2rem; color: #043d13;">Gestión de Almacenamiento</h2>
    <a href="{{ route('block-storage.create') }}" style="padding: 1.2rem 2.5rem; background: linear-gradient(90deg, #043d13, #07941e); color: white; text-decoration: none; border-radius: 0.5rem; font-size: 1.5rem; font-weight: 600;">
        <i class="fas fa-plus-circle"></i> Crear Volumen
    </a>
</div>

@if (count($volumes) > 0)
    <div style="background: white; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden;">
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse;">
                <thead style="background: linear-gradient(90deg, #043d13, #07941e); color: white;">
                    <tr>
                        <th style="padding: 1.5rem; text-align: left; font-size: 1.4rem;">Label</th>
                        <th style="padding: 1.5rem; text-align: left; font-size: 1.4rem;">Tamaño</th>
                        <th style="padding: 1.5rem; text-align: left; font-size: 1.4rem;">Región</th>
                        <th style="padding: 1.5rem; text-align: left; font-size: 1.4rem;">Estado</th>
                        <th style="padding: 1.5rem; text-align: left; font-size: 1.4rem;">Adjuntado a</th>
                        <th style="padding: 1.5rem; text-align: center; font-size: 1.4rem;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($volumes as $volume)
                        <tr style="border-bottom: 1px solid #f0f0f0;">
                            <td style="padding: 1.5rem; font-size: 1.4rem; font-weight: 600;">
                                {{ $volume['label'] ?: $volume['id'] }}
                            </td>
                            <td style="padding: 1.5rem; font-size: 1.4rem;">
                                {{ $volume['size_gb'] }} GB
                            </td>
                            <td style="padding: 1.5rem; font-size: 1.4rem;">{{ $volume['region'] }}</td>
                            <td style="padding: 1.5rem;">
                                <span style="display: inline-block; padding: 0.5rem 1rem; border-radius: 2rem; font-size: 1.2rem; font-weight: 600;
                                    background: {{ $volume['status'] == 'active' ? '#d4edda' : '#fff3cd' }};
                                    color: {{ $volume['status'] == 'active' ? '#155724' : '#856404' }};">
                                    {{ ucfirst($volume['status']) }}
                                </span>
                            </td>
                            <td style="padding: 1.5rem; font-size: 1.4rem;">
                                @if (!empty($volume['attached_to_instance']))
                                    <span style="color: #07941e; font-weight: 600;">
                                        <i class="fas fa-link"></i> Adjuntado
                                    </span>
                                @else
                                    <span style="color: #999;">
                                        <i class="fas fa-unlink"></i> Libre
                                    </span>
                                @endif
                            </td>
                            <td style="padding: 1.5rem; text-align: center;">
                                <div style="display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap;">
                                    @if (empty($volume['attached_to_instance']))
                                        <!-- Attach button -->
                                        <button onclick="showAttachModal('{{ $volume['id'] }}')" style="padding: 0.6rem 1.2rem; background: #17a2b8; color: white; border: none; border-radius: 0.4rem; cursor: pointer; font-size: 1.3rem; font-weight: 600;">
                                            <i class="fas fa-link"></i>
                                        </button>
                                    @else
                                        <!-- Detach button -->
                                        <form action="{{ route('block-storage.detach', $volume['id']) }}" method="POST" style="display: inline;">
                                            @csrf
                                            <button type="submit" style="padding: 0.6rem 1.2rem; background: #ffc107; color: #333; border: none; border-radius: 0.4rem; cursor: pointer; font-size: 1.3rem; font-weight: 600;" onclick="return confirm('¿Desadjuntar este volumen?');">
                                                <i class="fas fa-unlink"></i>
                                            </button>
                                        </form>
                                    @endif

                                    <form action="{{ route('block-storage.destroy', $volume['id']) }}" method="POST" style="display: inline;" onsubmit="return confirm('¿Estás seguro de eliminar este volumen?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" style="padding: 0.6rem 1.2rem; background: #dc3545; color: white; border: none; border-radius: 0.4rem; cursor: pointer; font-size: 1.3rem; font-weight: 600;" {{ !empty($volume['attached_to_instance']) ? 'disabled title="Debes desadjuntar primero"' : '' }}>
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@else
    <div style="background: white; padding: 5rem 2rem; border-radius: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center;">
        <i class="fas fa-hdd" style="font-size: 8rem; color: #ccc; margin-bottom: 2rem;"></i>
        <h3 style="font-size: 2.2rem; color: #666; margin-bottom: 1rem;">No tienes volúmenes de almacenamiento</h3>
        <p style="font-size: 1.6rem; color: #999; margin-bottom: 2rem;">
            Crea volúmenes adicionales de almacenamiento para tus servidores
        </p>
        <a href="{{ route('block-storage.create') }}" style="display: inline-block; padding: 1.5rem 3rem; background: linear-gradient(90deg, #043d13, #07941e); color: white; text-decoration: none; border-radius: 0.5rem; font-size: 1.6rem; font-weight: 600;">
            <i class="fas fa-plus-circle"></i> Crear tu primer volumen
        </a>
    </div>
@endif

<!-- Attach Modal -->
<div id="attachModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; justify-content: center; align-items: center;">
    <div style="background: white; padding: 3rem; border-radius: 1rem; max-width: 500px; width: 90%;">
        <h3 style="font-size: 2rem; color: #043d13; margin-bottom: 2rem;">Adjuntar Volumen a Servidor</h3>
        <form id="attachForm" method="POST" action="">
            @csrf
            <div style="margin-bottom: 2rem;">
                <label style="display: block; font-size: 1.5rem; color: #333; margin-bottom: 0.5rem;">Selecciona un servidor</label>
                <select name="server_id" required style="width: 100%; padding: 1.5rem; font-size: 1.6rem; border: 1px solid #ccc; border-radius: 0.5rem;">
                    <option value="">Selecciona...</option>
                    @foreach(Auth::user()->servers as $server)
                        <option value="{{ $server->id }}">{{ $server->label ?: $server->vultr_instance_id }} - {{ $server->region }}</option>
                    @endforeach
                </select>
            </div>
            <div style="display: flex; gap: 1rem; justify-content: flex-end;">
                <button type="button" onclick="closeAttachModal()" style="padding: 1rem 2rem; background: #6c757d; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1.4rem;">
                    Cancelar
                </button>
                <button type="submit" style="padding: 1rem 2rem; background: #07941e; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-size: 1.4rem;">
                    Adjuntar
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
function showAttachModal(volumeId) {
    const modal = document.getElementById('attachModal');
    const form = document.getElementById('attachForm');
    form.action = '/block-storage/' + volumeId + '/attach';
    modal.style.display = 'flex';
}

function closeAttachModal() {
    document.getElementById('attachModal').style.display = 'none';
}

// Close modal when clicking outside
document.getElementById('attachModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeAttachModal();
    }
});
</script>
@endsection