@extends('layouts.app')

@section('title', 'Detalles del Impuesto')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('configuracion.index') }}">Configuración</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.config.taxes.index') }}">Impuestos</a></li>
            <li class="breadcrumb-item active">{{ $tax->name }}</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-eye text-info me-2"></i>Detalles del Impuesto
            </h1>
            <p class="text-muted mb-0">Información completa del impuesto: <strong>{{ $tax->name }}</strong></p>
        </div>
        <div>
            <a href="{{ route('admin.config.taxes.edit', $tax) }}" class="btn btn-warning me-2">
                <i class="fas fa-edit me-2"></i>Editar
            </a>
            <a href="{{ route('admin.config.taxes.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Información Principal -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle"></i> Información Principal
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Nombre del Impuesto</label>
                            <p class="form-control-plaintext">{{ $tax->name }}</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Código</label>
                            <p class="form-control-plaintext">
                                <span class="badge bg-secondary fs-6">{{ $tax->code }}</span>
                            </p>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Descripción</label>
                        <p class="form-control-plaintext">{{ $tax->description ?: 'Sin descripción' }}</p>
                    </div>
                </div>
            </div>

            <!-- Configuración del Impuesto -->
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-calculator"></i> Configuración del Impuesto
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Tipo de Impuesto</label>
                            <p class="form-control-plaintext">
                                <span class="badge bg-info">{{ $tax->type_text }}</span>
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Tipo de Cálculo</label>
                            <p class="form-control-plaintext">
                                <span class="badge bg-{{ $tax->calculation_type === 'inclusive' ? 'success' : 'warning' }}">
                                    {{ $tax->calculation_type_text }}
                                </span>
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Valor del Impuesto</label>
                            <p class="form-control-plaintext">
                                @if($tax->type === 'percentage')
                                    <span class="fs-4 text-primary fw-bold">{{ $tax->formatted_percentage }}</span>
                                @else
                                    <span class="fs-4 text-success fw-bold">{{ $tax->formatted_fixed_amount }}</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Ejemplo de Cálculo</label>
                            <p class="form-control-plaintext">
                                @php
                                    $ejemplo = 100;
                                    $impuesto = $tax->calculateTax($ejemplo);
                                    $total = $tax->getAmountWithTax($ejemplo);
                                @endphp
                                <small class="text-muted">
                                    Base: ${{ number_format($ejemplo, 2) }}<br>
                                    Impuesto: ${{ number_format($impuesto, 2) }}<br>
                                    <strong>Total: ${{ number_format($total, 2) }}</strong>
                                </small>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Estado y Configuración -->
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-cog"></i> Estado y Configuración
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Estado</label>
                            <p class="form-control-plaintext">
                                <span class="badge bg-{{ $tax->status_color }}">
                                    <i class="fas fa-toggle-{{ $tax->is_active ? 'on' : 'off' }} me-1"></i>
                                    {{ $tax->status_text }}
                                </span>
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Impuesto por Defecto</label>
                            <p class="form-control-plaintext">
                                @if($tax->is_default)
                                    <span class="badge bg-success">
                                        <i class="fas fa-star me-1"></i>Sí
                                    </span>
                                @else
                                    <span class="badge bg-secondary">No</span>
                                @endif
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Orden de Visualización</label>
                            <p class="form-control-plaintext">
                                <span class="badge bg-light text-dark fs-6">{{ $tax->sort_order }}</span>
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Color</label>
                            <p class="form-control-plaintext">
                                <div class="d-flex align-items-center">
                                    <div class="color-indicator me-2" style="width: 30px; height: 30px; background-color: {{ $tax->color }}; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #dee2e6;"></div>
                                    <span class="text-muted">{{ $tax->color }}</span>
                                </div>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Vista Previa -->
            <div class="card mb-4">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">
                        <i class="fas fa-eye"></i> Vista Previa
                    </h5>
                </div>
                <div class="card-body text-center">
                    <div class="mb-3">
                        <div class="color-preview" style="width: 80px; height: 80px; background-color: {{ $tax->color }}; border-radius: 50%; margin: 0 auto; border: 4px solid #fff; box-shadow: 0 0 0 3px #dee2e6;"></div>
                    </div>
                    <h4 class="mb-1">{{ $tax->name }}</h4>
                    <p class="text-muted mb-1">{{ $tax->code }}</p>
                    <p class="mb-0 fs-5">
                        @if($tax->type === 'percentage')
                            <span class="text-primary fw-bold">{{ $tax->formatted_percentage }}</span>
                        @else
                            <span class="text-success fw-bold">{{ $tax->formatted_fixed_amount }}</span>
                        @endif
                    </p>
                    <hr>
                    <p class="text-muted small mb-0">{{ $tax->description ?: 'Sin descripción' }}</p>
                </div>
            </div>

            <!-- Información del Sistema -->
            <div class="card mb-4">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-info"></i> Información del Sistema
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Fecha de Creación</label>
                        <p class="form-control-plaintext">
                            <i class="fas fa-calendar-plus text-success me-1"></i>
                            {{ $tax->created_at->format('d/m/Y H:i:s') }}
                        </p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Última Actualización</label>
                        <p class="form-control-plaintext">
                            <i class="fas fa-calendar-edit text-warning me-1"></i>
                            {{ $tax->updated_at->format('d/m/Y H:i:s') }}
                        </p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">ID del Impuesto</label>
                        <p class="form-control-plaintext">
                            <span class="badge bg-dark">#{{ $tax->id }}</span>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Acciones Rápidas -->
            <div class="card mb-4">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt"></i> Acciones Rápidas
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-{{ $tax->is_active ? 'danger' : 'success' }} toggle-status" 
                                data-tax-id="{{ $tax->id }}" 
                                data-current-status="{{ $tax->is_active }}">
                            <i class="fas fa-toggle-{{ $tax->is_active ? 'on' : 'off' }} me-2"></i>
                            {{ $tax->is_active ? 'Desactivar' : 'Activar' }} Impuesto
                        </button>
                        
                        @if(!$tax->is_default)
                            <button class="btn btn-outline-primary set-default" 
                                    data-tax-id="{{ $tax->id }}">
                                <i class="fas fa-star me-2"></i>Establecer como Por Defecto
                            </button>
                        @endif
                        
                        <a href="{{ route('admin.config.taxes.edit', $tax) }}" class="btn btn-outline-warning">
                            <i class="fas fa-edit me-2"></i>Editar Impuesto
                        </a>
                        
                        <button class="btn btn-outline-danger delete-tax" 
                                data-tax-id="{{ $tax->id }}" 
                                data-tax-name="{{ $tax->name }}">
                            <i class="fas fa-trash me-2"></i>Eliminar Impuesto
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmación -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar Eliminación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>¿Estás seguro de que deseas eliminar el impuesto <strong id="taxName"></strong>?</p>
                <p class="text-danger small">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    Esta acción no se puede deshacer.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Eliminar</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Toggle status
    $('.toggle-status').click(function() {
        const taxId = $(this).data('tax-id');
        const currentStatus = $(this).data('current-status');
        const button = $(this);
        
        $.ajax({
            url: `/admin/config/taxes/${taxId}/toggle-status`,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    // Recargar página para actualizar todos los estados
                    location.reload();
                }
            },
            error: function() {
                showAlert('error', 'Error al cambiar el estado del impuesto');
            }
        });
    });

    // Set default
    $('.set-default').click(function() {
        const taxId = $(this).data('tax-id');
        
        $.ajax({
            url: `/admin/config/taxes/${taxId}/set-default`,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    // Recargar página para actualizar todos los estados
                    location.reload();
                }
            },
            error: function() {
                showAlert('error', 'Error al establecer como por defecto');
            }
        });
    });

    // Delete tax
    $('.delete-tax').click(function() {
        const taxId = $(this).data('tax-id');
        const taxName = $(this).data('tax-name');
        
        $('#taxName').text(taxName);
        $('#deleteForm').attr('action', `/admin/config/taxes/${taxId}`);
        $('#deleteModal').modal('show');
    });

    function showAlert(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
        
        const alert = $(`
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                <i class="fas ${iconClass} me-2"></i>${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);
        
        $('.container-fluid').prepend(alert);
        
        setTimeout(() => {
            alert.alert('close');
        }, 5000);
    }
});
</script>
@endpush

@push('styles')
<style>
.color-preview {
    transition: transform 0.2s;
}

.color-preview:hover {
    transform: scale(1.1);
}

.color-indicator {
    transition: transform 0.2s;
}

.color-indicator:hover {
    transform: scale(1.2);
}

.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.card-header {
    border-bottom: none;
}

.form-control-plaintext {
    padding: 0.375rem 0;
    margin-bottom: 0;
    line-height: 1.5;
    color: #495057;
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
}

.badge {
    font-size: 0.875em;
}

.fs-4 {
    font-size: 1.5rem !important;
}

.fs-5 {
    font-size: 1.25rem !important;
}

.fs-6 {
    font-size: 1rem !important;
}
</style>
@endpush