@extends('layouts.main_without_top_button')
@section('title')
    Settings
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="">Settings</a> <span class="divider">/</span></li>
        <li class="active">Company Settings</li>
    </ul>
@stop
@section('contentinner')
    <style type="text/css">
        input.invalid, textarea.invalid {
            border: 2px solid red;
        }

        input.valid, textarea.valid {
            border: 2px solid green;
        }
    </style>
    <div class="tabbable">
        @include('settings.company.includes.company_modals')
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="row-fluid">
                    <div class="span12">

                        <div class="mediamgr">
                            <div class="mediamgr_left">

                                <div class="mediamgr_category">
                                    <ul>
                                        <li class="current"><a href="#">Company Profile</a></li>
                                        {{--<li class="pull-right"><a href="#"><span class="icon-plus"></span> Add Route</a></li>--}}
                                    </ul>
                                </div><!--mediamgr_category-->

                                <form id="company_profile_form" files="true">
                                    <div class="row-fluid">
                                        <div class="span5">
                                            <div class="par control-group">
                                                <label class="control-label" for="company_name">Company Name</label>

                                                <div class="controls">
                                                    <input type="text" name="company_name" id="company_name"
                                                           placeholder="Company Name"
                                                           value="{{$company->company_name}}"
                                                           class="span12 company_name"/>
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label" for="company_address">Address</label>
                                                <!-- <div class="controls"> -->
                                                <input type="text" name="company_address" id="company_address"
                                                       placeholder="Company Address"
                                                       value="{{$company->company_address}}"
                                                       class="span12 address"/>
                                                <!-- </div> -->
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label" for="company_address">City</label>
                                                <!-- <div class="controls"> -->
                                                <input type="text" name="city" id="city"
                                                       placeholder="Company Location"
                                                       value="{{$company->city}}" class="span12 city"/>
                                                <!-- </div> -->
                                            </div>
                                            <div class="par control-group">
                                                <label class="control-label" for="company_email">Company Logo
                                                    Upload</label>

                                                <div class="controls">
                            <span class="field">
                                <input type="file" class="uniform-file span12" name="userfile" class="pictureUpload"
                                       id="pictureUpload"
                                       onchange="readURL(this);"/>
                            </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="span6">
                                            <div class="par control-group">
                                                <label class="control-label" for="compny_phone">Phone Number</label>

                                                <div class="controls">
                                                    <input type="text" name="compny_phone" id="compny_phone"
                                                           placeholder="Company Phone Number"
                                                           value="{{$company->compny_phone}}"
                                                           class=" span12 phone_number"/>
                                                </div>
                                            </div>
                                            <div class="par control-group">
                                                <label class="control-label" for="company_email">Email</label>

                                                <div class="controls">
                                                    <input type="email" name="company_email" id="company_email"
                                                           placeholder="Company Email"
                                                           value="{{$company->company_email}}"
                                                           class=" span12 email"/></div>
                                            </div>
                                            <div class="par control-group">
                                                <label class="control-label" for="company_website">Website</label>

                                                <div class="controls">
                                                    <input type="text" name="company_website" id="company_website"
                                                           placeholder="Company Website"
                                                           value="{{$company->company_website }}"
                                                           class=" span12 website"/></div>
                                            </div>
                                            <div class="par control-group">
                                                <label class="control-label" for="company_email">Image</label>

                                                <div class="controls">
                                                    <img id="image_logo" src="{{asset('img/company_logo.png')}}"
                                                         alt=""
                                                         class="img-polaroid thumbnail"/>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </form>


                            </div><!--mediamgr_left -->

                        </div><!--mediamgr-->
                    </div><!--span12-->
                </div><!--row-fluid-->
            </div><!--row-fluid-->
        </div><!--row-fluid-->
    </div><!--tabbable-->



    <script type="text/javascript">
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    jQuery('#image_logo')
                            .attr('src', e.target.result)
                            .width(250)//  ×
                            .height(100);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
        jQuery(document).ready(function () {
            jQuery('#company_name').on('input', function () {
                var input = jQuery(this);
                var is_name = input.val();
                if (is_name) {
                    input.removeClass("invalid").addClass("valid");
                }
                else {
                    input.removeClass("valid").addClass("invalid");
                }
            });
            jQuery('#compny_phone').on('input', function () {
                var input = jQuery(this);
                var is_name = input.val();
                if (is_name) {
                    input.removeClass("invalid").addClass("valid");
                }
                else {
                    input.removeClass("valid").addClass("invalid");
                }
            });
            jQuery('#company_address').on('input', function () {
                var input = jQuery(this);
                var is_name = input.val();
                if (is_name) {
                    input.removeClass("invalid").addClass("valid");
                }
                else {
                    input.removeClass("valid").addClass("invalid");
                }
            });
            //
            <!--Email must be an email -->
            jQuery('#company_email').on('input', function () {
                var input = jQuery(this);
                var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
                // var re = /^[a-zA-Z0-9.!#$%&'*+=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
                var is_email = re.test(input.val());
                if (is_email) {
                    input.removeClass("invalid").addClass("valid");
                }
                else {
                    input.removeClass("valid").addClass("invalid");
                }
            });
            //
            <!--Website must be a website -->
            jQuery('#company_website').on('input', function () {
                var input = jQuery(this);
                if (input.val().substring(0, 4) == 'www.') {
                    input.val('http://www.' + input.val().substring(4));
                }
                var re = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/;
                var is_url = re.test(input.val());
                if (is_url) {
                    input.removeClass("invalid").addClass("valid");
                }
                else {
                    input.removeClass("valid").addClass("invalid");
                }
            });
        });
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery("#company_name ,#company_address ,#city ,#pictureUpload ,#compny_phone ,#company_email ,#company_website").change(function () {
                jQuery("#company_profile_form").submit();
            });

            jQuery('#company_profile_form').on('submit', (function (e) {
                e.preventDefault();
                var formData = new FormData(this);

                jQuery.ajax({
                    type: 'POST',
                    url: "{{route('settings.company.store')}}",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        if (data == 'DONE') {
                            jQuery.jGrowl('{!! HTML::image('img/truck.png') !!} COMPANY DETAILS UPDATED SUCCESSFUL ', {
                                theme: 'contrastBorder',
                                sticky: true
                            });
                            jQuery('#vendors-list').dataTable().fnFilter(this.value);
                        } else if (data == 'FAIL') {
                            alert("FAIL TO UPDATE COMPANY DETAILS.");
                        }
                    },
                    error: function (data) {
                        console.log("error");
                        console.log(data);
                    }
                });
            }));
        });
    </script>
@stop