@extends('backend.layout.master')
@include('backend.profile.css')
@section('content')
    <div class="page-body">
        <div class="container-fluid">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-6 main-header">
                        <h2>Kindergarder<span>Profile </span></h2>

                    </div>
                    <div class="col-lg-6 breadcrumb-right">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#"><i class="pe-7s-home"></i></a></li>
                            <li class="breadcrumb-item">Dashboard</li>
                            <li class="breadcrumb-item active">Profile</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid starts-->
        <div class="container-fluid">


{{--
    <div class="row">
        <div class="col-md-6">
            <div class="card p-1">
                <div class="card-content">
                    <div class="card-title">
                        <h5 class="mb-1">Biographic Details</h5>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mycontainer">
                                <img class="round" width="100%" src="{{$user->profile_photo_url}}">
                                <div class="middle">
                                    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal">
                                        Change
                                    </button>

                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                        <h1>{{ $user->name }}</h1>
                        <p>Email: {{$user->email}}</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card p-1">
                <div class="card-content">
                    <form class="kt-form" onsubmit="return false" action="{!! route('profile.password-change') !!}">
            <div class="kt-portlet__body">
                <div class="kt-section kt-section--first">
                    <h3 class="kt-section__title">Change Password</h3>
                    <div class="kt-section__body">
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">Old Password:</label>
                            <div class="col-lg-6">
                                <input class="form-control" type="password" name="old_password" id="old_password"  placeholder="Enter Your Old Password">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">New Password:</label>
                            <div class="col-lg-6">
                                <input class="form-control " type="password" name="new_password" id="new_password" placeholder="Enter Your New Password">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-3 col-form-label">Re-type New Password:</label>
                            <div class="col-lg-6">
                                <input class="form-control " type="password" name="confirm_password" id="confirm_password" placeholder="Re-type New Password">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="kt-portlet__foot">
                <div class="kt-form__actions">
                    <div class="row">
                        <div class="col-lg-3"></div>
                        <div class="col-lg-6">
                            <button type="reset" class="btn btn-success form_submit">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
                </div>
            </div>
    </div>
    </div>
--}}

    <div class="container-fluid general-widget">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body card-dashboard">
                            @if(session()->has('success'))
                                <div class="alert alert-success">
                                    {{ session()->get('success') }}
                                </div>
                            @endif

                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <form class="kt-form"  id="addkidform" action="{!! route('profile.update-profile') !!}" method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="wizard-4" id="wizard">
                                    <ul>
                                        <li><a href="#step-1">KG Details<small>Step 1</small></a></li>
                                        <li><a href="#step-2">Password & Security<small>Step 2</small></a></li>
                                    </ul>
                                    <div id="step-1" style="height:340px">
                                        <div class="row lt-0" style="max-width: 100%;">

                                            <div class="col-sm-12 col-md-12">
                                                <div class="form-group">
                                                    <input class="form-control" type="text" placeholder="Name" name="name" id="name" value="{{ old('name') ?? $user->name }}" required>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-md-6">
                                                <div class="form-group">
                                                    <input class="form-control" type="email" placeholder="Email" name="email" id="email" value="{{ old('email') ?? $user->email }}" required>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-md-6">
                                                <div class="form-group">
                                                    <input class="form-control" type="number" placeholder="Phone" name="phone" id="phone" value="{{ old('phone')  ??  $user->phone }}" required>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="kidpicture">Select Kid Picture</label>
                                                    <input type="file" name="image" id="image" class="form-control m-input image-upload" accept="image/*" value="">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <img src="{{--{{$result->image_url}}--}}{{ $user->profile_photo_url }}" style="max-height:70px;">
                                            </div>


                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <input class="form-control" type="text" placeholder="Address" name="address" id="address" value="{{old('address') ?? $user->address }}">
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-md-6">
                                                <div class="form-group">

                                                    <input class="form-control" type="text" placeholder="City" name="city" id="city" value="{{old('city') ?? $user->city }}">
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-md-6">
                                                <div class="form-group">
                                                    <input class="form-control" type="number" placeholder="ZIP Code" name="zip" id="zip" value="{{old('zip') ?? $user->zip }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="step-2" style="height:340px">
                                        <div class="col-sm-12 pl-0">
                                            <h5>Password & Security</h5>
                                            <div class="form-group m-t-15">
                                                <label for="password">Old Password</label>
                                                <input class="form-control" type="password" placeholder="Enter Old Password" name="old_password" id="old_password" value="{{old('old_password')}}">
                                            </div>
                                            <div class="form-group m-t-15">
                                                <label for="password">Enter Password</label>
                                                <input class="form-control" type="password" placeholder="Enter New Password" name="new_password" id="new_password" value="{{old('new_password')}}">
                                            </div>
                                            <div class="form-group m-t-15">
                                                <label for="retype_password">Retype Password</label>
                                                <input class="form-control" type="password" placeholder="Reenter New Password" name="confirm_password" id="confirm_password" value="{{old('confirm_password')}}">
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                {{--                        <div class="kt-portlet__foot">
                                                            <div class="kt-form__actions">
                                                                <div class="row">
                                                                    <div class="col-lg-12">
                                                                        <button type="submit" class="btn btn-success">Submit</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>--}}
                            </form>
                        </div>
                    </div>
                </div>
            </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Change Profile Picture</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="dropzone" id="myDropzone"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
        </div>
    </div>
@endsection
@include('backend.profile.js')