@extends('layouts.metronic')

@section('title', 'Criar Nova Contratada')

@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: #e8e8e8 !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">Criar Nova Contratada</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('contratadas.index') }}" class="m-nav__link">
                            <span class="m-nav__link-text">Contratadas</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">Criar 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 Criação de Contratada
                        </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('contratadas.store') }}" method="POST">
                                    @csrf
                                    <!--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-list">
                                                            <label class="m-radio m-radio--solid m-radio--brand">
                                                                <input type="radio" name="client_type" value="pj" id="tipo_pj" {{ old('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') == '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') }}">
                                                            @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') }}">
                                                            @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') }}">
                                                            @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') }}">
                                                            @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" value="{{ old('birth_date') }}">
                                                                <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') }}"
                                                               required
                                                               pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"
                                                               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') }}">
                                                        </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') }}">
                                                        </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') }}">
                                                            @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') }}">
                                                            @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') }}">
                                                            @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') }}">
                                                            @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') }}">
                                                            @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') }}">
                                                            @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">
                                                                <option value="">Selecione o estado</option>
                                                                <option value="AC" {{ old('state') == 'AC' ? 'selected' : '' }}>AC - Acre</option>
                                                                <option value="AL" {{ old('state') == 'AL' ? 'selected' : '' }}>AL - Alagoas</option>
                                                                <option value="AP" {{ old('state') == 'AP' ? 'selected' : '' }}>AP - Amapá</option>
                                                                <option value="AM" {{ old('state') == 'AM' ? 'selected' : '' }}>AM - Amazonas</option>
                                                                <option value="BA" {{ old('state') == 'BA' ? 'selected' : '' }}>BA - Bahia</option>
                                                                <option value="CE" {{ old('state') == 'CE' ? 'selected' : '' }}>CE - Ceará</option>
                                                                <option value="DF" {{ old('state') == 'DF' ? 'selected' : '' }}>DF - Distrito Federal</option>
                                                                <option value="ES" {{ old('state') == 'ES' ? 'selected' : '' }}>ES - Espírito Santo</option>
                                                                <option value="GO" {{ old('state') == 'GO' ? 'selected' : '' }}>GO - Goiás</option>
                                                                <option value="MA" {{ old('state') == 'MA' ? 'selected' : '' }}>MA - Maranhão</option>
                                                                <option value="MT" {{ old('state') == 'MT' ? 'selected' : '' }}>MT - Mato Grosso</option>
                                                                <option value="MS" {{ old('state') == 'MS' ? 'selected' : '' }}>MS - Mato Grosso do Sul</option>
                                                                <option value="MG" {{ old('state') == 'MG' ? 'selected' : '' }}>MG - Minas Gerais</option>
                                                                <option value="PA" {{ old('state') == 'PA' ? 'selected' : '' }}>PA - Pará</option>
                                                                <option value="PB" {{ old('state') == 'PB' ? 'selected' : '' }}>PB - Paraíba</option>
                                                                <option value="PR" {{ old('state') == 'PR' ? 'selected' : '' }}>PR - Paraná</option>
                                                                <option value="PE" {{ old('state') == 'PE' ? 'selected' : '' }}>PE - Pernambuco</option>
                                                                <option value="PI" {{ old('state') == 'PI' ? 'selected' : '' }}>PI - Piauí</option>
                                                                <option value="RJ" {{ old('state') == 'RJ' ? 'selected' : '' }}>RJ - Rio de Janeiro</option>
                                                                <option value="RN" {{ old('state') == 'RN' ? 'selected' : '' }}>RN - Rio Grande do Norte</option>
                                                                <option value="RS" {{ old('state') == 'RS' ? 'selected' : '' }}>RS - Rio Grande do Sul</option>
                                                                <option value="RO" {{ old('state') == 'RO' ? 'selected' : '' }}>RO - Rondônia</option>
                                                                <option value="RR" {{ old('state') == 'RR' ? 'selected' : '' }}>RR - Roraima</option>
                                                                <option value="SC" {{ old('state') == 'SC' ? 'selected' : '' }}>SC - Santa Catarina</option>
                                                                <option value="SP" {{ old('state') == 'SP' ? 'selected' : '' }}>SP - São Paulo</option>
                                                                <option value="SE" {{ old('state') == 'SE' ? 'selected' : '' }}>SE - Sergipe</option>
                                                                <option value="TO" {{ old('state') == 'TO' ? 'selected' : '' }}>TO - Tocantins</option>
                                                            </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">Criar Usuário de Acesso (Opcional)</h3>
                                                    <div class="m-form__heading-desc">Crie um usuário de login para que o cliente possa acessar o sistema</div>
                                                </div>

                                                <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" 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" 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') }}" 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>
                                            </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-primary m-btn m-btn--custom m-btn--icon" data-wizard-action="submit" style="display: none;">
                                                        <span>
                                                            <i class="la la-check"></i>&nbsp;&nbsp;
                                                            <span>Criar Cliente</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() {
    // Initialize wizard usando o padrão oficial do Metronic
    var wizard = new mWizard('m_wizard', {
        startStep: 1,
        clickableSteps: true  // Permitir clique nas tabs
    });

    // 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();

        // Atualizar seção de revisão quando chegar no step 6
        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
                var clientType = $('input[name="client_type"]:checked').val();

                if (!clientType) {
                    isValid = false;
                    showError('client_type', 'Selecione o tipo de cliente');
                }
                break;

            case 2:
                var clientType = $('input[name="client_type"]:checked').val();

                if (!clientType) {
                    isValid = false;
                } else if (clientType === 'pj') {
                    var name = $('input[name="name"]').val().trim();

                    if (!name) {
                        isValid = false;
                        showError('name', 'Razão social é obrigatória');
                    }
                } else if (clientType === 'pf') {
                    var individualName = $('input[name="individual_name"]').val().trim();

                    if (!individualName) {
                        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').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 if (clientType === 'pf') {
            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 (value || ['street', 'number', 'neighborhood', 'city', 'zip_code', 'state'].includes(field.name)) {
                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: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    // Mostrar SweetAlert de sucesso com dois botões
                    swal({
                        icon: 'success',
                        title: 'Cliente Criado!',
                        text: 'Cliente foi criado com sucesso.',
                        showCancelButton: true,
                        confirmButtonText: 'Finalizar',
                        cancelButtonText: 'Criar Novo',
                        confirmButtonClass: 'btn btn-brand m-btn m-btn--wide',
                        cancelButtonClass: 'btn btn-secondary m-btn m-btn--wide',
                        reverseButtons: true
                    }).then(function(result) {
                        if (result.value) {
                            // Finalizar - redirecionar para listagem
                            window.location.href = '{{ route("contratadas.index") }}';
                        } else if (result.dismiss === swal.DismissReason.cancel) {
                            // Criar Novo - recarregar a página
                            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 Criar 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
    function applyInputMasks() {
        $('input[name="cnpj"]').mask('00.000.000/0000-00');
        $('input[name="cpf"]').mask('000.000.000-00');
        $('input[name="phone"], input[name="alternative_phone"]').mask('(00) 00000-0000');
        $('input[name="zip_code"]').mask('00000-000');
    }

    applyInputMasks();

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

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

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

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

    // Initialize Bootstrap Datepicker
    $('#m_datepicker_birth_date').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
    $('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').val(data.uf).trigger('change'); // Atualizar Select2
                    updateReviewSection();
                }
            });
        }
    });
});
</script>
@endpush