@extends('site.layout.layout')

@section('url'){{URL::to('/')}}/{{App::getLocale()}}/page/{{$data['static']->slug}} @stop
@section('title'){{$data['static']->title}} @stop
@section('image'){{URL::to('/')}}/img/750x500/{{$setting->logo}} @stop
@section('description'){{\App\Http\Helpers\Helpers::stringReplace($data['static']->details,3)}} @stop

@section('css')
<style>
.ttm-row.conatact-section {
    padding: 60px 0 100px !important;
}
</style>
@endsection
@section('content')


<div class="ttm-page-title-row">
    <div class="ttm-page-title-row-inner ttm-textcolor-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <div class="page-title-heading">
                        <h2 class="title">{{$data['static']->title}}</h2>
                    </div>
                    <div class="breadcrumb-wrapper">
                        {{-- <span> --}}
                            {{-- <a title="Homepage" href="{{URL::to('/')}}">{{ __('app.home') }}</a> --}}
                        {{-- </span> --}}
                        {{-- <span class="ttm-bread-sep">&nbsp;&gt;&nbsp;</span> --}}
                        {{-- <span class="current">{{$data['static']->title}}</span> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>                    
</div>
<div class="site-main">
    <div class="ttm-row why_choose2-section clearfix">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-7">
                    <div class="ttm-tabs tabs-style-01" data-effect="fadeIn">
                        <ul class="tabs clearfix">
                            <li class="tab active"><a href="#">  تسجيل كالطالب  </a></li>
                            <li class="tab"><a href="#"> تسجيل كمدرب</a></li>
                        </ul>
                        <div class="content-tab">
                            <!-- content-inner -->
                            <div class="content-inner active">
                                <form id="add_student" class="ttm-contactform wrap-form add_student clearfix" method="post" action="">
                                    {{ csrf_field() }}
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>
                                                <span class="text-input with-icon-pos_left"> 
                                                    <i class="fa fa-user"></i>
                                                    <input name="name" class="name" id="name" type="text" value="" placeholder=" الاسم بالكامل  " required="required">
                                                </span>
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <label>
                                                <span class="text-input with-icon-pos_left">
                                                    <i class="fa fa-envelope-o"></i>
                                                    <input name="email" class="email" id="email"  type="email" value="" placeholder=" البريد الإلكتروني" required="required">
                                                </span>
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <label>
                                                <span class="text-input with-icon-pos_left">
                                                    <i class="fa fa-phone"></i>
                                                    <input name="mobile" onkeypress="return isNumberKey(event)" class="mobile" id="mobile" type="text" value="" placeholder=" رقم الجوال " required="required"  maxlength="10">
                                                </span>
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <label>
                                                <span class="text-input with-icon-pos_left">
                                                    <i class="fa fa-calender"></i>
                                                    <input name="dob" class="dob" id="dob" type="date" value="" placeholder=" تاريخ الميلاد " required="required">
                                                </span>
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <label>
                                                <span class="text-input with-icon-pos_left">
                                                    <i class="fa fa-lock"></i>
                                                    <input name="password" class="password" id="password" type="password" value="" placeholder=" كلمة المرور " required="required">
                                                </span>
                                            </label>
                                        </div>

                                        <div class="col-md-6">
                                            <label>
                                                <span class="text-input with-icon-pos_left">
                                                    {{-- <i class="fa fa-lock"></i> --}}
                                                    <select name="degree" id="degree" class="degree" required="required" >
                                                        <option value=""> اختر المرحلة الدراسية </option>
                                                        @foreach ( $data['Degree'] as $item)
                                                            <option value="{{ $item->id }}"> {{ $item->name }}</option>
                                                            
                                                        @endforeach
                                                        

                                                    </select>
                                                    {{-- <input name="password" class="password" id="password" type="password" value="" placeholder=" كلمة المرور " required="required"> --}}
                                                </span>
                                            </label>
                                        </div>
                                        <div class="col-md-12 mb-30">
                                            <div class="g-recaptcha" data-sitekey="6LdAzvcpAAAAABOdQCnQp9Xx2sdOlnxlU8hfeoOv"></div>
                                            <script src='https://www.google.com/recaptcha/api.js'></script>
                                        </div>

                                    </div>
                                  
                                    <button class="w-20 submit ttm-btn ttm-btn-size-md ttm-btn-shape-square ttm-btn-style-border ttm-btn-color-dark" type="submit"> تسجيل  </button>
                                </form>
                               
                            </div><!-- content-inner end-->
                            <!-- content-inner -->
                            <div class="content-inner" style="display: none;">
                                <form id="add_trainer" class="ttm-contactform wrap-form add_trainer clearfix" method="post" action="#">
                                    {{ csrf_field() }}
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label>
                                                <span class="text-input with-icon-pos_left"> 
                                                    <i class="fa fa-user"></i>
                                                    <input name="name" class="name" id="name" type="text" value="" placeholder=" الاسم بالكامل  " required="required">
                                                </span>
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <label>
                                                <span class="text-input with-icon-pos_left">
                                                    <i class="fa fa-envelope-o"></i>
                                                    <input name="email" class="email" id="email"  type="email" value="" placeholder=" البريد الإلكتروني" required="required">
                                                </span>
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <label>
                                                <span class="text-input with-icon-pos_left">
                                                    <i class="fa fa-phone"></i>
                                                    <input onkeypress="return isNumberKey(event)" name="mobile" class="mobile" id="mobile" type="text" value="" placeholder=" رقم الجوال " required="required"  maxlength="10">
                                                </span>
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <label>
                                                <span class="text-input with-icon-pos_left">
                                                    <i class="fa fa-calender"></i>
                                                    <input name="dob" class="dob" id="dob" type="date" value="" placeholder=" تاريخ الميلاد " required="required">
                                                </span>
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <label>
                                                <span class="text-input with-icon-pos_left">
                                                    <i class="fa fa-lock"></i>
                                                    <input name="password" class="password" id="password" type="password" value="" placeholder=" كلمة المرور " required="required">
                                                </span>
                                            </label>
                                        </div>
                                        <label>
                                            <span class="text-input with-icon-pos_left">
                                                {{-- <i class="fa fa-note"></i> --}}
                                                <textarea name="note" class="note" id="note" rows="3" placeholder="نبذة عنك " required="required"></textarea>
                                            </span>
                                        </label>


                                        <div class="col-md-12 mb-30">
                                            <div class="g-recaptcha" data-sitekey="6LdAzvcpAAAAABOdQCnQp9Xx2sdOlnxlU8hfeoOv"></div>
                                            <script src='https://www.google.com/recaptcha/api.js'></script>
                                        </div>
                                        

                                    </div>
                                  
                                    <button class="w-20 submit ttm-btn ttm-btn-size-md ttm-btn-shape-square ttm-btn-style-border ttm-btn-color-dark" type="submit"> تسجيل  </button>
                                </form>
                            </div><!-- content-inner end-->
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
</div>
@endsection
@section('js')
    <script>

        function isNumberKey(evt){
            var charCode = (evt.which) ? evt.which : event.keyCode
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }

         $(document).on('submit', '#add_student', function (e) {
                $('#preloader').css('display', '');
                $('#status').css('display', '');
                e.preventDefault();
                var formData = new FormData(this);
                    $.ajax({
                        url: "{{URL::to('/')}}/add_student",
                        type: "post",
                        cache:false,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function (data) {
                            $('#preloader').css('display','none');
                            $('#status').css('display','none');
                            if (data["status"] == true) {
                                Swal.fire({
                                    title: "",
                                    text: data.data,
                                    type: "success",
                                    timer: 2000,
                                });
                                $('#add_student #name').val('');
                                $('#add_student #email').val('');
                                $('#add_student #mobile').val('');
                                $('#add_student #dob').val('');
                                $('#add_student #password').val('');
                                $('#add_student #degree').val('');

                                setTimeout(function(){
                                    window.location.href = "{{URL::to('/')}}/login";
                                }, 1000);

                            } else {
                                if(data["data"]){
    
                                    Swal.fire({
                                    title: "",
                                    html: data.data,
                                    type: "error",
                                    showCancelButton: false,
                                    confirmButtonColor: "#DD6B55",
                                    confirmButtonText: '{{__('lang.ok')}}',
                                    cancelButtonText: '{{__('lang.cancel')}}',
                                    closeOnConfirm: true,
                                    closeOnCancel: true
                                });
    
                                }else{
    
                                var errorMessage = "";
                                for (const error in data["data_validator"]) {
                                    if (data["data_validator"].hasOwnProperty(error)) {
                                        errorMessage += '<p>'+data["data_validator"][error]+'</p>';
                                    }
                                }
                                Swal.fire({
                                    title: "",
                                    html: errorMessage,
                                    type: "error",
                                    showCancelButton: false,
                                    confirmButtonColor: "#DD6B55",
                                    confirmButtonText: '{{__('lang.ok')}}',
                                    cancelButtonText: '{{__('lang.cancel')}}',
                                    closeOnConfirm: true,
                                    closeOnCancel: true
                                });
                                }
    
                            }
                            $('.preloader').css('display', 'none');
                            $('.preloader').css('background-color','#fff');
                        }
                    });
      
        });
        $(document).on('submit', '#add_trainer', function (e) {

                $('#preloader').css('display', '');
                $('#status').css('display', '');

                
                e.preventDefault();
                var formData = new FormData(this);
                    $.ajax({
                        url: "{{URL::to('/')}}/add_trainer",
                        type: "post",
                        cache:false,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function (data) {
                            $('#preloader').css('display','none');
                            $('#status').css('display','none');
                            if (data["status"] == true) {
                                Swal.fire({
                                    title: "",
                                    text: data.data,
                                    type: "success",
                                    timer: 2000,
                                });
                                $('#add_trainer #name').val('');
                                $('#add_trainer #email').val('');
                                $('#add_trainer #mobile').val('');
                                $('#add_trainer #dob').val('');
                                $('#add_trainer #password').val('');
                                $('#add_trainer #note').val('');

                                setTimeout(function(){
                                    window.location.href = "{{URL::to('/')}}/login";
                                }, 1000);

                            } else {
                                if(data["data"]){
    
                                    Swal.fire({
                                    title: "",
                                    html: data.data,
                                    type: "error",
                                    showCancelButton: false,
                                    confirmButtonColor: "#DD6B55",
                                    confirmButtonText: '{{__('lang.ok')}}',
                                    cancelButtonText: '{{__('lang.cancel')}}',
                                    closeOnConfirm: true,
                                    closeOnCancel: true
                                });
    
                                }else{
    
                                var errorMessage = "";
                                for (const error in data["data_validator"]) {
                                    if (data["data_validator"].hasOwnProperty(error)) {
                                        errorMessage += '<p>'+data["data_validator"][error]+'</p>';
                                    }
                                }
                                Swal.fire({
                                    title: "",
                                    html: errorMessage,
                                    type: "error",
                                    showCancelButton: false,
                                    confirmButtonColor: "#DD6B55",
                                    confirmButtonText: '{{__('lang.ok')}}',
                                    cancelButtonText: '{{__('lang.cancel')}}',
                                    closeOnConfirm: true,
                                    closeOnCancel: true
                                });
                                }
    
                            }
                            $('.preloader').css('display', 'none');
                            $('.preloader').css('background-color','#fff');
                        }
                    });
      
        });
        
        
    </script>
@endsection