@extends('components.layout')

@section('title', "Contact | ERP POUR TRAITEUR ET CRÉATIONS DE RÉCEPTIONS DE NOUVELLE GÉNÉRATION ")

@section('seo-descr', "L'ERP pour traiteurs et créateurs de réceptions et évènements le plus avancée du marché : CRM, Commercial, Production, Logistique, Commande Fournisseurs, Facturation, Personnel, Boutique en ligne...")
@section('seo-tags', "ERP,traiteur,réception,saas,programme,software,catering,production,logistique")
@section('seo-img', '../../assets/img/img-seo.png')

@section('content')
    
    <main class="dark-menu">
        
        <section>

          <div class="row justify-content-center">
            <div class="col-md-10 col-lg-6"><!-- Form Create account -->
              <style>
                .box--signup {
                    position: relative;
                    height: auto;
                    max-width: none;
                    padding: 2rem;
                    display: block;
                    margin-top: 50px;
                    z-index:1;
                }
              </style>
              <div class="box--signup" id="form-header">
                <div class="cotainer">
                    <div class="title mt-3">
                        Nous Contacter
                    </div>
                    <div class="other_login">
                        <button type="button" class="btn scale btn-loin-google" v-show="!rdv" v-on:click="rdv=true">
                            <i class="tio calendar"></i>
                            Demander un RDV
                        </button>
                        <button type="button" class="btn scale btn-loin-google" v-show="rdv" v-on:click="rdv=false">
                            <i class="tio message_outlined"></i>
                            Nous envoyer un message
                        </button>
                        <div class="line-or">
                            <span class="or">ou</span>
                        </div>
                    </div>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-create" role="tabpanel" aria-labelledby="pills-create-tab">
                            <div class="form-row">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>Votre nom</label>
                                                <input v-model="form.name" type="text" class="form-control" placeholder="Nom..." />
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>Entreprise</label>
                                                <input v-model="form.company" type="text" class="form-control" placeholder="Entreprise..." />
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>Email</label>
                                                <input v-model="form.email" type="email" class="form-control" placeholder="Email..." />
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group">
                                                <label>Téléphone</label>
                                                <input v-model="form.phone" type="text" class="form-control" placeholder="Téléphone..." />
                                            </div>
                                        </div>
                                        <div class="col-lg-6" v-show="rdv">
                                            <div class="form-group">
                                                <label>Date</label>
                                                <input v-model="form.date" type="date" class="form-control" placeholder="Date..." />
                                            </div>
                                        </div>
                                        <div class="col-lg-6" v-show="rdv">
                                            <div class="form-group">
                                                <label>Heure</label>
                                                <input v-model="form.time" type="time" class="form-control" placeholder="Heure..." />
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Message</label>
                                                <textarea v-model="form.message" class="form-control" placeholder="Message..."></textarea>
                                            </div>
                                        </div>
                                        <div class="col-12" v-show="!sent">
                                            <a  v-show="!rdv" v-on:click="formSubmit" class="btn mt-3 rounded-8 c-white btn_md_primary effect-letter bg-blue">Envoyer un message</a>
                                            <a v-show="rdv" v-on:click="formSubmit" class="btn mt-3 rounded-8 c-white btn_md_primary effect-letter bg-blue">Demander un RDV</a>
                                        </div>
                                        <div class="col-12 success" v-show="sent">
                                            <i class="tio checkmark_circle_outlined c-green"></i>
                                            Votre message a été envoyé ! 
                                        </div>
                                        <div class="col-12 mt-5">
                                            <p>
                                                Ou contactez-nous par email : 
                                            </p>
                                            <div class="information_content">
                                                <div class="link_item selecr_mark aos-init aos-animate" data-aos="fade-up" data-aos-delay="300">
                                                    <i class="tio chevron_right"></i>
                                                    <a href="mailto:contact@sextan.io">
                                                        contact@sextan.io
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              </div>
        </div>
      </div>
          
        <script>
            new Vue({
                el:'#form-header',
                data(){
                    var vm = this;
                    return {
                        rdv : false,
                        sent : false,
                        form : {
                            name : null,
                            company : null,
                            email : null,
                            phone : null,
                            date : null,
                            time : null,
                            message : null,
                            type : 'MESSAGE'
                        }
                    }
                },
                watch:{

                },
                methods:{      
                    toNumber(number){
                        return Number(number)
                    },
                    formSubmit() {
                        let vm = this;
                        if (vm.form.email && vm.form.name) {
                            if (vm.rdv) {
                                vm.form.type = 'DEMANDE DE RDV';
                            } else {
                                vm.form.type = 'MESSAGE';
                            }
                            axios.post( "{{url('/')}}/api/email/send",vm.form)
                            .then(async function (response) {   
                                console.log(response);                                                           
                                if(response.data == 'OK'){
                                    vm.sent = true
                                }
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                        } else {
                            alert('Veuillez renseigner tous les champs...')
                        }
                        
                    }
                },
                mounted: async function(){

                    let vm = this
                        
                }
            })            
        </script>
        
        </section>
        
    </main>

@endsection