@extends('layouts.app')

@section('content')
    <div class="container-fluid">
     <div class="row-fluid">
        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
        <h3 class="page-title">
            Create New Supplier
        </h3>
        <ul class="breadcrumb">
            <li>
                <i class="icon-home"></i>
                <a href="#">Dashboard</a> 
                <i class="icon-angle-right"></i>
            </li>
            <li><a href="#">Masters</a><i class="icon-angle-right"></i></li>
            <li><a href="#">Suppliers</a></li>
            
        </ul>
        <!-- END PAGE TITLE & BREADCRUMB-->
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <a href="{{ url('/admin/supplier') }}" title="Back"><button class="btn green btn-xs"><i class="m-icon-swapleft m-icon-white" aria-hidden="true"></i> Back</button></a>
                        <br />
                        <br />

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

                        {!! Form::open(['url' => '/admin/supplier/create','id'=>'myform','class' => 'form-vertical', 'files' => true]) !!}

                        @include ('admin.supplier.form')

                        {!! Form::close() !!}

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="myModal" class="modal span4 hide fade">
        {!! Form::open(['method' => 'POST', 'id'=>'locationform','class' => 'form-vertical', 'novalidate' => 'novalidate'])  !!}
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h3>Add Location</h3>
        </div>
        <div class="modal-body">
            <table class="table table-bordered">
                <thead>
                    <th class="text-center">Location</th>
                    <th class="text-center"><button type="button" class="btn blue add-row">Add</button></th>
                </thead>
                <tbody class="newRowBody">
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <button type="submit" id="saveLocationBtn" class="btn blue mutltiple-loc-add-btn">Save</button>
        </div>
        {!! Form::close() !!}
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function () {
    jQuery('#myform').validate( {
            highlight: function(element) {
                jQuery(element).closest('.control-group').addClass('error');
                jQuery(element).closest('.control-group').addClass('error');
            },
            unhighlight: function(element) {
                jQuery(element).closest('.control-group').removeClass('error');
            },
            errorElement: 'span',
            errorClass: 'help-block',
            focusInvalid: false, // do not focus the last invalid input
            ignore: "", // validate all fields including form hidden input
            rules: {
                'name': {
                   required: true,
                },
                'company_name': {
                   required: true,
                },
                'phone_no': {
                   required: true,
                },
                'landLine_no': {
                  required: true,
                },
                'service': {
                  required: true,
                },
                'status': {
                   required: true,
                },
                'country': {
                   required: true,
                },
           },
           errorPlacement: function (error, element) {
                if(element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
           },
           messages: {
                'name' : {
                    required: "The name field is required",
                },
                'company_name': {
                   required: "The company name field is required",
                },
                'phone_no': {
                   required: "The phone no field is required",
                },
                'landLine_no': {
                   required: "The landline no field is required",
                },
                'fax_no': {
                   required: "The fax no field is required",
                },
                'email': {
                   required: "The email field is required",
                   email : "Enter Valid email address",
                },
                'website': {
                   required: "The website field is required",
                   url : "Enter valid url address eg http://www.xyz.com",
                },
                'service': {
                   required: "The service field is required",
                },
                'status' : {
                   required: "The status field is required",
                },        
            }
       });

        $('#locationform').validate({
            submitHandler(form, event) {
                event.preventDefault();

                var location_array = [];

                $(".locationclass").each(function() {
                    var location = $(this).val();
                    location_array.push(location);
                });

                // $('#location').val(location_array);

                $("#myModal").modal("toggle")

                var store_location_url = "{{ route('admin.supplier.location_store') }}";

                $.ajax({
                    url: store_location_url,
                    type: 'POST',
                    data: {"location" : location_array},
                    headers: {
                        'X-CSRF-TOKEN': '{{csrf_token()}}'
                    },
                    success:function(response) {
                        if (response.status == 'success') {
                            alert("Locations added");
                            window.location.reload();
                        }
                        else
                        {
                            alert(response.message);
                        }
                    }
                });
            }
        });

        $('.js-select-type-multiple').select2({
            placeholder: "Select Location"
        });
    });

  </script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#validity_from" ).datepicker({ dateFormat: 'yy-mm-dd' });
  } );

  $( function() {
    $( "#validity_to" ).datepicker({ dateFormat: 'yy-mm-dd' });
  } );
    var counter = 0;
    $(".add-row").click(function(){
        var html = "<tr><td><input type='text' name='location["+counter+"]' class='form-control locationclass' required/></td><td class='text-center'><button type='button' class='btn red delete-row' onclick='delRow(this)'><i class='icon-trash' aria-hidden='true'></i></button></td></tr>";
        $(".newRowBody").append(html);
        counter++;
    });

    function delRow(element)
    {
        $(element).closest('tr').remove();
    }
  </script>
@endsection