@extends('layouts.app')

@section('title', 'Precios - Global Site')

@push('styles')
    <style>
        .table-custom-header {
            background-color: #233c53 !important;
            color: white !important;
        }
        .table-custom-header th {
            border-color: #233c53 !important;
        }
    </style>
@endpush

@section('content')
<div id="layout-wrapper">
    @include('layouts.partials.header')
    @include('layouts.partials.sidebar')
    
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                
                <!-- Encabezado de la página -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0 font-size-18">
                                <i class="bx bx-dollar me-2"></i>
                                Precios
                            </h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="{{ route('global-site.index') }}">Global Site</a></li>
                                    <li class="breadcrumb-item active">Precios</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Información sobre Precios -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="alert alert-info">
                            <h6 class="alert-heading"><i class="bx bx-info-circle me-2"></i>Información sobre Precios</h6>
                            <p class="mb-0">
                                <strong>Government Fees:</strong> La tarifa base se define en la tabla <code>countries_visa_prices</code> (columna <code>price</code>).<br>
                                <strong>Processing Plans:</strong> Los valores en la tabla <code>countries</code> (columnas <code>price</code>, <code>ultrafast</code>, <code>price3</code>) son los distintos planes de Processing (fees por servicio / speed tiers) que se aplican además de los Government Fees.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Tabs para Government Fees y Processing Plans -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="bx bx-dollar me-2"></i>
                                    Gestión de Precios
                                </h5>
                            </div>
                            <div class="card-body">
                                <ul class="nav nav-tabs mb-3" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="government-fees-tab" data-bs-toggle="tab" href="#government-fees" role="tab">
                                            <i class="bx bx-buildings me-1"></i>
                                            Government Fees
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="processing-plans-tab" data-bs-toggle="tab" href="#processing-plans" role="tab">
                                            <i class="bx bx-cog me-1"></i>
                                            Processing Plans
                                        </a>
                                    </li>
                                </ul>

                                <div class="tab-content">
                                    <!-- Government Fees Tab -->
                                    <div class="tab-pane fade show active" id="government-fees" role="tabpanel">
                                        @if(isset($error))
                                            <div class="alert alert-danger mb-3">
                                                <i class="bx bx-error-circle me-2"></i>{{ $error }}
                                            </div>
                                        @endif
                                        <div class="mb-3">
                                            <a href="{{ route('global-site.prices') }}" class="btn btn-primary btn-sm">
                                                <i class="bx bx-refresh"></i>
                                                Actualizar
                                            </a>
                                        </div>
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-hover" id="government-fees-table">
                                                <thead class="table-custom-header">
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>País ID</th>
                                                        <th>Precio Base</th>
                                                        <th>Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($governmentFees as $fee)
                                                        <tr>
                                                            <td>{{ $fee->id }}</td>
                                                            <td>{{ $fee->country_id ?? '-' }}</td>
                                                            <td>
                                                                <input type="number" class="form-control form-control-sm" 
                                                                       id="gov-fee-{{ $fee->id }}" 
                                                                       value="{{ $fee->price ?? 0 }}" 
                                                                       step="0.01"
                                                                       style="width: 120px; display: inline-block;">
                                                            </td>
                                                            <td>
                                                                <button class="btn btn-sm btn-primary" 
                                                                        onclick="updateGovernmentFee({{ $fee->id }})">
                                                                    <i class="bx bx-save"></i> Guardar
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="4" class="text-center text-muted">No hay precios base disponibles</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <!-- Processing Plans Tab -->
                                    <div class="tab-pane fade" id="processing-plans" role="tabpanel">
                                        @if(isset($error))
                                            <div class="alert alert-danger mb-3">
                                                <i class="bx bx-error-circle me-2"></i>{{ $error }}
                                            </div>
                                        @endif
                                        <div class="mb-3">
                                            <a href="{{ route('global-site.prices') }}" class="btn btn-primary btn-sm">
                                                <i class="bx bx-refresh"></i>
                                                Actualizar
                                            </a>
                                        </div>
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-hover" id="processing-plans-table">
                                                <thead class="table-custom-header">
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>País</th>
                                                        <th>Código</th>
                                                        <th>Price</th>
                                                        <th>Ultra Fast</th>
                                                        <th>Price 3</th>
                                                        <th>Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @forelse($processingPlans as $plan)
                                                        <tr>
                                                            <td>{{ $plan->id }}</td>
                                                            <td>{{ $plan->name ?? '-' }}</td>
                                                            <td>{{ $plan->code ?? '-' }}</td>
                                                            <td>
                                                                <input type="number" class="form-control form-control-sm" 
                                                                       id="plan-price-{{ $plan->id }}" 
                                                                       value="{{ $plan->price ?? 0 }}" 
                                                                       step="0.01"
                                                                       style="width: 120px; display: inline-block;">
                                                            </td>
                                                            <td>
                                                                <input type="number" class="form-control form-control-sm" 
                                                                       id="plan-ultrafast-{{ $plan->id }}" 
                                                                       value="{{ $plan->ultrafast ?? 0 }}" 
                                                                       step="0.01"
                                                                       style="width: 120px; display: inline-block;">
                                                            </td>
                                                            <td>
                                                                <input type="number" class="form-control form-control-sm" 
                                                                       id="plan-price3-{{ $plan->id }}" 
                                                                       value="{{ $plan->price3 ?? 0 }}" 
                                                                       step="0.01"
                                                                       style="width: 120px; display: inline-block;">
                                                            </td>
                                                            <td>
                                                                <button class="btn btn-sm btn-primary" 
                                                                        onclick="updateProcessingPlan({{ $plan->id }})">
                                                                    <i class="bx bx-save"></i> Guardar
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @empty
                                                        <tr>
                                                            <td colspan="7" class="text-center text-muted">No hay planes de processing disponibles</td>
                                                        </tr>
                                                    @endforelse
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function updateGovernmentFee(id) {
        const price = $('#gov-fee-' + id).val();
        
        $.ajax({
            url: '{{ route("global-site.api.prices.government-fee.update") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                id: id,
                price: price
            },
            success: function(response) {
                if (response.success) {
                    alert('Precio base actualizado correctamente');
                    window.location.reload();
                } else {
                    alert('Error: ' + (response.error || 'Error desconocido'));
                }
            },
            error: function(xhr) {
                alert('Error al actualizar precio');
            }
        });
    }

    function updateProcessingPlan(id) {
        const price = $('#plan-price-' + id).val();
        const ultrafast = $('#plan-ultrafast-' + id).val();
        const price3 = $('#plan-price3-' + id).val();
        
        $.ajax({
            url: '{{ route("global-site.api.prices.processing-plan.update") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                id: id,
                price: price,
                ultrafast: ultrafast,
                price3: price3
            },
            success: function(response) {
                if (response.success) {
                    alert('Plan de processing actualizado correctamente');
                    window.location.reload();
                } else {
                    alert('Error: ' + (response.error || 'Error desconocido'));
                }
            },
            error: function(xhr) {
                alert('Error al actualizar plan');
            }
        });
    }
</script>
@endpush