@extends("layouts.adminlte")
@section("page-heading")
    Create New Profile
@endsection
@section("content")
    <div class="row">
        <div class="col-md-12">
            <!-- Horizontal Form -->
            <div class="card">
                <!-- form start -->
                <form method="POST" class="form-horizontal from-prevent-multiple-submits" enctype="multipart/form-data"
                      action="{{ route("profile.store") }}">
                    @csrf
                    <div class="card-body">
                        <div class="form-group row">
                            <label for="name" class="col-sm-1 col-form-label">Name</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name"
                                       required>
                            </div>
                            <label for="email" class="col-sm-1 col-form-label">Email</label>
                            <div class="col-sm-3">
                                <input type="email" class="form-control" id="email" placeholder="Enter Email" name="email"
                                       required>
                            </div>
                            <label for="password" class="col-sm-1 col-form-label">Password</label>
                            <div class="col-sm-3">
                                <input type="password" class="form-control" id="password" placeholder="Enter Password"
                                       name="password" value="password">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="dob" class="col-sm-1 col-form-label">DOBirth</label>
                            <div class="col-sm-3">
                                <div class="input-group date" id="dob" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input" id="dob"
                                           data-target="#dob" name="dob"/>
                                    <div class="input-group-append" data-target="#dob"
                                         data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                            <label for="doj" class="col-sm-1 col-form-label">DOJoining</label>
                            <div class="col-sm-3">
                                <div class="input-group date" id="doj" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input" id="doj"
                                           data-target="#doj" name="doj"/>
                                    <div class="input-group-append" data-target="#doj"
                                         data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                            <label for="hb_id" class="col-sm-1 col-form-label">HLife ID</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="hb_id" placeholder="Enter Herbalife ID"
                                       name="hb_id">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="gender" class="col-sm-1 col-form-label">Gender</label>
                            <div class="col-sm-3">
                                <select class="form-control" name="gender" id="gender" required>
                                    <option value="">---Select Gender---</option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>
                            <label for="mobile" class="col-sm-1 col-form-label">Mobile</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="mobile" placeholder="Enter Mobile Number"
                                       name="mobile">
                            </div>
                            <label for="occupation" class="col-sm-1 col-form-label">Work</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="occupation" placeholder="Enter Occupation"
                                       name="occupation">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="address" class="col-sm-1 col-form-label">Address</label>
                            <div class="col-sm-11">
                                <input type="text" class="form-control" id="address" placeholder="Enter Address"
                                       name="address">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="" class="col-sm-1 col-form-label">Photo 1</label>
                            <div class="col-sm-5">
                                <input type="file" class="" id="" accept="image/*" name="photo1">
                            </div>
                            <label for="" class="col-sm-1 col-form-label">Photo 2</label>
                            <div class="col-sm-5">
                                <input type="file" class="" id="" accept="image/*" name="photo2">
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary from-prevent-multiple-submits">Create</button>
                    </div>
                    <!-- /.card-footer -->
                </form>
            </div>
            <!-- /.card -->
        </div>
    </div>
@endsection

@section("scripts")
    <script>
        $(function () {
            //Date picker
            $('#dob').datetimepicker({
                format: 'L'
            });
            $('#doj').datetimepicker({
                format: 'L'
            });
        })
    </script>
@endsection