@extends('layouts.admin')
@section('title','Show User Profile')
@section('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" rel="stylesheet">
@endsection

@section('content')

    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <div class="float-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('welcome')}}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{route('user.dashboard.index')}}">Dashmoard</a></li>
                        <li class="breadcrumb-item active">My Profile</li>
                    </ol>
                </div>
                <h4 class="page-title">Show User Profile</h4>
            </div>

        </div>

    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="met-profile">
                        <div class="row">
                            <div class="col-lg-4 align-self-center mb-3 mb-lg-0">
                                <div class="met-profile-main">
                                    <div class="met-profile-main-pic">
                                        <img src="{{$user->profile_photo_url}}" alt="" height="110" class="rounded-circle">
                                        <span class="met-profile_main-pic-change">
                                            <a data-bs-toggle="modal" data-bs-target="#odal-voucher"><i class="fas fa-camera"></i></a>
                                        </span>
                                    </div>
                                    <div class="modal fade" id="odal-voucher" tabindex="-1" role="dialog" aria-labelledby="odal-voucher" aria-hidden="true">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header bg-success">
                                                    <h6 class="modal-title m-0 text-white" id="exampleModalSuccess1">Upload Profile Photos</h6>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="row">

                                                        <div class="col-lg-12">
                                                            <form role="form" action="" method="POST" enctype="multipart/form-data">
                                                                @csrf
                                                                @if ($errors->any())
                                                                    <div class="alert alert-danger">
                                                                        <ul>
                                                                            @foreach ($errors->all() as $error)
                                                                                <li>{{ $error }}</li>
                                                                            @endforeach
                                                                        </ul>
                                                                    </div>
                                                                @endif
                                                                <div class="modal-body">
                                                                    <div class="form-group">
                                                                        <input type="file" class="dropify" name="avatar" data-allowed-file-extensions="png jpeg jpg" data-height="100" data-max-file-size="1M">
                                                                    </div>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="submit" class="btn btn-primary">Save changes</button>
                                                                    <button type="button" class="btn btn-warning ml-auto" data-bs-dismiss="modal">Close</button>
                                                                </div>
                                                            </form>

                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                    <div class="met-profile_user-detail">
                                        <h5 class="met-user-name">{{$user->first_name}} {{$user->last_name}}</h5>
                                        <p class="mb-0 met-user-name-post">{{$user->account}}</p>
                                    </div>
                                </div>
                            </div><!--end col-->

                            <div class="col-lg-4 ms-auto align-self-center">
                                <ul class="list-unstyled personal-detail mb-0">

                                    <li class=""><i class="las la-phone mr-2 text-secondary font-22 align-middle"></i> <b> Phone </b> : {{$user->mobile}}</li>
                                    <li class="mt-2"><i class="las la-envelope text-secondary font-22 align-middle mr-2"></i> <b> Email </b> : {{$user->email}}</li>
                                    <li class="mt-2"><i class="las la-broadcast-tower text-secondary font-22 align-middle mr-2"></i> <b> Sign Up IP </b> : {{$user->sign_up_ip}}</li>
                                    <li class="mt-2"><i class="las la-user-secret text-secondary font-22 align-middle mr-2"></i> <b> Last Login </b> : {{$user->last_login_time}}</li>

                                </ul>

                            </div><!--end col-->
                            <div class="col-lg-4 align-self-center">

                            </div><!--end col-->
                        </div><!--end row-->
                    </div><!--end f_profile-->

                </div><!--end card-body-->
                <div class="card-body p-0">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">

                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#Settings" role="tab" aria-selected="false">Settings</a>
                        </li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active p-3" id="Settings" role="tabpanel">
                            <div class="row">
                                <div class="col-lg-6 col-xl-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <div class="row align-items-center">
                                                <div class="col">
                                                    <h4 class="card-title">Personal Information</h4>
                                                </div><!--end col-->
                                            </div>  <!--end row-->
                                        </div><!--end card-header-->
                                        <div class="card-body">
                                            @if ($errors->any())
                                                <div class="alert alert-danger">
                                                    <ul>
                                                        @foreach ($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                                            <form role="form" action="" method="post">
                                                @csrf
                                                <div class="form-group mb-3 row">
                                                    <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">Username</label>
                                                    <div class="col-lg-9 col-xl-8">
                                                        <input class="form-control" type="text" value="{{$user->username}}" readonly>

                                                    </div>
                                                </div>
                                                <div class="form-group mb-3 row">
                                                    <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">Email Address</label>
                                                    <div class="col-lg-9 col-xl-8">
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i class="fas fa-at"></i></span>
                                                            <input type="text" class="form-control" value="{{$user->email}}" placeholder="Email" aria-describedby="basic-addon1" readonly>
                                                        </div>
                                                        <span class="form-text text-muted font-12">We'll never share your email with anyone else.</span>
                                                    </div>
                                                </div>
                                            <div class="form-group mb-3 row">
                                                <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">First Name</label>
                                                <div class="col-lg-9 col-xl-8">
                                                    <input class="form-control" type="text" name="first_name" value="{{$user->first_name}}" required>
                                                </div>
                                            </div>

                                            <div class="form-group mb-3 row">
                                                <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">Last Name</label>
                                                <div class="col-lg-9 col-xl-8">
                                                    <input class="form-control" name="last_name" type="text" value="{{$user->last_name}}" required>
                                                </div>
                                            </div>
                                                <div class="form-group mb-3 row">
                                                    <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">Date of Birth</label>
                                                    <div class="col-lg-9 col-xl-8">
                                                        <input class="form-control" name="date_of_birth" type="date" id="example-date-input" required>
                                                    </div>
                                                </div>


                                            <div class="form-group mb-3 row">
                                                <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">Contact Phone</label>
                                                <div class="col-lg-9 col-xl-8">
                                                    <div class="input-group">
                                                        <span class="input-group-text"> </span>
                                                        <input type="text" class="form-control" name="mobile" value="{{$user->mobile}}" placeholder="Phone Number" aria-describedby="basic-addon1">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-group mb-3 row">
                                                <div class="col-lg-9 col-xl-8 offset-lg-3">
                                                    <button type="submit" class="btn btn-de-primary">Submit</button>
                                                    <button type="button" class="btn btn-de-danger">Cancel</button>
                                                </div>
                                            </div>
                                            </form>
                                        </div>
                                        <div class="row justify-content-center">
                                            <a href="{{url()->previous()}}" class="btn btn-info">Back To Previous Page</a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-6 col-xl-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h4 class="card-title">Address Information</h4>
                                        </div><!--end card-header-->
                                        <div class="card-body">
                                            @if ($errors->any())
                                                <div class="alert alert-danger">
                                                    <ul>
                                                        @foreach ($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                                            <form role="form" action="" method="post">
                                                @csrf

                                                <div class="form-group mb-3 row">
                                                    <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">Address Line 1</label>
                                                    <div class="col-lg-9 col-xl-8">
                                                        <input class="form-control" type="text" name="address" value="{{$user->address_line_one}}" required>
                                                    </div>
                                                </div>
                                                <div class="form-group mb-3 row">
                                                    <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">Address Line 2</label>
                                                    <div class="col-lg-9 col-xl-8">
                                                        <input class="form-control" type="text" name="address2" value="{{$user->address_line_two}}" required>
                                                    </div>
                                                </div>
                                                <div class="form-group mb-3 row">
                                                    <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">City</label>
                                                    <div class="col-lg-9 col-xl-8">
                                                        <input class="form-control" type="text" name="city" value="{{$user->city}}" required>
                                                    </div>
                                                </div>


                                                <div class="form-group mb-3 row">
                                                    <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">State</label>
                                                    <div class="col-lg-9 col-xl-8">
                                                        <input class="form-control" type="text" name="state" value="{{$user->state}}" required>
                                                    </div>
                                                </div>
                                                <div class="form-group mb-3 row">
                                                    <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">Post Code</label>
                                                    <div class="col-lg-9 col-xl-8">
                                                        <input class="form-control" type="text" name="postcode" value="{{$user->postcode}}" required>
                                                    </div>
                                                </div>


                                                <div class="form-group mb-3 row">
                                                    <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">Country</label>
                                                    <div class="col-lg-9 col-xl-8">
                                                        <div class="input-group">
                                                            <span class="input-group-text"><i class="fas fa-globe-asia"></i></span>
                                                            <input type="text" class="form-control" value="{{$user->country}}" placeholder="Phone" aria-describedby="basic-addon1" readonly>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-group mb-3 row">
                                                    <div class="col-lg-9 col-xl-8 offset-lg-3">
                                                        <button type="submit" class="btn btn-de-primary">Submit</button>
                                                        <button type="button" class="btn btn-de-danger">Cancel</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-header">
                                            <h4 class="card-title">Change Password</h4>
                                        </div><!--end card-header-->
                                        <div class="card-body">
                                            @if ($errors->any())
                                                <div class="alert alert-danger">
                                                    <ul>
                                                        @foreach ($errors->all() as $error)
                                                            <li>{{ $error }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>
                                            @endif
                                            <form role="form" action="" method="post">
                                                @csrf
                                            <div class="form-group mb-3 row">
                                                <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">Current Password</label>
                                                <div class="col-lg-9 col-xl-8">
                                                    <input class="form-control" name="current_password" type="password" placeholder="Current Password">
                                                </div>
                                            </div>
                                            <div class="form-group mb-3 row">
                                                <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">New Password</label>
                                                <div class="col-lg-9 col-xl-8">
                                                    <input class="form-control" name="password" type="password" placeholder="New Password">
                                                </div>
                                            </div>
                                            <div class="form-group mb-3 row">
                                                <label class="col-xl-3 col-lg-3 text-end mb-lg-0 align-self-center form-label">Confirm Password</label>
                                                <div class="col-lg-9 col-xl-8">
                                                    <input class="form-control" type="password" name="confirm-password" placeholder="Re-Password">
                                                </div>
                                            </div>
                                            <div class="form-group mb-3 row">
                                                <div class="col-lg-9 col-xl-8 offset-lg-3">
                                                    <button type="submit" class="btn btn-de-primary">Change Password</button>
                                                </div>
                                            </div>
                                            </form>
                                        </div><!--end card-body-->
                                    </div>


                                </div> <!-- end col -->
                            </div><!--end row-->
                        </div>
                    </div>
                </div> <!--end card-body-->
            </div><!--end card-->
        </div><!--end col-->
    </div>


@endsection
@section('scripts')
<script src="{{asset('admin/vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js')}}"></script>
<script src="{{asset('admin/vendor/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
<script>
    $('.dropify').dropify();
</script>
@endsection