@extends('app')
@section('content')

@if(Session::has('flash_message'))
    <div class="alert {{ (Session::has('flash_message_status'))?'alert-error':'alert-success'}}">
        <button class="close" data-dismiss="alert"></button>
        {!! Session::get('flash_message') !!}
    </div>
@endif

@if($errors->any())
    <div class="alert alert-danger">
        @foreach($errors->all() as $error)
            <p>{{ $error }}</p>
        @endforeach
    </div>
@endif

<div class="page-title"> <a href="{{ URL::previous() }}"><i class="icon-custom-right"></i></a>
    <h3> اخبار الوفيات <!-- {{$deathnews->is_announcement==0 ? 'اخبار ' : 'Announcement'}} --> - {{$request_type=='Add' ? 'أضافة' : 'تحرير'}}</h3>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="grid simple">
            <div class="grid-title no-border">
            </div>
            <div class="grid-body no-border"> <br>
                <div class="form-wizard-steps m-b-60 col-md-10 col-md-offset-1">
                    <ul class="wizard-steps">
                        <li class="complete" data-target="#step1"> <a href="#tab1" class='tab1' data-toggle="tab"> <span class="step"><i class="fa fa-check"></i></span> <span class="title">الشخص المتوفي</span> </a> </li>
                        <li data-target="#step2" class="complete"> <a href="#tab2" class='tab2' data-toggle="tab"> <span class="step"><i class="fa fa-check"></i></span> <span class="title">الذرية</span> </a> </li>
                        <li data-target="#step3" class="complete"> <a href="#tab2" class='tab2' data-toggle="tab"> <span class="step"><i class="fa fa-check"></i></span> <span class="title">الموقع</span> </a> </li>
                        <li data-target="#step4" class="active"> <a href="#tab3" class='tab3 last' data-toggle="tab"> <span class="step">4</span> <span class="title">معلومات إتصال العزاء </span> </a> </li>
                        <li data-target="#step5" class=""> <a href="#tab5" class='tab5' data-toggle="tab"> <span class="step">5</span> <span class="title">الملخص<br></span> </a> </li>
                    </ul>
                    <div class="clearfix"></div>
                </div>

                 <!-- Show save btn if request is in edit -->

                <div class="form-actions" style="margin-left: -13px !important; margin-right: -13px !important; padding-bottom: 0 !important; background: none;">
                    <div class="pull-left">
                        @if($request_type=='Edit')
                            <a href="javascript:void(0)" class="btn btn-primary btn-cons" id="save_news">حفظ</a>
                        @endif
                    </div>
                    <div class="pull-right">
                        <div class="pull-right">
                            {!! Form::submit('التالي', ['class' => 'btn btn-info btn-cons btn-submit', 'onclick'=>'$("#addcontacts_form").trigger("submit");']) !!}
                        </div>
                        <a href="{{ URL::route('admin.deathnews.addlocations',['deathnews'=>$deathnews->id,'q'=>$request_type])}}" class="btn btn-info btn-cons pull-right">السابق</a>
                    </div>
                </div>
                <br><br>

                {!! Form::model($deathnews,['route'=>['deathnews.addcontacts','deathnews'=>$deathnews->id,'q'=>$request_type],'method'=>'PUT', 'id'=>'addcontacts_form']) !!}
                <input type="hidden" name="save_now" id="save_now" value="false"/>

                <div class="row">
                    <div class="col-md-2 col-md-12">

                    </div>
                    <div class="col-md-8 col-md-12">
                        <h3 class="text-center">الاتصال</h3>
                    </div>
                    <div class="col-md-2 col-md-12">

                    </div>

                </div>

                <div class="row form-group">
                    <div class="col-md-12">
                        <h4>بريد العزاء الالكتروني</h4>
                    </div>
                    <div class="col-md-7 col-md-offset-5 col-sm-12">
                        <div class="location_time_box p-r-15"  id="contact_email_box" style="{{ $deathnews->contact_email!='' ? '' : 'display: none;' }}">
                            <div class="row ">
                                <div class=" right col-md-8 col-md-offset-4 col-sm-12">
                                    <a href="javascript:void(0)" style="float: right; font-size: 25px;" class="" onclick="toggleContactEmail(true)"><i class="fa fa-times"></i></a>
                                </div>

                                <div class="col-md-7 col-md-offset-2 form-group">
                                    {!! Form::email('contact_email',null,['id'=>'contact_email','class'=>'form-control','placeholder'=>'me@domain.com', 'oninvalid'=>'InvalidMsg(this)','oninput'=>'InvalidMsg(this)']) !!}
                                    <span class="help">يجب إدخال بريد بطريقة صحيحة</span>
                                    <br><span class="help"><span id="contact_email_char_count">30</span> @lang('helpers.char_count_text')</span><br>
                                </div>
                                <div class="col-md-2">
                                    <label class="control-lable">البريد الالكتروني</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <a href="javascript:void(0)" onclick="toggleContactEmail(false)" class="btn btn-primary btn-cons" id="contact_email_btn" style="{{ $deathnews->contact_email=='' ? '' : 'display: none;' }}">اضف بريد الكتروني</a>
                    </div>
                </div>

                <div class="row form-group">
                    <div class="col-md-12">
                        <h4>هاتف عزاء الرجال</h4>
                    </div>
                    <div class="col-md-7 col-md-offset-5 col-sm-12">
                        <div class="location_time_box p-r-15"  id="male_contact_box" style="{{ $deathnews->male_contact!='' ? '' : 'display: none;' }}">
                            <div class="row ">
                                <div class=" right col-md-8 col-md-offset-4 col-sm-12">
                                    <a href="javascript:void(0)" style="float: right; font-size: 25px;" class="" onclick="toggleMaleContact(true)"><i class="fa fa-times"></i></a>
                                </div>

                                <div class="col-md-7 col-md-offset-2 form-group">
                                    {!! Form::text('male_contact',null, ['id'=>'male_contact', 'class'=>'form-control', 'pattern'=>'[0-9]{1,}', 'title'=>'Phone number can only contain numbers','placeholder'=>'966XXXXXXXXX', 'oninvalid'=>'InvalidMsg(this)','oninput'=>'InvalidMsg(this)']) !!}
                                    <!-- <span class="help">قم بإدخال رقم هاتف الذي يمكن الاتصال بالأعضاء الذكور</span>
                                    <br> -->
                                    <span class="help"><span id="male_contact_char_count">12</span> @lang('helpers.char_count_text')</span><br>
                                </div>
                                <div class="col-md-2">
                                    <label class="control-lable">الهاتف </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-12">
                                <a href="javascript:void(0)" onclick="toggleMaleContact(false)" class="btn btn-primary btn-cons" id="male_contact_btn" style="{{ $deathnews->male_contact=='' ? '' : 'display: none;' }}">اضف هاتف عزاء الرجال</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row form-group">
                    <div class="col-md-12">
                        <h4>هاتف عزاء النساء</h4>
                    </div>
                    <div class="col-md-7 col-md-offset-5 col-sm-12">
                        <div class="location_time_box p-r-15"  id="female_contact_box" style="{{ $deathnews->female_contact!='' ? '' : 'display: none;' }}">
                            <div class="row ">
                                <div class=" right col-md-8 col-md-offset-4 col-sm-12">
                                    <a href="javascript:void(0)" style="float: right; font-size: 25px;" class="" onclick="toggleFemaleContact(true)"><i class="fa fa-times"></i></a>
                                </div>

                                <div class="col-md-7 col-md-offset-2 form-group">
                                    {!! Form::text('female_contact',null, ['id'=>'female_contact', 'class'=>'form-control', 'pattern'=>'\d{1,}', 'title'=>'Phone number can only contain numbers','placeholder'=>'966XXXXXXXXX', 'oninvalid'=>'InvalidMsg(this)','oninput'=>'InvalidMsg(this)']) !!}
                                    <!-- <span class="help">قم بإدخال رقم هاتف الذي يمكن الاتصال بأفراد الأسرة الإناث</span>
                                    <br> -->
                                    <span class="help"><span id="female_contact_char_count">12</span> @lang('helpers.char_count_text')</span><br>
                                </div>
                                <div class="col-md-2">
                                    <label class="control-lable">الهاتف </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-12">
                                <a href="javascript:void(0)" onclick="toggleFemaleContact(false)" class="btn btn-primary btn-cons" id="female_contact_btn" style="{{ $deathnews->female_contact=='' ? '' : 'display: none;' }}">اضف هاتف عزاء النساء</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-actions" style="margin-bottom: -13px !important; margin-left: -13px !important; margin-right: -13px !important; background-color: #f6f7f8;">

                <a href="{{ URL::route('admin.deathnews.index')}}" class="btn btn-default btn-cons">إلغاء</a>
                    {!! Form::submit('التالي', ['class' => 'btn btn-info btn-cons pull-right','id' => 'btn-submit']) !!}
                    <a href="{{ URL::route('admin.deathnews.addlocations',['deathnews'=>$deathnews->id,'q'=>$request_type])}}" class="btn btn-info btn-cons pull-right">السابق</a>
                </div>
                {!! Form::close() !!}

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

<script type="text/javascript">

    function InvalidMsg(textbox) {
        var placeholder = textbox.placeholder;
        if(placeholder == 'me@domain.com'){
            var regex =/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            var responce = regex.test(textbox.value);
            console.log(responce)
            if(!responce){
                textbox.setCustomValidity('البريد الالكتروني يفتقد علامة @');
            }else{
            textbox.setCustomValidity('');
            }
            return;
        }
        if(textbox.validity.typeMismatch || textbox.validity.patternMismatch){
            textbox.setCustomValidity(placeholder == 'me@domain.com' ? 'البريد الالكتروني يفتقد علامة @' : 'الرجاء اتباع صيغة الادخال. تقبل الارقام فقط');
        }
        else {
            textbox.setCustomValidity('');
        }
        return true;
    }

    function toggleContactEmail(empty) {
        if (empty) {
            $('#contact_email').val('')
        }
        $('#contact_email_box').toggle();
        $('#contact_email_btn').toggle();
    }

    function toggleMaleContact(empty) {
        if (empty) {
            $('#male_contact').val('');
        }
        $('#male_contact_box').toggle();
        $('#male_contact_btn').toggle();
    }

    function toggleFemaleContact(empty) {
        if (empty) {
            $('#female_contact').val('');
        }
        $('#female_contact_box').toggle();
        $('#female_contact_btn').toggle();
    }

    jQuery('#addcontacts_form').submit(function (event) {
        var pass = true;
        //some validations

        if (pass == false) {
            return false;
        }
        form = this;
        jQuery('#btn-submit').attr('disabled', 'disabled');
        event.preventDefault();
        setTimeout(function () {
            form.submit();
        }, 500);
        jQuery('#progressbar').show();

        return true;
    });
    $(document).ready(function(){
       // on saving redirect to index
        $('#save_news').click(function(e){
            $('#save_now').val('true');
            $('#progressbar').show();
            $('#addcontacts_form').trigger('submit');
        });

        updateCharLimit('contact_email','contact_email_char_count',30);
        $("#contact_email").keyup(function (event) {
            updateCharLimit('contact_email','contact_email_char_count',30);
        });
        updateCharLimit('male_contact','male_contact_char_count',12);
        $("#male_contact").keyup(function (event) {
            updateCharLimit('male_contact','male_contact_char_count',12);
        });
        updateCharLimit('female_contact','female_contact_char_count',12);
        $("#female_contact").keyup(function (event) {
            updateCharLimit('female_contact','female_contact_char_count',12);
        });
    });

</script>
@endsection