@extends('layouts.back')

@section('titulo', 'Leads')

@section('page_header','Painel')

@section('breadcrumbs')
@if(isset($item->id))
@breadcrumbs(["itens" => ["Leads" => route('leads.index'), "Editar Lead #" . $item->id => ""]])
@else
@breadcrumbs(["itens" => ["Leads" => route('leads.index'), "Criar Lead" => "" ]])
@endif
@endsection

@push('custom-css')
    <link rel="stylesheet" href="{{ asset('adm/assets/css/time_line.css')}}" />
    <link rel="stylesheet" href="{{ asset('adm/assets/css/custom.css')}}" />
@endpush

@section('content')
    <div class="row">
        <div class="col-lg-12">

            @component('components.outros.botoes-padroes-topo', ['route' => 'leads', 'item' => $item])
            @endcomponent

            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{isset($item->id) ? 'Editar Lead' : 'Novo Lead'}}</h4>
                </div>

                <form action="{{isset($item->id) ? route('leads.update', $item->id) : route('leads.store')}}" method="post" class="form-horizontal form-bordered" enctype="multipart/form-data" id="form-principal">
                    @csrf

                    <input type="hidden" name="user_id" id="user_id" value="{{Auth::user()->id}}">

                    <div class="card-body">

                        @component('components.outros.alerta-erros', compact('errors'))
                        @endcomponent

                        {{ $item->id ? method_field('PATCH') : "" }}

                        <div class="tabs">
                            <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
                                @if($item->id)
                                    <li class="nav-item active">
                                        <a href="#detalhes" class="nav-link" data-toggle="tab" role="tab">
                                            <span class="d-none d-md-block"><i class="fa fa-exclamation-circle text-danger {{$errors->has('*') ? '' : 'd-none'}} error-alert"></i> Detalhes</span><span class="d-block d-md-none"><i class="mdi mdi-home-variant h5"></i></span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#follow_up" class="nav-link active" data-toggle="tab" role="tab">
                                            <span class="d-none d-md-block">Follow-up</span><span class="d-block d-md-none"><i class="mdi mdi-home-variant h5"></i></span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#linha_tempo" class="nav-link reload-timeline" data-toggle="tab" role="tab" data-lead="{{$item->id}}">
                                            <span class="d-none d-md-block">Linha do Tempo</span><span class="d-block d-md-none"><i class="mdi mdi-home-variant h5"></i></span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#agendar" class="nav-link" data-toggle="tab" role="tab">
                                            <span class="d-none d-md-block">Agendar</span><span class="d-block d-md-none"><i class="mdi mdi-home-variant h5"></i></span>
                                        </a>
                                    </li>
                                @else
                                    <li class="nav-item">
                                        <a href="#detalhes" class="nav-link active" data-toggle="tab" role="tab">
                                            <span class="d-none d-md-block"><i class="fa fa-exclamation-circle text-danger {{$errors->has('*') ? '' : 'd-none'}} error-alert"></i> Detalhes</span><span class="d-block d-md-none"><i class="mdi mdi-home-variant h5"></i></span>
                                        </a>
                                    </li>
                                @endif
                            </ul>

                            <div class="tab-content">

                                <div id="detalhes" class="tab-pane p3 {{ $item->id ? '' : 'active'}}">
                                    @component('components.leads.cards.contatos', ['item' => $item, 'consultores' => $consultores])
                                    @endcomponent

                                    @component('components.leads.cards.clientes', ['item' => $item, 'estados' => $estados, 'etapas' => $etapas, 'consultores' => $consultores])
                                    @endcomponent

                                    <footer class="panel-footer mt-3">
                                        <div class="col-md-12">
                                            <button type="submit" class="btn btn-success waves-effect waves-light" id="salvar-follow-up">Salvar</button>
                                            <a href="{{route('leads.index')}}" class="btn btn-secondary waves-effect">Cancelar</a>
                                        </div>
                                    </footer>

                                </div>

                                @if($item->id)
                                    <div id="follow_up" class="tab-pane p3 active">
                                        @component('components.leads.abas.follow-up', ['interacoes' => $interacoes, 'interacoes_lead' => $item->interacoes, 'lead_id' => $item->id])
                                        @endcomponent
                                    </div>

                                    <div id="linha_tempo" class="tab-pane p3">
                                        @component('components.leads.abas.linha-do-tempo', ['lead_id' => $item->id])
                                        @endcomponent
                                    </div>

                                    <div id="agendar" class="tab-pane p3">
                                        @component('components.leads.abas.agendar', ['interacoes' => $interacoes, 'lead_id' => $item->id])
                                        @endcomponent
                                    </div>

                                @endif

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

@endsection

@push('footer_imports_end')
    <!-- Bootstrap inputmask js -->
    <script src="{{ asset('plugins/bootstrap-inputmask/bootstrap-inputmask.min.js') }}"></script>
    <script src="{{ asset('adm/assets/js/leads.js') }}"></script>
    <script src="{{asset('js/mascara.js') }}"></script>
    <script src="{{asset('js/validations/adm/valida.generico.js') }}"></script>
    <script src="{{asset('js/validations/adm/valida.formas-pagamento.js') }}"></script>
@endpush

@push('js')
    <script type="text/javascript">

        //gerando TOKEN automaticamente
        $.ajaxSetup({
            headers:{
                'X-CSRF-TOKEN':"{{ csrf_token()}}"
            }
        });

        $(function() {

            if($('#nao_isento').prop("checked") == true){
                $("#ie").prop('required',true);
            }

            carregarCidades($('#estado').val(),'cidade',{{$item->cidade_id}});

        });

    </script>
@endpush