@extends('layouts.vertical')

@section('title', __('billing-setup.page-title'))

@section('content')
<main id="js-page-content" role="main" class="page-content">
    <div class="subheader">
        <h1 class="subheader-title">
            <i class="subheader-icon fal fa-file-invoice"></i> {{ __('billing-setup.page-title') }}
        </h1>
    </div>

    <div class="row justify-content-center">
        <div class="col-xl-10">

            @if(session('info'))
                <div class="alert alert-info alert-dismissible fade show">
                    {{ session('info') }}
                    <button type="button" class="close" data-bs-dismiss="alert"><span>&times;</span></button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show">
                    <h5>{{ __('billing-setup.verify-data') }}</h5>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="close" data-bs-dismiss="alert"><span>&times;</span></button>
                </div>
            @endif

            {{-- Wizard Steps --}}
            <div class="card mb-3">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="wizard-step active" id="step-indicator-1">
                            <span class="badge badge-primary badge-pill">1</span>
                            <small class="d-block text-center mt-1">{{ __('billing-setup.step-issuer') }}</small>
                        </div>
                        <div class="flex-grow-1 border-top mx-2"></div>
                        <div class="wizard-step" id="step-indicator-2">
                            <span class="badge badge-secondary badge-pill">2</span>
                            <small class="d-block text-center mt-1">{{ __('billing-setup.step-certificates') }}</small>
                        </div>
                        <div class="flex-grow-1 border-top mx-2"></div>
                        <div class="wizard-step" id="step-indicator-3">
                            <span class="badge badge-secondary badge-pill">3</span>
                            <small class="d-block text-center mt-1">{{ __('billing-setup.step-folios') }}</small>
                        </div>
                        <div class="flex-grow-1 border-top mx-2"></div>
                        <div class="wizard-step" id="step-indicator-4">
                            <span class="badge badge-secondary badge-pill">4</span>
                            <small class="d-block text-center mt-1">PAC</small>
                        </div>
                    </div>
                </div>
            </div>

            <form id="billingSetupForm" action="{{ route('billing.setup.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                {{-- PASO 1: Datos del Emisor --}}
                <div class="wizard-pane" id="step-1">
                    <div class="panel">
                        <div class="panel-hdr bg-primary-500 bg-primary-gradient">
                            <h2><i class="fal fa-building mr-2"></i> {{ __('billing-setup.step1-title') }}</h2>
                        </div>
                        <div class="panel-container show">
                            <div class="panel-content">
                                <div class="panel-tag">
                                    {{ __('billing-setup.step1-tag') }}
                                </div>
                                <div class="form-row mt-3">
                                    <div class="form-group col-md-4">
                                        <label>* {{ __('billing-setup.rfc') }}</label>
                                        <input type="text" name="rfc" class="form-control" value="{{ old('rfc', $company->rfc ?? '') }}" maxlength="13" required>
                                    </div>
                                    <div class="form-group col-md-8">
                                        <label>* {{ __('billing-setup.business-name') }}</label>
                                        <input type="text" name="name" class="form-control" value="{{ old('name', $company->name ?? '') }}" required>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label>{{ __('billing-setup.street') }}</label>
                                        <input type="text" name="street" class="form-control" value="{{ old('street', $company->street ?? '') }}">
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>{{ __('billing-setup.exterior') }}</label>
                                        <input type="text" name="exterior" class="form-control" value="{{ old('exterior', $company->exterior ?? '') }}">
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>{{ __('billing-setup.interior') }}</label>
                                        <input type="text" name="interior" class="form-control" value="{{ old('interior') }}">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-4">
                                        <label>{{ __('billing-setup.colony') }}</label>
                                        <input type="text" name="colony" class="form-control" value="{{ old('colony') }}">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>{{ __('billing-setup.city') }}</label>
                                        <input type="text" name="city" class="form-control" value="{{ old('city') }}">
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>{{ __('billing-setup.state') }}</label>
                                        <input type="text" name="state" class="form-control" value="{{ old('state') }}">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-3">
                                        <label>* {{ __('billing-setup.postal-code') }}</label>
                                        <input type="text" name="postal_code" class="form-control" value="{{ old('postal_code') }}" maxlength="5" required>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>{{ __('billing-setup.country') }}</label>
                                        <input type="text" name="country" class="form-control" value="{{ old('country', 'México') }}">
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>{{ __('billing-setup.regime') }}</label>
                                        <input type="text" name="regime" class="form-control" value="{{ old('regime') }}" maxlength="10" placeholder="{{ __('billing-setup.regime-placeholder') }}">
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>CURP</label>
                                        <input type="text" name="curp" class="form-control" value="{{ old('curp') }}" maxlength="18">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                        <button type="button" class="btn btn-primary" onclick="nextStep(1)">
                            {{ __('billing-setup.next') }} <i class="fal fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>

                {{-- PASO 2: Certificados CSD --}}
                <div class="wizard-pane d-none" id="step-2">
                    <div class="panel">
                        <div class="panel-hdr bg-primary-500 bg-primary-gradient">
                            <h2><i class="fal fa-certificate mr-2"></i> {{ __('billing-setup.step2-title') }}</h2>
                        </div>
                        <div class="panel-container show">
                            <div class="panel-content">
                                <div class="panel-tag">
                                    {{ __('billing-setup.step2-tag') }}
                                </div>
                                <div class="form-row mt-3">
                                    <div class="form-group col-md-4">
                                        <label>* {{ __('billing-setup.certificate-cer') }}</label>
                                        <div class="custom-file">
                                            <input type="file" name="certificate" class="custom-file-input" id="certificate" accept=".cer" required>
                                            <label class="custom-file-label" for="certificate">{{ __('billing-setup.select-cer') }}</label>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>* {{ __('billing-setup.private-key') }}</label>
                                        <div class="custom-file">
                                            <input type="file" name="kkey" class="custom-file-input" id="kkey" accept=".key" required>
                                            <label class="custom-file-label" for="kkey">{{ __('billing-setup.select-key') }}</label>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-4">
                                        <label>* {{ __('billing-setup.key-password') }}</label>
                                        <input type="password" name="password" class="form-control" required>
                                        <small class="text-muted">{{ __('billing-setup.key-password-hint') }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary" onclick="prevStep(2)">
                            <i class="fal fa-arrow-left mr-1"></i> {{ __('billing-setup.previous') }}
                        </button>
                        <button type="button" class="btn btn-primary" onclick="nextStep(2)">
                            {{ __('billing-setup.next') }} <i class="fal fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>

                {{-- PASO 3: Folios y Series --}}
                <div class="wizard-pane d-none" id="step-3">
                    <div class="panel">
                        <div class="panel-hdr bg-primary-500 bg-primary-gradient">
                            <h2><i class="fal fa-list-ol mr-2"></i> {{ __('billing-setup.step3-title') }}</h2>
                        </div>
                        <div class="panel-container show">
                            <div class="panel-content">
                                <div class="panel-tag">
                                    {{ __('billing-setup.step3-tag') }}
                                </div>
                                <div class="form-row mt-3">
                                    {{-- Ingreso --}}
                                    <div class="col-md-12 mb-2">
                                        <h6 class="text-primary">{{ __('billing-setup.income-invoices') }}</h6>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>{{ __('billing-setup.series') }}</label>
                                        <input type="text" name="serie_i" class="form-control" value="{{ old('serie_i', 'A') }}" maxlength="10" placeholder="Ej. A">
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>* {{ __('billing-setup.starting-folio') }}</label>
                                        <input type="number" name="folio_i" class="form-control" value="{{ old('folio_i', 1) }}" min="1" required>
                                    </div>
                                </div>
                                <div class="form-row">
                                    {{-- Egreso --}}
                                    <div class="col-md-12 mb-2">
                                        <h6 class="text-primary">{{ __('billing-setup.credit-notes') }}</h6>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>{{ __('billing-setup.series') }}</label>
                                        <input type="text" name="serie_e" class="form-control" value="{{ old('serie_e', 'NC') }}" maxlength="10">
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>* {{ __('billing-setup.starting-folio') }}</label>
                                        <input type="number" name="folio_e" class="form-control" value="{{ old('folio_e', 1) }}" min="1" required>
                                    </div>
                                </div>
                                <div class="form-row">
                                    {{-- Pago --}}
                                    <div class="col-md-12 mb-2">
                                        <h6 class="text-primary">{{ __('billing-setup.payment-complements') }}</h6>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>{{ __('billing-setup.series') }}</label>
                                        <input type="text" name="serie_p" class="form-control" value="{{ old('serie_p', 'P') }}" maxlength="10">
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label>* {{ __('billing-setup.starting-folio') }}</label>
                                        <input type="number" name="folio_p" class="form-control" value="{{ old('folio_p', 1) }}" min="1" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary" onclick="prevStep(3)">
                            <i class="fal fa-arrow-left mr-1"></i> {{ __('billing-setup.previous') }}
                        </button>
                        <button type="button" class="btn btn-primary" onclick="nextStep(3)">
                            {{ __('billing-setup.next') }} <i class="fal fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                </div>

                {{-- PASO 4: Configuración PAC --}}
                <div class="wizard-pane d-none" id="step-4">
                    <div class="panel">
                        <div class="panel-hdr bg-primary-500 bg-primary-gradient">
                            <h2><i class="fal fa-server mr-2"></i> {{ __('billing-setup.step4-title') }}</h2>
                        </div>
                        <div class="panel-container show">
                            <div class="panel-content">
                                <div class="panel-tag">
                                    {{ __('billing-setup.step4-tag') }}
                                </div>
                                <div class="form-row mt-3">
                                    <div class="form-group col-md-12">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" id="test_mode" name="test_mode" checked>
                                            <label class="custom-control-label" for="test_mode">
                                                {{ __('billing-setup.test-mode-on') }}
                                                <small class="text-muted ml-2">{{ __('billing-setup.test-mode-hint') }}</small>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label>{{ __('billing-setup.pac-url-test') }}</label>
                                        <input type="text" name="pac_url_pruebas" class="form-control" value="{{ old('pac_url_pruebas') }}" placeholder="https://...">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>{{ __('billing-setup.pac-url-prod') }}</label>
                                        <input type="text" name="pac_url_produccion" class="form-control" value="{{ old('pac_url_produccion') }}" placeholder="https://...">
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label>{{ __('billing-setup.pac-user-test') }}</label>
                                        <input type="text" name="pac_usuario_pruebas" class="form-control" value="{{ old('pac_usuario_pruebas') }}">
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>{{ __('billing-setup.pac-user-prod') }}</label>
                                        <input type="text" name="pac_usuario_integrador" class="form-control" value="{{ old('pac_usuario_integrador') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary" onclick="prevStep(4)">
                            <i class="fal fa-arrow-left mr-1"></i> {{ __('billing-setup.previous') }}
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="fal fa-check mr-1"></i> {{ __('billing-setup.save-start') }}
                        </button>
                    </div>
                </div>

            </form>
        </div>
    </div>
</main>
@endsection

@section('footerScript')
<script>
    function nextStep(current) {
        $('#step-' + current).addClass('d-none');
        $('#step-' + (current + 1)).removeClass('d-none');
        $('#step-indicator-' + current + ' span').removeClass('badge-primary').addClass('badge-success');
        $('#step-indicator-' + (current + 1) + ' span').removeClass('badge-secondary').addClass('badge-primary');
    }

    function prevStep(current) {
        $('#step-' + current).addClass('d-none');
        $('#step-' + (current - 1)).removeClass('d-none');
        $('#step-indicator-' + current + ' span').removeClass('badge-primary').addClass('badge-secondary');
        $('#step-indicator-' + (current - 1) + ' span').removeClass('badge-success').addClass('badge-primary');
    }

    // Mostrar nombre del archivo seleccionado
    $('.custom-file-input').on('change', function () {
        var fileName = $(this).val().split('\\').pop();
        $(this).siblings('.custom-file-label').addClass('selected').html(fileName);
    });
</script>
@endsection