@extends('layouts.app')

<!-- Content Start -->
<div id="main-content">
        <div class="container-fluid">
            <div class="block-header">
                <div class="row clearfix">
                    <div class="col-md-6 col-sm-12">
                        <h2>User Profile</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">{{config('app.event.name')}}</a></li>
                            <li class="breadcrumb-item"><a href="#">Account</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Profile</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-12">
                    <div class="card social">
                        <div class="profile-header d-flex justify-content-between justify-content-center">
                            <div class="d-flex">
                                <div class="mr-3">
                                    <img src="{{asset('assets/images/user.png')}}" class="rounded" alt="">
                                </div>
                                <div class="details">
                                    <h5 class="mb-0">{{$user->first_name .' '. $user->last_name}}</h5>
                                    <span class="text-light">{{$user->email}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        @if($errors->any())
                            <div class="col-md-12 alert alert-danger">
                                <strong>{{$errors->first()}}</strong>
                            </div>
                        @endif
                    </div>
                    <div data-expires="5000" class="flash-message">
                        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                            @if(Session::has('alert-' . $msg))
                                <div data-expires="5020" class="col-md-12 alert alert-{{ $msg }}">
                                    <strong> {{ Session::get('alert-' . $msg) }} </strong>
                                </div>
                            @endif
                        @endforeach
                    </div>
                    <!-- end .flash-message -->
                </div>

                <div class="col-xl-4 col-lg-4 col-md-5">
                    <div class="card">
                        <div class="header">
                            <h2>Info</h2>
                            <ul class="header-dropdown dropdown">
                                <li><a href="javascript:void(0);" class="full-screen"><i class="icon-frame"></i></a></li>
                                <li class="dropdown">
                                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="javascript:void(0);">Action</a></li>
                                        <li><a href="javascript:void(0);">Another Action</a></li>
                                        <li><a href="javascript:void(0);">Something else</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="body">
                            <small class="text-muted">Full Name: </small>
                            <p>{{$user->first_name .' '. $user->last_name}}</p>
                            <hr>
                            <small class="text-muted">Email address: </small>
                            <p>{{$user->email}}</p>
                            <hr>
                            <small class="text-muted">Mobile: </small>
                            <p>{{$user->phone}}</p>
                            <hr>
                            <small class="text-muted">Birth Date: </small>
                            <p class="m-b-0">{{date('d-m-Y', strtotime($user->dob))}}</p>
                            <hr>
                            <small class="text-muted">Created At: </small>
                            <p><i class="fa fa-clock-o m-r-5"></i> {{date('d-m-Y', strtotime($user->created_at))}}</p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-8 col-lg-8 col-md-7">
                    <div class="card">
                        <div class="header">
                            <h2>Basic Information</h2>
                            <ul class="header-dropdown dropdown">
                                <li><a href="javascript:void(0);" class="full-screen"><i class="icon-frame"></i></a></li>
                                <li class="dropdown">
                                    <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="javascript:void(0);">Action</a></li>
                                        <li><a href="javascript:void(0);">Another Action</a></li>
                                        <li><a href="javascript:void(0);">Something else</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                        <div class="body">
                            <form method="post" action="{{route('admin.profile.update', $user->id)}}" class="row clearfix">
                                @csrf
                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control @error('first_name') is-invalid @enderror" value="{{$user->first_name}}" name="first_name" placeholder="First Name">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control @error('last_name') is-invalid @enderror" value="{{$user->last_name}}" name="last_name" placeholder="Last Name">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        <input type="email" disabled value="{{$user->email}}" class="form-control @error('email') is-invalid @enderror" placeholder="Email">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="icon-calendar"></i></span>
                                            </div>
                                            <input data-provide="datepicker" data-date-autoclose="true" value="{{date('d-m-Y', strtotime($user->dob))}}" name="dob" class="form-control @error('dob') is-invalid @enderror" placeholder="Birthdate">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        <input type="tel" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{$user->phone}}" placeholder="Phone">
                                    </div>
                                </div>
                                <div class="col-md-12 header">
                                    <h2>Change Password</h2>
                                </div>

                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="New Password">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12">
                                    <div class="form-group">
                                        <input type="password" name="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror" placeholder="Password Confirm">
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12">
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-outline-info col-md-12">Update</button>
                                    </div>
                                </div>
                            </form>

                                <div class="col-12">
                                    <ul class="list-group mb-3 tp-setting">
                                        <li class="list-group-item">
                                            Anyone seeing my profile page
                                            <div class="float-right">
                                                <label class="switch">
                                                    <input type="checkbox" checked>
                                                    <span class="slider round"></span>
                                                </label>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            Anyone send me a message
                                            <div class="float-right">
                                                <label class="switch">
                                                    <input type="checkbox">
                                                    <span class="slider round"></span>
                                                </label>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            Anyone posts a comment on my post
                                            <div class="float-right">
                                                <label class="switch">
                                                    <input type="checkbox" checked>
                                                    <span class="slider round"></span>
                                                </label>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            Anyone invite me to group
                                            <div class="float-right">
                                                <label class="switch">
                                                    <input type="checkbox" checked>
                                                    <span class="slider round"></span>
                                                </label>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Content End -->