@extends('sysadmin.layouts.app')
@section('custom-css')
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <style>
        .ui-selectmenu-button.ui-button-BUTTON {
            background: white;
            padding-top: 10px;
            padding-bottom: 10px;
            border-radius: 0;
            border: 1px solid #e5e6e7!important;
            width: 100%;
        }
        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
            background: white;
            padding-top: 10px;
            padding-bottom: 10px;
            border-radius: 0;
            border: 1px solid #e5e6e7!important;
            width: 100%!important;
            outline: none;
        }
        .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{
            /*background: white;*/
            padding-top: 10px;
            padding-bottom: 10px;
            border-radius: 0;
            border: 1px solid #e5e6e7!important;
            width: 100%!important;
            outline: none;
        }
    </style>
    <script>
        $( function() {
            $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
                _renderItem: function( ul, item ) {
                    var li = $( "<li>" ),
                        wrapper = $( "<div>", { text: item.label } );

                    if ( item.disabled ) {
                        li.addClass( "ui-state-disabled" );
                    }

                    $( "<span>", {
                        style: item.element.attr( "data-style" ),
                        "class": "ui-icon " + item.element.attr( "data-class" )
                    })
                        .appendTo( wrapper );

                    return li.append( wrapper ).appendTo( ul );
                }
            });

            $( "#transportType" )
                .iconselectmenu()
                .iconselectmenu( "menuWidget")
                .addClass( "ui-menu-icons avatar" );
        } );
    </script>
    <style>
        h2 {
            margin: 30px 0 0 0;
        }
        fieldset {
            border: 0;
        }
        label {
            display: block;
        }

        /* select with custom icons */
        .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
            padding: 0.5em 0 0.5em 3em;
        }
        .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
            height: 24px;
            width: 24px;
            top: 0.1em;
        }

        /* select with CSS avatar icons */
        option.avatar {
            background-repeat: no-repeat !important;
            padding-left: 20px;
        }
        .avatar .ui-icon {
            background-position: left top;
        }
    </style>

@endsection
@section('post-header')
    <div class="breadcome-area">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="breadcome-list">
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <div class="breadcome-heading">
                                    <form role="search" class="sr-input-func">
                                        <input type="text" placeholder="Search..." class="search-int form-control">
                                        <a href="#"><i class="fa fa-search"></i></a>
                                    </form>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                <ul class="breadcome-menu">
                                    <li><a href="#">Dashboard</a> <span class="bread-slash">/</span>
                                    </li>
                                    <li><span class="bread-blod">Add Driver</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('content')
    <div class="single-pro-review-area mt-t-30 mg-b-15">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-md-offset-2">
                    <div class="product-payment-inner-st">
                        <ul id="myTabedu1" class="tab-review-design">
                            <li class="active"><a href="#description">Driver Information</a></li>
                        </ul>
                        <div id="myTabContent" class="tab-content custom-product-edit">
                            <div class="product-tab-list tab-pane fade active in" id="description">
                                <div class="row">
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <div class="review-content-section">
                                            <div id="dropzone1" class="pro-ad">
                                                <form action="{{route('sysadmin.drivers.store')}}" method="POST" class="dropzone dropzone-custom needsclick add-professors" >
                                                    {{ csrf_field() }}
                                                    <div class="row">
                                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                            <div class="form-group {{ $errors->has('name') ? ' has-error' : '' }}">
                                                                <input name="name" type="text" class="form-control" placeholder=" Name">
                                                                @if ($errors->has('name'))
                                                                <span class="help-block">
                                                                    <strong>{{ $errors->first('name') }}</strong>
                                                                </span>
                                                                @endif
                                                            </div>
                                                            <div class="form-group {{ $errors->has('surname') ? ' has-error' : '' }}">
                                                                <input name="surname" type="text" class="form-control" placeholder="Surname">
                                                                @if ($errors->has('surname'))
                                                                <span class="help-block">
                                                                    <strong>{{ $errors->first('surname') }}</strong>
                                                                </span>
                                                                @endif
                                                            </div>
                                                            <div class="form-group {{ $errors->has('email') ? ' has-error' : '' }}">
                                                                <input name="email" type="email" class="form-control" placeholder="E-mail">
                                                                @if ($errors->has('email'))
                                                                <span class="help-block">
                                                                    <strong>{{ $errors->first('email') }}</strong>
                                                                </span>
                                                                @endif
                                                            </div>
                                                            <div class="form-group {{ $errors->has('password') ? ' has-error' : '' }}">
                                                                <input name="password" type="password" class="form-control" placeholder="Password">
                                                                @if ($errors->has('password'))
                                                                    <span class="help-block">
                                                                    <strong>{{ $errors->first('password') }}</strong>
                                                                </span>
                                                                @endif
                                                            </div>

                                                        </div>
                                                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                                            <div class="form-group {{ $errors->has('phone') ? ' has-error' : '' }}">
                                                                <input name="phone" type="number" class="form-control" placeholder="Mobile no.">
                                                                @if ($errors->has('phone'))
                                                                    <span class="help-block">
                                                                    <strong>{{ $errors->first('phone') }}</strong>
                                                                </span>
                                                                @endif
                                                            </div>
                                                            <div class="form-group">
                                                                <input name="address" type="text" class="form-control" placeholder="Address">
                                                            </div>
                                                            <div class="form-group">
                                                                <input name="addressdetails" type="text" class="form-control" placeholder="Address Details">

                                                            </div>
                                                            <div class="form-group {{ $errors->has('transportType') ? ' has-error' : '' }}">
                                                                {{--<fieldset>--}}
                                                                    {{--<label for="people">Select a Person:</label>--}}
                                                                    {{--<select name="people" id="people">--}}
                                                                       {{--</select>--}}
                                                                {{--</fieldset>--}}
                                                                <select name="transportType" id = "transportType" class="form-control">
                                                                    <option value="none" selected="" disabled="">Select Transport Type</option>
                                                                    <option value="0" data-class="avatar" data-style="background-image: url(&apos;{{asset('admin/img/biciklete.svg')}}&apos;);">Bicycle</option>
                                                                    <option value="1" data-class="avatar" data-style="background-image: url(&apos;{{asset('admin/img/motor.svg')}}&apos;);">Motorcycle</option>
                                                                    <option value="2" data-class="avatar" data-style="background-image: url(&apos;{{asset('admin/img/makine.svg')}}&apos;);">Car</option>
                                                                </select>
                                                                @if ($errors->has('transportType'))
                                                                    <span class="help-block">
                                                                    <strong>{{ $errors->first('transportType') }}</strong>
                                                                </span>
                                                                @endif
                                                            </div>

                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <div class="pull-right">
                                                                <a href="{{route('sysadmin.drivers.index')}}"  class="btn theme-btn">Back to List</a>
                                                                <button type="submit" class="btn btn-primary waves-effect waves-light">Submit</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"></div>
            </div>
        </div>
    </div>
@endsection