@extends('../layouts/partials/header')

@section('content')

<div class="container mt-3">
    <br>
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs" id="tramiteTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="tab-datos-tab" data-bs-toggle="tab" href="#tab-datos" role="tab">
                        <i class="bi bi-person-vcard"></i> Datos del Titular
                    </a>
                </li>
            </ul>
        </div>

        <div class="card-body">

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>OK:</strong> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>Por favor corrige los siguientes errores:</strong>
                    <ul class="mb-0 mt-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <form action="{{ route('tramites.store') }}" method="POST" id="formTramite">
                @csrf
                <input type="hidden" name="active_tab" id="active_tab" value="{{ old('active_tab', 'tab-datos') }}">

                <div class="tab-content mt-3" id="tramiteTabsContent">

                    {{-- ===== TAB 1: DATOS DEL TITULAR ===== --}}
                    <div class="tab-pane fade show active" id="tab-datos" role="tabpanel">
                        <p class="text-muted small">Los campos marcados con <span class="text-danger">*</span> son obligatorios.</p>
                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label fw-bold">Cliente (vinculado al sistema)</label>
                                <select name="id_cliente" class="form-select">
                                    <option value="">- Sin vincular -</option>
                                    @foreach($clientes as $c)
                                        <option value="{{ $c->id }}" {{ old('id_cliente') == $c->id ? 'selected' : '' }}>
                                            {{ $c->nombre_completo }} {{ $c->ip_rfc ? '('.$c->ip_rfc.')' : '' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-bold">Nombre Completo <span class="text-danger">*</span></label>
                                <input type="text" name="nombre" value="{{ old('nombre') }}"
                                    class="form-control @error('nombre') is-invalid @enderror" maxlength="120">
                                @error('nombre')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-bold">Teléfono 1</label>
                                <input type="text" name="tel1" value="{{ old('tel1') }}"
                                    class="form-control" maxlength="12">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-bold">Teléfono 2</label>
                                <input type="text" name="tel2" value="{{ old('tel2') }}"
                                    class="form-control" maxlength="12">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-bold">Correo 1</label>
                                <input type="email" name="email1" value="{{ old('email1') }}"
                                    class="form-control" maxlength="25">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-bold">Correo 2</label>
                                <input type="email" name="email2" value="{{ old('email2') }}"
                                    class="form-control" maxlength="25">
                            </div>

                        </div>
                    </div>

                </div>{{-- /tab-content --}}

                <div class="row mt-4">
                    <div class="col-12 d-flex gap-2">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="bi bi-floppy"></i> Guardar
                        </button>
                        <a href="{{ route('tramites.index') }}" class="btn btn-secondary btn-sm">Cancelar</a>
                    </div>
                </div>

            </form>
        </div>{{-- /card-body --}}
    </div>{{-- /card --}}
</div>


@endsection

@extends('../layouts/partials/footer')