@extends('layouts.metronic')

@section('title', 'Editar Contratante')

@push('styles')
<style>
    /* Readonly fields - apenas para campos de usuário bloqueados específicos desta página */
    .m-input--solid:not([name="birth_date"]),
    input[name="user_email"][readonly] {
        background-color: #f5f5f5 !important;
        cursor: not-allowed;
    }

    /* Garantir visibilidade dos elementos de revisão APENAS no Step 6 */
    #m_wizard_form_step_6 #review_basic_info,
    #m_wizard_form_step_6 #review_contact_info,
    #m_wizard_form_step_6 #review_address_info {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        min-height: 50px;
    }

    #m_wizard_form_step_6 .m-accordion__item-body.show,
    #m_wizard_form_step_6 .m-accordion__item-body.collapse.show {
        display: block !important;
        height: auto !important;
    }

    #m_wizard_form_step_6 .m-accordion__item.active {
        display: block !important;
    }
</style>
@endpush

@section('content')
<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">Editar Contratante</h3>
                <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                    <li class="m-nav__item m-nav__item--home">
                        <a href="{{ route('dashboard') }}" class="m-nav__link m-nav__link--icon">
                            <i class="m-nav__link-icon la la-home"></i>
                        </a>
                    </li>
                    <li class="m-nav__separator">-</li>
                    <li class="m-nav__item">
                        <a href="{{ route('contratantes.index') }}" class="m-nav__link">
                            <span class="m-nav__link-text">contratantes</span>
                        </a>
                    </li>
                    <li class="m-nav__separator">-</li>
                    <li class="m-nav__item">
                        <a href="" class="m-nav__link">
                            <span class="m-nav__link-text">Editar Cliente</span>
                        </a>
                    </li>
                </ul>
            </div>
             <div class="ml-auto">
                <a href="{{ url()->previous() }}" class="btn m-btn--pill m-btn--air btn-focus">
                    <span>
                        <i class="la la-arrow-left"></i>
                        <span>Voltar</span>
                    </span>
                </a>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->

    <div class="m-content">
        <!--Begin::Main Portlet-->
        <div class="m-portlet m-portlet--full-height">
            <!--begin: Portlet Head-->
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            Assistente de Edição de Contratante
                        </h3>
                    </div>
                </div>
            </div>
            <!--end: Portlet Head-->

            <!--begin: Portlet Body-->
            <div class="m-portlet__body m-portlet__body--no-padding">
                <!--begin: Form Wizard-->
                <div class="m-wizard m-wizard--4 m-wizard--brand" id="m_wizard">
                    <div class="row m-row--no-padding">
                        <div class="col-xl-3 col-lg-12 m--padding-top-20 m--padding-bottom-15">
                            <!--begin: Form Wizard Head -->
                            <div class="m-wizard__head">
                                <!--begin: Form Wizard Nav -->
                                <div class="m-wizard__nav">
                                    <div class="m-wizard__steps">
                                        <div class="m-wizard__step m-wizard__step--current" m-wizard-target="m_wizard_form_step_1">
                                            <div class="m-wizard__step-info">
                                                <a href="#" class="m-wizard__step-number">
                                                    <span><span>1</span></span>
                                                </a>
                                                <div class="m-wizard__step-label">
                                                    Tipo de Cliente
                                                </div>
                                                <div class="m-wizard__step-icon"><i class="la la-check"></i></div>
                                            </div>
                                        </div>
                                        <div class="m-wizard__step" m-wizard-target="m_wizard_form_step_2">
                                            <div class="m-wizard__step-info">
                                                <a href="#" class="m-wizard__step-number">
                                                    <span><span>2</span></span>
                                                </a>
                                                <div class="m-wizard__step-label">
                                                    Informações Básicas
                                                </div>
                                                <div class="m-wizard__step-icon"><i class="la la-check"></i></div>
                                            </div>
                                        </div>
                                        <div class="m-wizard__step" m-wizard-target="m_wizard_form_step_3">
                                            <div class="m-wizard__step-info">
                                                <a href="#" class="m-wizard__step-number">
                                                    <span><span>3</span></span>
                                                </a>
                                                <div class="m-wizard__step-label">
                                                    Contato
                                                </div>
                                                <div class="m-wizard__step-icon"><i class="la la-check"></i></div>
                                            </div>
                                        </div>
                                        <div class="m-wizard__step" m-wizard-target="m_wizard_form_step_4">
                                            <div class="m-wizard__step-info">
                                                <a href="#" class="m-wizard__step-number">
                                                    <span><span>4</span></span>
                                                </a>
                                                <div class="m-wizard__step-label">
                                                    Endereço
                                                </div>
                                                <div class="m-wizard__step-icon"><i class="la la-check"></i></div>
                                            </div>
                                        </div>
                                        <div class="m-wizard__step" m-wizard-target="m_wizard_form_step_5">
                                            <div class="m-wizard__step-info">
                                                <a href="#" class="m-wizard__step-number">
                                                    <span><span>5</span></span>
                                                </a>
                                                <div class="m-wizard__step-label">
                                                    Usuário (Opcional)
                                                </div>
                                                <div class="m-wizard__step-icon"><i class="la la-check"></i></div>
                                            </div>
                                        </div>
                                        <div class="m-wizard__step" m-wizard-target="m_wizard_form_step_6">
                                            <div class="m-wizard__step-info">
                                                <a href="#" class="m-wizard__step-number">
                                                    <span><span>6</span></span>
                                                </a>
                                                <div class="m-wizard__step-label">
                                                    Confirmação
                                                </div>
                                                <div class="m-wizard__step-icon"><i class="la la-check"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--end: Form Wizard Nav -->
                            </div>
                            <!--end: Form Wizard Head -->
                        </div>
                        <div class="col-xl-9 col-lg-12">
                            <!--begin: Form Wizard Form-->
                            <div class="m-wizard__form">
                                <form class="m-form m-form--label-align-left m-form--state" id="m_form" action="{{ route('contratantes.update', $contratante) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <!--begin: Form Body -->
                                    <div class="m-portlet__body m-portlet__body--no-padding">

                                        <!--begin: Form Wizard Step 1 - Client Type-->
                                        <div class="m-wizard__form-step m-wizard__form-step--current" id="m_wizard_form_step_1">
                                            <div class="m-form__section m-form__section--first">
                                                <div class="m-form__heading">
                                                    <h3 class="m-form__heading-title">Tipo de Cliente</h3>
                                                    <div class="m-form__heading-desc">Selecione se o cliente é Pessoa Física ou Pessoa Jurídica</div>
                                                </div>
                                                <div class="form-group m-form__group row">
                                                            <label class="col-xl-3 col-lg-3 col-form-label">* Tipo:</label>
                                                    <div class="col-xl-9 col-lg-9">
                                                        <div class="m-radio-inline">
                                                            <label class="m-radio m-radio--solid m-radio--brand">
                                                                        <input type="radio" name="client_type" value="pj" id="tipo_pj" {{ old('client_type', $contratante->client_type) == 'pj' ? 'checked' : '' }}>
                                                                Pessoa Jurídica
                                                                <span></span>
                                                            </label>
                                                            <label class="m-radio m-radio--solid m-radio--brand">
                                                                        <input type="radio" name="client_type" value="pf" id="tipo_pf" {{ old('client_type', $contratante->client_type) == 'pf' ? 'checked' : '' }}>
                                                                Pessoa Física
                                                                <span></span>
                                                            </label>
                                                        </div>
                                                        @error('client_type')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                        <span class="m-form__help">Selecione o tipo de cliente para configurar os campos apropriados</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 1-->

                                        <!--begin: Form Wizard Step 2 - Basic Information-->
                                        <div class="m-wizard__form-step" id="m_wizard_form_step_2">
                                            <div class="m-form__section m-form__section--first">
                                                <div class="m-form__heading">
                                                    <h3 class="m-form__heading-title">Informações Básicas</h3>
                                                    <div class="m-form__heading-desc">Dados principais do cliente</div>
                                                </div>

                                                <!-- PJ Fields -->
                                                <div id="pj_fields" class="client-type-section">
                                                    <div class="form-group m-form__group row">
                                                        <label class="col-xl-3 col-lg-3 col-form-label">* Razão Social:</label>
                                                        <div class="col-xl-9 col-lg-9">
                                                            <input type="text" name="name" class="form-control m-input" placeholder="Digite a razão social da empresa" value="{{ old('name', $contratante->name) }}">
                                                            @error('name')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="form-group m-form__group row">
                                                        <label class="col-xl-3 col-lg-3 col-form-label">* CNPJ:</label>
                                                        <div class="col-xl-9 col-lg-9">
                                                            <input type="text" name="cnpj" class="form-control m-input" placeholder="00.000.000/0000-00" value="{{ old('cnpj', $contratante->cnpj) }}" data-mask="00.000.000/0000-00">
                                                            @error('cnpj')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- PF Fields -->
                                                <div id="pf_fields" class="client-type-section">
                                                    <div class="form-group m-form__group row">
                                                        <label class="col-xl-3 col-lg-3 col-form-label">* Nome Completo:</label>
                                                        <div class="col-xl-9 col-lg-9">
                                                            <input type="text" name="individual_name" class="form-control m-input" placeholder="Digite o nome completo" value="{{ old('individual_name', $contratante->individual_name) }}">
                                                            @error('individual_name')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="form-group m-form__group row">
                                                        <label class="col-xl-3 col-lg-3 col-form-label">* CPF:</label>
                                                        <div class="col-xl-9 col-lg-9">
                                                            <input type="text" name="cpf" class="form-control m-input" placeholder="000.000.000-00" value="{{ old('cpf', $contratante->cpf) }}" data-mask="000.000.000-00">
                                                            @error('cpf')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="form-group m-form__group row">
                                                        <label class="col-xl-3 col-lg-3 col-form-label">Data de Nascimento:</label>
                                                        <div class="col-xl-9 col-lg-9">
                                                            <div class="input-group date">
                                                                <input type="text" name="birth_date" class="form-control m-input" readonly placeholder="Selecione a data" id="m_datepicker_birth_date_edit" value="{{ old('birth_date', $contratante->birth_date ? $contratante->birth_date->format('d/m/Y') : '') }}">
                                                                <div class="input-group-append">
                                                                    <span class="input-group-text">
                                                                        <i class="la la-calendar-check-o"></i>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                            @error('birth_date')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 2-->

                                        <!--begin: Form Wizard Step 3 - Contact Information-->
                                        <div class="m-wizard__form-step" id="m_wizard_form_step_3">
                                            <div class="m-form__section m-form__section--first">
                                                <div class="m-form__heading">
                                                    <h3 class="m-form__heading-title">Informações de Contato</h3>
                                                    <div class="m-form__heading-desc">Como entrar em contato com o cliente</div>
                                                </div>
                                                    <div class="form-group m-form__group row">
                                                    <label class="col-xl-3 col-lg-3 col-form-label">* Email:</label>
                                                    <div class="col-xl-9 col-lg-9">
                                                        <input type="email"
                                                               name="email"
                                                               class="form-control m-input"
                                                               placeholder="exemplo@email.com.br"
                                                               value="{{ old('email', $contratante->email) }}"
                                                               required

                                                               title="Digite um e-mail válido (exemplo: contato@empresa.com.br)">
                                                        @error('email')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group m-form__group row">
                                                    <label class="col-xl-3 col-lg-3 col-form-label">* Telefone:</label>
                                                    <div class="col-xl-9 col-lg-9">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text"><i class="la la-phone"></i></span>
                                                            </div>
                                                            <input type="text" name="phone" class="form-control m-input" placeholder="(00) 00000-0000" value="{{ old('phone', $contratante->phone) }}" data-mask="(00) 00000-0000">
                                                        </div>
                                                        @error('phone')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="form-group m-form__group row">
                                                    <label class="col-xl-3 col-lg-3 col-form-label">Telefone Alternativo:</label>
                                                    <div class="col-xl-9 col-lg-9">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text"><i class="la la-phone"></i></span>
                                                            </div>
                                                            <input type="text" name="alternative_phone" class="form-control m-input" placeholder="(00) 00000-0000" value="{{ old('alternative_phone', $contratante->alternative_phone) }}" data-mask="(00) 00000-0000">
                                                        </div>
                                                        @error('alternative_phone')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 3-->

                                        <!--begin: Form Wizard Step 4 - Address Information-->
                                        <div class="m-wizard__form-step" id="m_wizard_form_step_4">
                                            <div class="m-form__section m-form__section--first">
                                                <div class="m-form__heading">
                                                    <h3 class="m-form__heading-title">Endereço</h3>
                                                    <div class="m-form__heading-desc">Endereço completo do cliente</div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <label>CEP:</label>
                                                            <input type="text" name="zip_code" class="form-control m-input" placeholder="00000-000" value="{{ old('zip_code', $contratante->zip_code) }}">
                                                            @error('zip_code')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                            <span class="m-form__help">Digite o CEP para preenchimento automático</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-lg-8">
                                                        <div class="form-group">
                                                            <label>Logradouro:</label>
                                                            <input type="text" name="street" class="form-control m-input" placeholder="Nome da rua/avenida" value="{{ old('street', $contratante->street) }}">
                                                            @error('street')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <label>Número:</label>
                                                            <input type="text" name="number" class="form-control m-input" placeholder="Nº" value="{{ old('number', $contratante->number) }}">
                                                            @error('number')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>Complemento:</label>
                                                            <input type="text" name="complement" class="form-control m-input" placeholder="Apt, sala, etc." value="{{ old('complement', $contratante->complement) }}">
                                                            @error('complement')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6">
                                                        <div class="form-group">
                                                            <label>Bairro:</label>
                                                            <input type="text" name="neighborhood" class="form-control m-input" placeholder="Nome do bairro" value="{{ old('neighborhood', $contratante->neighborhood) }}">
                                                            @error('neighborhood')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-lg-8">
                                                        <div class="form-group">
                                                            <label>Cidade:</label>
                                                            <input type="text" name="city" class="form-control m-input" placeholder="Nome da cidade" value="{{ old('city', $contratante->city) }}">
                                                            @error('city')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="form-group">
                                                            <label>Estado:</label>
                                                            <select name="state" class="form-control m-bootstrap-select" id="m_select2_state_edit">
                                                                <option value="">Selecione o estado</option>
                                                                @php
                                                                $states = [
                                                                    'AC' => 'AC - Acre', 'AL' => 'AL - Alagoas', 'AP' => 'AP - Amapá', 'AM' => 'AM - Amazonas',
                                                                    'BA' => 'BA - Bahia', 'CE' => 'CE - Ceará', 'DF' => 'DF - Distrito Federal', 'ES' => 'ES - Espírito Santo',
                                                                    'GO' => 'GO - Goiás', 'MA' => 'MA - Maranhão', 'MT' => 'MT - Mato Grosso', 'MS' => 'MS - Mato Grosso do Sul',
                                                                    'MG' => 'MG - Minas Gerais', 'PA' => 'PA - Pará', 'PB' => 'PB - Paraíba', 'PR' => 'PR - Paraná',
                                                                    'PE' => 'PE - Pernambuco', 'PI' => 'PI - Piauí', 'RJ' => 'RJ - Rio de Janeiro', 'RN' => 'RN - Rio Grande do Norte',
                                                                    'RS' => 'RS - Rio Grande do Sul', 'RO' => 'RO - Rondônia', 'RR' => 'RR - Roraima', 'SC' => 'SC - Santa Catarina',
                                                                    'SP' => 'SP - São Paulo', 'SE' => 'SE - Sergipe', 'TO' => 'TO - Tocantins'
                                                                ];
                                                                @endphp
                                                                @foreach($states as $key => $state)
                                                                    <option value="{{ $key }}" {{ old('state', $contratante->state) == $key ? 'selected' : '' }}>{{ $state }}</option>
                                                                @endforeach
                                                            </select>
                                                            @error('state')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 4-->

                                        <!--begin: Form Wizard Step 5 - User Login (Optional)-->
                                        <div class="m-wizard__form-step" id="m_wizard_form_step_5">
                                            <div class="m-form__section m-form__section--first">
                                                <div class="m-form__heading">
                                                    <h3 class="m-form__heading-title">Usuário de Acesso (Opcional)</h3>
                                                    <div class="m-form__heading-desc">Gerencie o usuário de login do cliente</div>
                                                </div>

                                                @if($contratante->client_user_id && $contratante->clientUser)

                                                <div class="m-alert m-alert--icon m-alert--air alert alert-dismissible fade show" role="alert">
													<div class="m-alert__icon">
														<i class="la la-warning"></i>
													</div>
													<div class="m-alert__text">
														<strong class="text-primary">Usuário já criado!</strong> <br>Este cliente possui um usuário de acesso ao sistema.
													</div>
													<div class="m-alert__close">
														<button type="button" class="close" data-dismiss="alert" aria-label="Close">
														</button>
													</div>
												</div>

                                                <div class="m-portlet m-portlet--bordered-semi m-portlet--brand">
                                                    <div class="m-portlet__head">
                                                        <div class="m-portlet__head-caption">
                                                            <div class="m-portlet__head-title">
                                                                <h3 class="m-portlet__head-text">
                                                                    <i class="la la-user-circle"></i> Dados do Usuário
                                                                </h3>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="m-portlet__body">
                                                        <div class="row">
                                                            <div class="col-lg-6">
                                                                <div class="form-group">
                                                                    <label class="text-muted">Nome de Usuário:</label>
                                                                    <div class="m-input-icon m-input-icon--left">
                                                                        <input type="text" class="form-control m-input m-input--solid" value="{{ $contratante->clientUser->username }}" readonly>
                                                                        <span class="m-input-icon__icon m-input-icon__icon--left">
                                                                            <span><i class="la la-user"></i></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="form-group">
                                                                    <label class="text-muted">E-mail de Login:</label>
                                                                    <div class="m-input-icon m-input-icon--left">
                                                                        <input type="text" class="form-control m-input m-input--solid" value="{{ $contratante->clientUser->email }}" readonly>
                                                                        <span class="m-input-icon__icon m-input-icon__icon--left">
                                                                            <span><i class="la la-envelope"></i></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <div class="col-lg-6">
                                                                <div class="form-group">
                                                                    <label class="text-muted">Data de Criação:</label>
                                                                    <div class="m-input-icon m-input-icon--left">
                                                                        <input type="text" class="form-control m-input m-input--solid" value="{{ $contratante->clientUser->created_at->format('d/m/Y H:i') }}" readonly>
                                                                        <span class="m-input-icon__icon m-input-icon__icon--left">
                                                                            <span><i class="la la-calendar"></i></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="form-group">
                                                                    <label class="text-muted">Última Atualização:</label>
                                                                    <div class="m-input-icon m-input-icon--left">
                                                                        <input type="text" class="form-control m-input m-input--solid" value="{{ $contratante->clientUser->updated_at->format('d/m/Y H:i') }}" readonly>
                                                                        <span class="m-input-icon__icon m-input-icon__icon--left">
                                                                            <span><i class="la la-clock-o"></i></span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="m-separator m-separator--dashed m-separator--lg"></div>

                                                        <div class="row">
                                                            <div class="col-lg-12">

                                                                <div class="m-alert m-alert--icon m-alert--outline alert alert-primary" role="alert">
                                                                    <div class="m-alert__icon">
                                                                        <i class="la la-warning"></i>
                                                                    </div>
                                                                    <div class="m-alert__text">
                                                                        <strong>Redefinição de Senha:</strong> <br>Clique no botão ao lado para enviar um link de redefinição de senha para o e-mail do usuário.
                                                                    </div>
                                                                    <div class="m-alert__actions" style="width: 200px;">
                                                                        <button type="button" class="btn btn-brand btn-sm m-btn m-btn--pill m-btn--wide" id="btn_reset_password">
                                                                            Enviar Link
                                                                        </button>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                @else
                                                <div class="form-group m-form__group row">
                                                    <div class="col-lg-12">
                                                        <label class="m-checkbox m-checkbox--brand">
                                                            <input type="checkbox" name="create_user" id="create_user_checkbox_edit" value="1" {{ old('create_user') ? 'checked' : '' }}>
                                                            Criar usuário de acesso para este cliente
                                                            <span></span>
                                                        </label>
                                                        <span class="m-form__help">Marque esta opção se deseja que o cliente tenha acesso ao sistema</span>
                                                    </div>
                                                </div>

                                                <div id="user_fields_edit" style="display: none;">
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="form-group">
                                                                <label>Nome de Usuário:</label>
                                                                <input type="text" name="username" class="form-control m-input" placeholder="Digite o nome de usuário" value="{{ old('username') }}">
                                                                @error('username')
                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                @enderror
                                                                <span class="m-form__help">Nome de usuário para login</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-group">
                                                                <label>E-mail de Login:</label>
                                                                <input type="email" name="user_email" class="form-control m-input m-input--solid" placeholder="email@exemplo.com" value="{{ old('user_email', $contratante->email) }}" readonly>
                                                                @error('user_email')
                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                @enderror
                                                                <span class="m-form__help">Será o mesmo e-mail do cliente (preenchido automaticamente)</span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="form-group">
                                                                <label>Senha:</label>
                                                                <input type="password" name="user_password" class="form-control m-input" placeholder="Digite a senha">
                                                                @error('user_password')
                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                @enderror
                                                                <span class="m-form__help">Mínimo de 8 caracteres</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-group">
                                                                <label>Confirmar Senha:</label>
                                                                <input type="password" name="user_password_confirmation" class="form-control m-input" placeholder="Confirme a senha">
                                                                @error('user_password_confirmation')
                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="m-alert m-alert--icon m-alert--outline alert alert-info" role="alert">
                                                        <div class="m-alert__icon">
                                                            <i class="la la-info-circle"></i>
                                                        </div>
                                                        <div class="m-alert__text">
                                                            <strong>Dica:</strong> Se não criar o usuário agora, você poderá criar posteriormente na edição do cliente.
                                                        </div>
                                                    </div>
                                                </div>
                                                @endif
                                            </div>
                                        </div>
                                        <!--end: Form Wizard Step 5-->

                                        <!--begin: Form Wizard Step 6 - Review-->
                                        <div class="m-wizard__form-step" id="m_wizard_form_step_6">
                                            <!--begin::Section-->
                                            <div class="m-accordion m-accordion--default" id="m_accordion_1" role="tablist">
                                                <!--begin::Item 1 - Client Type and Basic Info-->
                                                <div class="m-accordion__item active">
                                                    <div class="m-accordion__item-head" role="tab" id="m_accordion_1_item_1_head" data-toggle="collapse" href="#m_accordion_1_item_1_body" aria-expanded="true">
                                                        <span class="m-accordion__item-icon"><i class="fa flaticon-user-ok"></i></span>
                                                        <span class="m-accordion__item-title">1. Informações Básicas</span>
                                                        <span class="m-accordion__item-mode"></span>
                                                    </div>
                                                    <div class="m-accordion__item-body collapse show" id="m_accordion_1_item_1_body" role="tabpanel" aria-labelledby="m_accordion_1_item_1_head" data-parent="#m_accordion_1">
                                                        <div class="tab-content m--padding-30">
                                                            <div id="review_basic_info">
                                                                <!-- Content will be filled by JavaScript -->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!--begin::Item 2 - Contact Info-->
                                                <div class="m-accordion__item active">
                                                    <div class="m-accordion__item-head" role="tab" id="m_accordion_1_item_2_head" data-toggle="collapse" href="#m_accordion_1_item_2_body" aria-expanded="true">
                                                        <span class="m-accordion__item-icon"><i class="fa flaticon-email"></i></span>
                                                        <span class="m-accordion__item-title">2. Informações de Contato</span>
                                                        <span class="m-accordion__item-mode"></span>
                                                    </div>
                                                    <div class="m-accordion__item-body collapse show" id="m_accordion_1_item_2_body" role="tabpanel" aria-labelledby="m_accordion_1_item_2_head" data-parent="#m_accordion_1">
                                                        <div class="tab-content m--padding-30">
                                                            <div id="review_contact_info">
                                                                <!-- Content will be filled by JavaScript -->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!--begin::Item 3 - Address Info-->
                                                <div class="m-accordion__item active">
                                                    <div class="m-accordion__item-head" role="tab" id="m_accordion_1_item_3_head" data-toggle="collapse" href="#m_accordion_1_item_3_body" aria-expanded="true">
                                                        <span class="m-accordion__item-icon"><i class="fa flaticon-map-location"></i></span>
                                                        <span class="m-accordion__item-title">3. Endereço</span>
                                                        <span class="m-accordion__item-mode"></span>
                                                    </div>
                                                    <div class="m-accordion__item-body collapse show" id="m_accordion_1_item_3_body" role="tabpanel" aria-labelledby="m_accordion_1_item_3_head" data-parent="#m_accordion_1">
                                                        <div class="tab-content m--padding-30">
                                                            <div id="review_address_info">
                                                                <!-- Content will be filled by JavaScript -->
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--end::Section-->

                                            <div class="m-separator m-separator--dashed m-separator--lg"></div>
                                        </div>
                                        <!--end: Form Wizard Step 6-->
                                    </div>
                                    <!--end: Form Body -->

                                    <!--begin: Form Actions -->
                                    <div class="m-portlet__foot m-portlet__foot--fit m--margin-top-40">
                                        <div class="m-form__actions">
                                            <div class="row" style="padding-bottom: 40px !important;">
                                                <div class="col-lg-6 m--align-left">
                                                    <a href="#" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-wizard-action="prev">
                                                        <span>
                                                            <i class="la la-arrow-left"></i>&nbsp;&nbsp;
                                                            <span>Voltar</span>
                                                        </span>
                                                    </a>
                                                </div>
                                                <div class="col-lg-6 m--align-right">
                                                    <button type="submit" class="btn btn-success m-btn m-btn--custom m-btn--icon" data-wizard-action="submit" style="display: none;">
                                                        <span>
                                                            <i class="la la-save"></i>&nbsp;&nbsp;
                                                            <span>Salvar Alterações</span>
                                                        </span>
                                                    </button>
                                                    <a href="#" class="btn btn-success m-btn m-btn--custom m-btn--icon" data-wizard-action="next">
                                                        <span>
                                                            <span>Próximo</span>&nbsp;&nbsp;
                                                            <i class="la la-arrow-right"></i>
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end: Form Actions -->
                                </form>
                            </div>
                            <!--end: Form Wizard Form-->
                        </div>
                    </div>
                </div>
                <!--end: Form Wizard-->
            </div>
            <!--end: Portlet Body-->
        </div>
        <!--End::Main Portlet-->
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/jquery-mask-plugin@1.14.16/dist/jquery.mask.min.js"></script>
<script>
$(document).ready(function() {
    // Botão de resetar senha
    $('#btn_reset_password').on('click', function() {
        var btn = $(this);
        var originalHtml = btn.html();

        swal({
            title: 'Confirmar Envio',
            text: 'Deseja enviar o link de redefinição de senha para {{ $contratante->clientUser->email ?? "" }}?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonClass: 'btn btn-warning m-btn m-btn--wide',
            confirmButtonText: 'Sim, enviar!',
            cancelButtonClass: 'btn btn-secondary m-btn m-btn--wide',
            cancelButtonText: 'Cancelar'
        }).then(function(result) {
            if (result.value) {
                // Desabilitar botão e mostrar loading
                btn.prop('disabled', true).html('<span><i class="la la-spinner la-spin"></i> Enviando...</span>');

                $.ajax({
                    url: '{{ route("contratantes.send-password-reset") }}',
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    data: {
                        _token: '{{ csrf_token() }}',
                        email: '{{ $contratante->clientUser->email ?? "" }}'
                    },
                    dataType: 'json',
                    success: function(response) {
                        btn.prop('disabled', false).html(originalHtml);
                        swal({
                            icon: 'success',
                            title: 'Link Enviado!',
                            text: response.message || 'O link de redefinição de senha foi enviado para o e-mail do usuário.',
                            confirmButtonClass: 'btn btn-success m-btn m-btn--wide',
                            confirmButtonText: 'OK'
                        });
                    },
                    error: function(xhr) {
                        btn.prop('disabled', false).html(originalHtml);
                        var errorMsg = 'Erro ao enviar o link. Tente novamente.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        swal({
                            icon: 'error',
                            title: 'Erro!',
                            text: errorMsg,
                            confirmButtonClass: 'btn btn-danger m-btn m-btn--wide',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            } else {

            }
        });
    });

    // Initialize wizard usando o padrão oficial do Metronic
    var wizard = new mWizard('m_wizard', {
        startStep: 1,
        clickableSteps: true  // Permitir clique nas tabs
    });

    // Verificar se há um step específico na URL e navegar para ele
    function checkURLStep() {
        var urlParams = new URLSearchParams(window.location.search);
        var stepParam = urlParams.get('step');

        if (stepParam) {
            var targetStep = parseInt(stepParam);
            if (targetStep >= 1 && targetStep <= 6) {
                // Aguardar um pouco para garantir que o wizard foi totalmente inicializado
                setTimeout(function() {
                    wizard.goTo(targetStep);
                    updateReviewSection();
                    updateButtons();

                    // Destacar o step de criação de usuário se for o step 5
                    if (targetStep === 5) {
                        // Scroll suave para o step
                        $('html, body').animate({
                            scrollTop: $('#m_wizard_form_step_5').offset().top - 100
                        }, 500);

                        // Adicionar um efeito visual de destaque
                        $('#m_wizard_form_step_5').addClass('animate__animated animate__pulse');
                    }
                }, 200);
            }
        }
    }

    // Executar a verificação após inicialização
    checkURLStep();

    // Adicionar evento de clique nas tabs - avança direto sem validação intermediária
    $('.m-wizard__step').on('click', function(e) {
        e.preventDefault();

        // Extrair número do step do atributo m-wizard-target (ex: "m_wizard_form_step_5" -> 5)
        var target = $(this).attr('m-wizard-target');
        if (!target) return;

        var clickedStep = parseInt(target.replace('m_wizard_form_step_', ''));
        var currentStep = wizard.currentStep;

        // Se clicar na step atual, não fazer nada
        if (clickedStep === currentStep) {
            return;
        }

        // Ir direto para a tab clicada
        wizard.goTo(clickedStep);
        updateReviewSection();
    });

    // IMPLEMENTAR A LÓGICA OFICIAL DO METRONIC - beforeNext com wizard.stop()
    wizard.on('beforeNext', function(wizardObj) {
        var currentStep = wizardObj.currentStep;

        // Limpar estados de erro anteriores
        $('.form-control').removeClass('is-invalid');
        $('.invalid-feedback').hide();

        var isValid = validateStep(currentStep);

        if (!isValid) {
            swal({
                icon: 'warning',
                title: 'Dados Básicos Necessários',
                text: 'Por favor, preencha o tipo de cliente, nome e email para continuar. Outros dados podem ser preenchidos posteriormente.',
                confirmButtonClass: 'btn btn-secondary m-btn m-btn--wide',
                confirmButtonText: 'OK'
            });
            // PARAR o wizard usando a função oficial do Metronic
            wizardObj.stop();
            return;
        }

        updateReviewSection();
    });

    // Atualizar botões quando mudar de step
    wizard.on('change', function(wizardObj) {
        updateButtons();

        if (wizardObj.currentStep === 6) {
            updateReviewSection();
        }
    });

    // Função para atualizar visibilidade dos botões
    function updateButtons() {
        var currentStep = wizard.currentStep;

        if (currentStep === 6) {
            $('[data-wizard-action="submit"]').show();
            $('[data-wizard-action="next"]').hide();
        } else {
            $('[data-wizard-action="submit"]').hide();
            $('[data-wizard-action="next"]').show();
        }

        // Botão voltar sempre visível exceto no step 1
        if (currentStep === 1) {
            $('[data-wizard-action="prev"]').hide();
        } else {
            $('[data-wizard-action="prev"]').show();
        }
    }

    // Chamada inicial para configurar botões
    updateButtons();    // Handle client type change
    function handleClientTypeChange() {
        var clientType = $('input[name="client_type"]:checked').val();

        $('#pj_fields, #pf_fields').removeClass('show').hide();

        if (clientType === 'pj') {
            $('#pj_fields').addClass('show').show();
        } else if (clientType === 'pf') {
            $('#pf_fields').addClass('show').show();
        }

        updateReviewSection();
    }

    // Client type change event
    $('input[name="client_type"]').change(handleClientTypeChange);

    // Initial call to handle pre-selected values
    handleClientTypeChange();

    // Form validation for each step
    function validateStep(step) {
        var isValid = true;
        var currentStep = $('#m_wizard_form_step_' + step);

        // Remove previous error states
        currentStep.find('.form-control').removeClass('is-invalid');
        currentStep.find('.invalid-feedback').hide();

        switch(step) {
            case 1:
                // Validate client type selection
                if (!$('input[name="client_type"]:checked').val()) {
                    isValid = false;
                    showError('client_type', 'Selecione o tipo de cliente');
                }
                break;

            case 2:
                var clientType = $('input[name="client_type"]:checked').val();
                if (clientType === 'pj') {
                    if (!$('input[name="name"]').val().trim()) {
                        isValid = false;
                        showError('name', 'Razão social é obrigatória');
                    }
                } else if (clientType === 'pf') {
                    if (!$('input[name="individual_name"]').val().trim()) {
                        isValid = false;
                        showError('individual_name', 'Nome completo é obrigatório');
                    }
                }
                break;

            case 3:
                var email = $('input[name="email"]').val().trim();

                if (!email) {
                    isValid = false;
                    showError('email', 'E-mail é obrigatório');
                } else {
                    // Validar formato do email
                    var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                    if (!emailRegex.test(email)) {
                        isValid = false;
                        showError('email', 'Digite um e-mail válido (exemplo: contato@empresa.com.br)');
                    }
                }
                break;

            case 4:
                // Nenhum campo obrigatório no step 4 (endereço)
                break;

            case 5:
                // Validar campos de usuário se checkbox estiver marcado
                var createUser = $('#create_user_checkbox_edit').is(':checked');

                if (createUser) {
                    var username = $('input[name="username"]').val().trim();
                    var userEmail = $('input[name="user_email"]').val().trim();
                    var userPassword = $('input[name="user_password"]').val();
                    var userPasswordConfirmation = $('input[name="user_password_confirmation"]').val();

                    if (!username) {
                        isValid = false;
                        showError('username', 'Nome de usuário é obrigatório');
                    }

                    if (!userEmail) {
                        isValid = false;
                        showError('user_email', 'E-mail de login é obrigatório');
                    } else {
                        // Validar formato do email
                        var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                        if (!emailRegex.test(userEmail)) {
                            isValid = false;
                            showError('user_email', 'Digite um e-mail válido');
                        }

                        // Verificar se email do usuário é igual ao email do cliente
                        var clientEmail = $('input[name="email"]').val().trim();
                        if (userEmail !== clientEmail) {
                            isValid = false;
                            showError('user_email', 'O e-mail de login deve ser igual ao e-mail do cliente');
                        }
                    }

                    if (!userPassword) {
                        isValid = false;
                        showError('user_password', 'Senha é obrigatória');
                    } else if (userPassword.length < 8) {
                        isValid = false;
                        showError('user_password', 'A senha deve ter no mínimo 8 caracteres');
                    }

                    if (!userPasswordConfirmation) {
                        isValid = false;
                        showError('user_password_confirmation', 'Confirmação de senha é obrigatória');
                    } else if (userPassword !== userPasswordConfirmation) {
                        isValid = false;
                        showError('user_password_confirmation', 'As senhas não coincidem');
                    }
                }
                break;

            case 6:
                // Nenhuma validação necessária no step final de confirmação
                break;
        }

        return isValid;
    }

    function showError(fieldName, message) {
        var field = $('input[name="' + fieldName + '"], select[name="' + fieldName + '"]');
        field.addClass('is-invalid');

        // Find or create error message element
        var errorElement = field.siblings('.invalid-feedback');
        if (errorElement.length === 0) {
            errorElement = $('<div class="invalid-feedback"></div>');
            field.after(errorElement);
        }

        errorElement.text(message).show();

        // Special handling for radio buttons (client_type)
        if (fieldName === 'client_type') {
            var radioContainer = $('input[name="client_type"]').closest('.col-xl-9');
            radioContainer.find('.invalid-feedback').remove();
            radioContainer.append('<div class="invalid-feedback" style="display: block;">' + message + '</div>');
        }

        // Special handling for checkbox (accept_terms)
        if (fieldName === 'accept_terms') {
            var checkboxContainer = $('input[name="accept_terms"]').closest('.col-xl-12');
            checkboxContainer.find('.invalid-feedback').remove();
            checkboxContainer.append('<div class="invalid-feedback" style="display: block;">' + message + '</div>');
        }
    }

    // Update review section
    function updateReviewSection() {
        var clientType = $('input[name="client_type"]:checked').val();

        // Basic Info Review
        var basicInfoHtml = '<div class="m-form__section m-form__section--first">';
        basicInfoHtml += '<div class="m-form__heading"><h4 class="m-form__heading-title">Tipo de Cliente</h4></div>';
        basicInfoHtml += '<div class="form-group m-form__group m-form__group--sm row">';
        basicInfoHtml += '<label class="col-xl-4 col-lg-4 col-form-label">Tipo:</label>';
        basicInfoHtml += '<div class="col-xl-8 col-lg-8">';
        basicInfoHtml += '<span class="m-form__control-static">' + (clientType === 'pj' ? 'Pessoa Jurídica' : 'Pessoa Física') + '</span>';
        basicInfoHtml += '</div></div>';

        if (clientType === 'pj') {
            basicInfoHtml += '<div class="form-group m-form__group m-form__group--sm row">';
            basicInfoHtml += '<label class="col-xl-4 col-lg-4 col-form-label">Razão Social:</label>';
            basicInfoHtml += '<div class="col-xl-8 col-lg-8">';
            basicInfoHtml += '<span class="m-form__control-static">' + ($('input[name="name"]').val() || '-') + '</span>';
            basicInfoHtml += '</div></div>';

            basicInfoHtml += '<div class="form-group m-form__group m-form__group--sm row">';
            basicInfoHtml += '<label class="col-xl-4 col-lg-4 col-form-label">CNPJ:</label>';
            basicInfoHtml += '<div class="col-xl-8 col-lg-8">';
            basicInfoHtml += '<span class="m-form__control-static">' + ($('input[name="cnpj"]').val() || '-') + '</span>';
            basicInfoHtml += '</div></div>';
        } else {
            basicInfoHtml += '<div class="form-group m-form__group m-form__group--sm row">';
            basicInfoHtml += '<label class="col-xl-4 col-lg-4 col-form-label">Nome Completo:</label>';
            basicInfoHtml += '<div class="col-xl-8 col-lg-8">';
            basicInfoHtml += '<span class="m-form__control-static">' + ($('input[name="individual_name"]').val() || '-') + '</span>';
            basicInfoHtml += '</div></div>';

            basicInfoHtml += '<div class="form-group m-form__group m-form__group--sm row">';
            basicInfoHtml += '<label class="col-xl-4 col-lg-4 col-form-label">CPF:</label>';
            basicInfoHtml += '<div class="col-xl-8 col-lg-8">';
            basicInfoHtml += '<span class="m-form__control-static">' + ($('input[name="cpf"]').val() || '-') + '</span>';
            basicInfoHtml += '</div></div>';

            basicInfoHtml += '<div class="form-group m-form__group m-form__group--sm row">';
            basicInfoHtml += '<label class="col-xl-4 col-lg-4 col-form-label">Data de Nascimento:</label>';
            basicInfoHtml += '<div class="col-xl-8 col-lg-8">';
            basicInfoHtml += '<span class="m-form__control-static">' + ($('input[name="birth_date"]').val() || '-') + '</span>';
            basicInfoHtml += '</div></div>';
        }
        basicInfoHtml += '</div>';

        var $reviewBasic = $('#review_basic_info');
        $reviewBasic.html(basicInfoHtml);

        // Forçar visibilidade
        $reviewBasic.show().css({
            'display': 'block',
            'opacity': '1',
            'visibility': 'visible'
        });

        // Contact Info Review
        var contactInfoHtml = '<div class="m-form__section m-form__section--first">';
        contactInfoHtml += '<div class="m-form__heading"><h4 class="m-form__heading-title">Contato</h4></div>';
        contactInfoHtml += '<div class="form-group m-form__group m-form__group--sm row">';
        contactInfoHtml += '<label class="col-xl-4 col-lg-4 col-form-label">Email:</label>';
        contactInfoHtml += '<div class="col-xl-8 col-lg-8">';
        contactInfoHtml += '<span class="m-form__control-static">' + ($('input[name="email"]').val() || '-') + '</span>';
        contactInfoHtml += '</div></div>';

        contactInfoHtml += '<div class="form-group m-form__group m-form__group--sm row">';
        contactInfoHtml += '<label class="col-xl-4 col-lg-4 col-form-label">Telefone:</label>';
        contactInfoHtml += '<div class="col-xl-8 col-lg-8">';
        contactInfoHtml += '<span class="m-form__control-static">' + ($('input[name="phone"]').val() || '-') + '</span>';
        contactInfoHtml += '</div></div>';

        if ($('input[name="alternative_phone"]').val()) {
            contactInfoHtml += '<div class="form-group m-form__group m-form__group--sm row">';
            contactInfoHtml += '<label class="col-xl-4 col-lg-4 col-form-label">Telefone Alternativo:</label>';
            contactInfoHtml += '<div class="col-xl-8 col-lg-8">';
            contactInfoHtml += '<span class="m-form__control-static">' + $('input[name="alternative_phone"]').val() + '</span>';
            contactInfoHtml += '</div></div>';
        }
        contactInfoHtml += '</div>';

        var $reviewContact = $('#review_contact_info');
        $reviewContact.html(contactInfoHtml);
        $reviewContact.show().css({
            'display': 'block',
            'opacity': '1',
            'visibility': 'visible'
        });

        // Address Info Review
        var addressInfoHtml = '<div class="m-form__section m-form__section--first">';
        addressInfoHtml += '<div class="m-form__heading"><h4 class="m-form__heading-title">Endereço</h4></div>';

        var addressFields = [
            {label: 'CEP', name: 'zip_code'},
            {label: 'Logradouro', name: 'street'},
            {label: 'Número', name: 'number'},
            {label: 'Complemento', name: 'complement'},
            {label: 'Bairro', name: 'neighborhood'},
            {label: 'Cidade', name: 'city'},
            {label: 'Estado', name: 'state'}
        ];

        addressFields.forEach(function(field) {
            var value = $('input[name="' + field.name + '"], select[name="' + field.name + '"]').val();
            if (field.name === 'state' && value) {
                // Get state name instead of code
                var stateText = $('select[name="state"] option:selected').text();
                value = stateText;
            }
            if (value || field.name === 'street' || field.name === 'number' || field.name === 'neighborhood' || field.name === 'city' || field.name === 'zip_code' || field.name === 'state') {
                addressInfoHtml += '<div class="form-group m-form__group m-form__group--sm row">';
                addressInfoHtml += '<label class="col-xl-4 col-lg-4 col-form-label">' + field.label + ':</label>';
                addressInfoHtml += '<div class="col-xl-8 col-lg-8">';
                addressInfoHtml += '<span class="m-form__control-static">' + (value || '-') + '</span>';
                addressInfoHtml += '</div></div>';
            }
        });

        addressInfoHtml += '</div>';


        var $reviewAddress = $('#review_address_info');
        $reviewAddress.html(addressInfoHtml);
        $reviewAddress.show().css({
            'display': 'block',
            'opacity': '1',
            'visibility': 'visible'
        });
    }

    // Handle form submission
    $(document).on('click', '[data-wizard-action="submit"]', function(e) {
        e.preventDefault();

        try {
            // Coletar dados do formulário
            var formData = new FormData(document.getElementById('m_form'));

            // Submissão via AJAX para capturar erros
            $.ajax({
                url: $('#m_form').attr('action'),
                method: $('#m_form').find('input[name="_method"]').val() || 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    // Mostrar SweetAlert de sucesso e recarregar
                    swal({
                        icon: 'success',
                        title: 'Cliente Atualizado!',
                        text: 'A página será recarregada para exibir os dados atualizados.',
                        confirmButtonClass: 'btn btn-success m-btn m-btn--wide',
                        confirmButtonText: 'OK',
                        closeOnConfirm: true
                    }).then(function() {
                        // Recarrega a página para mostrar os dados atualizados
                        window.location.reload();
                    });
                },
                error: function(xhr, status, error) {
                    // Tentar parsear o JSON de resposta
                    var responseData = null;
                    try {
                        responseData = JSON.parse(xhr.responseText);
                    } catch (e) {
                        // Response não é JSON válido
                    }

                    var errorMessage = 'Erro desconhecido';

                    if (xhr.status === 422) {
                        // Erros de validação
                        if (responseData && responseData.errors) {
                            var errorList = [];
                            for (var field in responseData.errors) {
                                errorList.push(field + ': ' + responseData.errors[field][0]);
                            }
                            errorMessage = 'Erros de validação:\n• ' + errorList.join('\n• ');
                        } else {
                            errorMessage = 'Erro de validação (422) - Dados inválidos';
                        }
                    } else if (xhr.status === 500) {
                        errorMessage = 'Erro interno do servidor (500). Verifique os logs do Laravel.';
                    } else if (xhr.status === 419) {
                        errorMessage = 'Token CSRF inválido (419). Recarregue a página.';
                    } else if (xhr.status === 404) {
                        errorMessage = 'Rota não encontrada (404). Verifique a URL.';
                    } else if (responseData && responseData.message) {
                        errorMessage = responseData.message;
                    }

                    // Mostrar SweetAlert com erro
                    swal({
                        icon: 'error',
                        title: 'Erro ao Atualizar Cliente',
                        text: errorMessage,
                        confirmButtonClass: 'btn btn-secondary m-btn m-btn--wide',
                        confirmButtonText: 'OK'
                    });
                }
            });

        } catch (err) {
            swal({
                icon: 'error',
                title: 'Erro Crítico',
                text: 'Erro JavaScript: ' + err.message,
                confirmButtonClass: 'btn btn-secondary m-btn m-btn--wide',
                confirmButtonText: 'OK'
            });
        }
    });

    // Input masks - aplicar máscaras específicas e seguras
    function applyInputMasks() {
        // Máscara para CNPJ
        $('input[name="cnpj"]').mask('00.000.000/0000-00', {
            placeholder: '00.000.000/0000-00'
        });

        // Máscara para CPF
        $('input[name="cpf"]').mask('000.000.000-00', {
            placeholder: '000.000.000-00'
        });

        // Máscara para telefone
        $('input[name="phone"], input[name="alternative_phone"]').mask('(00) 00000-0000', {
            placeholder: '(00) 00000-0000'
        });

        // Máscara para CEP
        $('input[name="zip_code"]').mask('00000-000', {
            placeholder: '00000-000'
        });
    }

    // Aplicar máscaras após o DOM estar pronto
    applyInputMasks();

    // Toggle user fields based on create_user checkbox (edit)
    $('#create_user_checkbox_edit').on('change', function() {
        if($(this).is(':checked')) {
            $('#user_fields_edit').slideDown();
            // Sempre sincronizar email do usuário com o email do cliente
            $('input[name="user_email"]').val($('input[name="email"]').val());
        } else {
            $('#user_fields_edit').slideUp();
        }
    });

    // Sincronizar email do usuário sempre que o email do cliente mudar
    $('input[name="email"]').on('input', function() {
        if ($('#create_user_checkbox_edit').is(':checked')) {
            $('input[name="user_email"]').val($(this).val());
        }
    });

    // Trigger on page load if checkbox is already checked
    if($('#create_user_checkbox_edit').is(':checked')) {
        $('#user_fields_edit').show();
        // Sincronizar email no carregamento
        $('input[name="user_email"]').val($('input[name="email"]').val());
    }

    // Initialize Select2 for state
    $('#m_select2_state_edit').select2({
        placeholder: "Selecione o estado",
        allowClear: true,
        width: '100%'
    });

    // Initialize Bootstrap Datepicker
    $('#m_datepicker_birth_date_edit').datepicker({
        todayHighlight: true,
        orientation: "bottom left",
        format: 'dd/mm/yyyy',
        autoclose: true,
        language: 'pt-BR',
        endDate: '0d' // Não permite datas futuras
    });

    // Update review on form field changes
    $('input, select').on('input change', function() {
        updateReviewSection();
    });

    // CEP lookup (Brazil postal code)
    $('input[name="zip_code"]').blur(function() {
        var cep = $(this).val().replace(/\D/g, '');
        if (cep.length === 8) {
            $.getJSON('https://viacep.com.br/ws/' + cep + '/json/?callback=?', function(data) {
                if (!data.erro) {
                    $('input[name="street"]').val(data.logradouro);
                    $('input[name="neighborhood"]').val(data.bairro);
                    $('input[name="city"]').val(data.localidade);
                    $('#m_select2_state_edit').val(data.uf).trigger('change'); // Atualizar Select2
                    updateReviewSection();
                }
            });
        }
    });

    // Initial review update
    updateReviewSection();
});
</script>
@endpush