@extends('layouts.admin.theme')
@section("title", env("APP_NAME") . " :: Novo Músico - Credenciamento")
@section('content')

    <div class="card shadow">

        @php $headLine = "<i class='fa-solid fa-guitar'></i> Novo Músico - Credenciamento"; @endphp

        @include('components.buttons._headLineButtonsBackAdd', [
                        'headLine' => __($headLine),
                        "permission" => "GERENCIADOR_CREDENCIAMENTO_DE_MUSICOS",
                    ])

        <div class="card-body">
            <form action="{{ route("admin.cultura.credenciamentoMusicos.store") }}" method="post" enctype="multipart/form-data">

                @csrf
                @method('post')

                @include("errors.messageFlash")

                <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 bg-success disabled', 'hash' => 'primeiraSection', 'label' => 'Dados de Usuário'],
                            ['class' => 'disabled', 'hash' => 'segundaSection', 'label' => 'Dados Pessoais'],
                            ['class' => 'disabled', 'hash' => 'terceiraSection', 'label' => 'Documentos'],
                            ['class' => 'disabled', 'hash' => 'quartaSection', 'label' => 'Endereço'],
                            ['class' => 'disabled', 'hash' => 'quintaSection', 'label' => 'Arquivos'],
                            ['class' => 'disabled', 'hash' => 'sextaSection', 'label' => 'Carteirinha'],
                        ]
                    ])

                </ul>

                <div class="tab-content">

                    <div class="row">
                        <div class="col-sm-12 col-md-6 d-flex align-items-center justify-content-center">
                            <div class="mb-3">
                                @include('components.tables._openPhoto', [
                                            'asset' => "pmar/assets/img/icons/usuario.png",
                                            'alt' => "Novo usuário",
                                            'title' =>  "Novo usuário",
                                            'text' => 'Visualizar foto',
                                            'index' => 1,
                                            'style' => "width: 200px;",
                                        ])
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6 d-flex align-items-end">
                            <div style="width: 100%">
                            <!-- Campo Foto -->
                                @include('components.inputs._inputType',[
                                            "for" => null,
                                            "label" => "Foto",
                                            "name" => "photo",
                                            "id" => null,
                                            "required" => false,
                                            "type" => 'file',
                                            "old" => null,
                                            "oninput" => null,
                                            "readonly" => true,
                                            "small" => null,
                                            "accept" => 'image/jpeg,image/jpg,image/png,image/gif',
                                        ])
                            </div>
                        </div>
                    </div>
                    <hr/>
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                        <!-- Campo Nome completo -->
                            @include('components.inputs._inputType',[
                                        "for" => null,
                                        "label" => "Nome completo",
                                        "name" => "fullName",
                                        "id" => null,
                                        "required" => true,
                                        "type" => null,
                                        "old" => old('fullName'),
                                        "oninput" => "javascript:this.value = this.value.toLocaleUpperCase('pt-BR').replace(/[^\p{L}\s]+/gu, '').replace(/\s{2,}/g,' ').trimStart()",
                                        "readonly" => false,
                                        "small" => null,
                                    ])
                        </div>
                        <div class="col-sm-12 col-md-6">
                        <!-- Campo CPF -->
                            @include('components.inputs._inputType',[
                                        "for" => null,
                                        "label" => "CPF",
                                        "name" => "cpf",
                                        "id" => null,
                                        "required" => true,
                                        "type" => null,
                                        "old" => old('cpf', session("cpfTmp") ?? "" ),
                                        "oninput" => "javascript:aplicarMascaraCPF(this)",
                                        "readonly" => false,
                                        "small" => null,
                                    ])
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                        <!-- Campo Telefone -->
                            @include('components.inputs._inputType',[
                                        "for" => null,
                                        "label" => "Telefone",
                                        "name" => "phoneNumber",
                                        "id" => null,
                                        "required" => true,
                                        "type" => null,
                                        "old" => old('phoneNumber'),
                                        "oninput" => "javascript:aplicarMascaraTelefone(this)",
                                        "readonly" => false,
                                        "small" => null,
                                    ])
                        </div>
                        <div class="col-sm-12 col-md-6 d-flex align-items-center">
                            <!-- Campo Whatsapp -->
                            @include("components.inputs._checkBoxIsWhatsapp")
                        </div>
                        
                    </div>
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                        <!-- Campo Email -->
                            @include('components.inputs._inputType',[
                                        "for" => null,
                                        "label" => "Email",
                                        "name" => "email",
                                        "id" => null,
                                        "required" => false,
                                        "type" => 'email',
                                        "old" => old('email'),
                                        "oninput" => "javascript:this.value = this.value.toLowerCase()",
                                        "readonly" => false,
                                        "small" => null,
                                        "placeholder" => "nome@email.com",
                                    ])
                        </div>
                        <div class="col-sm-12 col-md-6">
                        <!-- Campo Status -->
                            @include('components.inputs._selectType', [
                                    "for" => "status",
                                    "label" => "Status",
                                    "name" => "status",
                                    "required" => true,
                                    "readonly" => false,
                                    "options" => collect(App\Enums\StatusEnum::cases())
                                        ->mapWithKeys(fn($status) => [$status->name => $status->value])
                                        ->toArray(),
                                    "selected" => old('status', $user->status ?? ''),
                                    "placeholder" => "Selecione o status...",
                                    "small" => "Informe o status atual do usuário.",
                                    "onchange" => null
                                ])
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                        <!-- Campo Senha -->
                            @include('components.inputs._inputType',[
                                        "for" => null,
                                        "label" => "Senha",
                                        "name" => "password",
                                        "id" => null,
                                        "required" => true,
                                        "type" => 'password',
                                        "old" => old('password', 'mudar123'),
                                        "oninput" => null,
                                        "readonly" => true,
                                        "small" => '* A senha padrão é: <strong>mudar123</strong><br>',
                                        "toggleButton" => null,
                                        "inputGroup" => false,
                                    ])
                        </div>
                    </div>
                    <div class="row">
                        <div class="d-flex justify-content-between mt-4">
                            <a class="btn btn-dark" href="{{ route("admin.cultura.credenciamentoMusicos.index") }}">
                                <i class="fa-solid fa-arrow-left-long"></i> {{ __("Sair") }}
                            </a>
                            <button class="btn btn-primary d-inline" type="submit">
                                <i class="fa-solid fa-user-plus"></i> {{ __("Salvar e Prosseguir") }}
                            </button>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>

@endsection