@extends('layouts.admin.theme')
@section("title", env("APP_NAME") . " :: " . __('Nova Empresa'))
@section('content')

    <form action="{{ route('admin.empresas.store') }}" method="post" enctype="multipart/form-data">
        <div class="container mt-5">
            <div class="row">
                <div class="col-12">
                    <div class="card shadow">
                        @php $headLine = "<i class='fa-solid fa-building'></i> " . __('Nova Empresa'); @endphp

                        @include('components.buttons._headLineButtonsBackAdd', [
                            'headLine' => __($headLine),
                            'routeBack' => 'admin.empresas.index',
                            'routeBackParams' => $filterParams ?? [],
                            'nameBack' => __("Voltar"),
                            "permission" => "GERENCIADOR_DE_EMPRESAS",
                        ])
                        <div class="card-body">
                            @csrf
                            @include('components.empresas._filterPersist', ['filterParams' => $filterParams ?? []])
                            @include("errors.messageFlash")

                            @if($errors->any())
                                <div class="alert alert-danger" role="alert">
                                    <ul class="mb-0 ps-3">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div id="prepostoCpfAlert" class="alert alert-danger d-none" role="alert">
                                {{ __('O CPF do preposto deve ser diferente do CPF do responsável.') }}
                            </div>

                            <ul class="nav nav-pills mb-3 justify-content-center bg-light p-2 rounded shadow-sm"
                                role="tablist">

                                @include('components.lists._liLinkBtnNavInterna', [
                                    'items' => [
                                        ['class' => 'active', 'hash' => 'primeiraSection', 'label' => __('Empresa')],
                                        ['class' => '', 'hash' => 'segundaSection', 'label' => __('Contato')],
                                        ['class' => '', 'hash' => 'terceiraSection', 'label' => __('Endereço')],
                                        ['class' => '', 'hash' => 'quartaSection', 'label' => __('Responsável Legal')],
                                        ['class' => '', 'hash' => 'quintaSection', 'label' => __('Preposto')],
                                        ['class' => '', 'hash' => 'sextaSection', 'label' => __('Documentos')],
                                    ]
                                ])
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane fade show active py-3" id="primeiraSection">
                                    @include("admin.empresas.sections.dadosEmpresa")
                                    <div class="d-flex justify-content-between mt-4">
                                        <button class="btn btn-outline-secondary" disabled>
                                            <i class="fa-solid fa-arrow-left-long"></i> {{ __("Anterior") }}
                                        </button>
                                        <button class="btn btn-primary" data-tab-next="segundaSection" type="button">
                                            {{ __("Próximo") }} <i class="fa-solid fa-arrow-right-long"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="tab-pane fade py-3" id="segundaSection">
                                    @include("admin.empresas.sections.contatoEmpresa")
                                    <div class="d-flex justify-content-between mt-4">
                                        <button class="btn btn-outline-secondary" data-tab-prev="primeiraSection" type="button">
                                            <i class="fa-solid fa-arrow-left-long"></i> {{ __("Anterior") }}
                                        </button>
                                        <button class="btn btn-primary" data-tab-next="terceiraSection" type="button">
                                            {{ __("Próximo") }} <i class="fa-solid fa-arrow-right-long"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="tab-pane fade py-3" id="terceiraSection">
                                    @include("admin.empresas.sections.enderecoEmpresa")
                                    <div class="d-flex justify-content-between mt-4">
                                        <button class="btn btn-outline-secondary" data-tab-prev="segundaSection" type="button">
                                            <i class="fa-solid fa-arrow-left-long"></i> {{ __("Anterior") }}
                                        </button>
                                        <button class="btn btn-primary" data-tab-next="quartaSection" type="button">
                                            {{ __("Próximo") }} <i class="fa-solid fa-arrow-right-long"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="tab-pane fade py-3" id="quartaSection">
                                    @include("admin.empresas.sections.responsavelEmpresa")
                                    <div class="d-flex justify-content-between mt-4">
                                        <button class="btn btn-outline-secondary" data-tab-prev="terceiraSection" type="button">
                                            <i class="fa-solid fa-arrow-left-long"></i> {{ __("Anterior") }}
                                        </button>
                                        <button class="btn btn-primary" data-tab-next="quintaSection" type="button">
                                            {{ __("Próximo") }} <i class="fa-solid fa-arrow-right-long"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="tab-pane fade py-3" id="quintaSection">
                                    @include("admin.empresas.sections.prepostoEmpresa")
                                    <div class="d-flex justify-content-between mt-4">
                                        <button class="btn btn-outline-secondary" data-tab-prev="quartaSection" type="button">
                                            <i class="fa-solid fa-arrow-left-long"></i> {{ __("Anterior") }}
                                        </button>
                                        <button class="btn btn-primary" data-tab-next="sextaSection" type="button">
                                            {{ __("Próximo") }} <i class="fa-solid fa-arrow-right-long"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="tab-pane fade py-3" id="sextaSection">
                                    @include("admin.empresas.sections.documentosEmpresa")
                                    <div class="d-flex justify-content-between mt-4">
                                        <button class="btn btn-outline-secondary" data-tab-prev="quintaSection" type="button">
                                            <i class="fa-solid fa-arrow-left-long"></i> {{ __("Anterior") }}
                                        </button>
                                        <div>
                                            <button class="btn btn-danger me-2 d-inline" type="button"
                                                data-cancel-url="{{ route('admin.empresas.index', $filterParams ?? []) }}">
                                                <i class="fa-solid fa-xmark"></i> {{ __("Cancelar") }}
                                            </button>
                                            <button class="btn btn-primary d-inline" type="submit">
                                                <i class="fa-solid fa-user-plus"></i> {{ __("Cadastrar Empresa") }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

@endsection

@push('after-scripts')
    <script src="{{ asset('pmar/js/empresas/form.js') }}" defer></script>
@endpush