@extends('layouts.master')

@section('title')
Profile edit
@endsection

@section('content')
<div class="main-container container-fluid">

    <!-- PAGE-HEADER Breadcrumbs-->
    <div class="page-header">
        <h1 class="page-title">Profile edit</h1>
        <div>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{url('/dashboard')}}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{url('/profile')}}">Profile</a></li>
                <li class="breadcrumb-item active" aria-current="page">Profile edit</li>
            </ol>
        </div>
    </div>
    <!-- PAGE-HEADER END -->

    <!-- ROW-1 OPEN -->
    <div class="row">
        <div class="col-xl-4">
            <div class="row">
                <div class="col-lg-12 col-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">Change Image</div>
                        </div>
                        <div class="card-body">
                            <div class="text-center chat-image mb-5">
                                <div class="col-12 text-center">

                                    @if(Auth::user()->photo==NULL) 
                                        <img id="user_photo_selected" src="{{asset('assets/images/users/avatar-121.png')}}"
                                             alt="" class="img-fluid rounded-circle mx-auto" 
                                             style="width:140px;height:130px;object-fit:cover;" >
                                    @else
                                        <img id="user_photo_selected" src="{{asset('/uploads/files/'.Auth::user()->photo)}}"
                                        alt="" class="img-fluid rounded-circle mx-auto" 
                                             style="width:140px;height:130px;object-fit:cover;">
                                    @endif
                                    <div id="photo-error" class="text-muted small mt-1 text-center">
                                        Allowed JPG, GIF or PNG. Max size of 2MB
                                    </div>
                                </div>
                            </div>
                            <form id="photo_upload">
                                <div class="col-12">
                                    <input type="file" class="form-control imageChange" accept="image/*" required
                                        id="imageChange" name="photo" id="photo">

                                </div>
                                <div id="photo-error" class="text-muted small mt-1 text-center">
                                    Allowed JPG, GIF or PNG. Max size of 2MB
                                </div>
                                <div class="text-center mt-2">
                                <button type="submit" class="btn btn-buzono btnSubmit" id="btnSubmit"> <i
                                    class="fa fa-spinner fa-pulse" id="fa-pulse" style="display: none;"></i>
                                Change photo</button>
                                </div>
                                
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">Edit Password</div>
                        </div>
                        <div class="card-body">
                            <form id="change_password">
                                @csrf
                                <div class="form-group">
                                    <label class="form-label">Current Password</label>
                                    <div class="wrap-input100 validate-input input-group" id="Password-toggle">
                                        <a href="javascript:void(0)" class="input-group-text bg-white text-muted">
                                            <i class="zmdi zmdi-eye text-muted" aria-hidden="true"></i>
                                        </a>
                                        <input class="input100 form-control" type="password" required
                                            name="current_password" placeholder="Current Password">
                                    </div>
                                    <!-- <input type="password" class="form-control" value="password"> -->
                                </div>
                                <div class="form-group">
                                    <label class="form-label">New Password</label>
                                    <div class="wrap-input100 validate-input input-group" id="Password-toggle1">
                                        <a href="javascript:void(0)" class="input-group-text bg-white text-muted">
                                            <i class="zmdi zmdi-eye text-muted" aria-hidden="true"></i>
                                        </a>
                                        <input class="input100 form-control" type="password" required
                                            name="new_password" placeholder="New Password">
                                    </div>
                                    <!-- <input type="password" class="form-control" value="password"> -->
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Confirm Password</label>
                                    <div class="wrap-input100 validate-input input-group" id="Password-toggle2">
                                        <a href="javascript:void(0)" class="input-group-text bg-white text-muted">
                                            <i class="zmdi zmdi-eye text-muted" aria-hidden="true"></i>
                                        </a>
                                        <input class="input100 form-control" type="password" required
                                            name="confirm_password" placeholder="Confirm Password">
                                    </div>
                                    <!-- <input type="password" class="form-control" value="password"> -->
                                </div>
                                <div class="row">
                                    <div class="col-12 text-center pb-3">
                                        <button type="submit" id="btnSubmitPassword" class="btn btn-buzono px-4">
                                            <i class="fa fa-spin fa-spinner" id="bx-pass" style="display: none"></i> Save Password</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-xl-8 col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Edit Profile</h3>
                </div>
                <div class="card-body">
                    <form id="update_profile">
                        @csrf
                        <div class="row">
                            <div class="col-lg-6 ">
                                <div class="form-group">
                                    <label for="exampleInputname" class="fw-bold">First name:</label>
                                    <input type="text" class="form-control" id="first_name" name="first_name"
                                        value="{{Auth::user()->first_name}}">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label for="exampleInputname1" class="fw-bold">Last name:</label>
                                    <input type="text" class="form-control" id="last_name" name="last_name"
                                        value="{{Auth::user()->last_name}}">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1" class="fw-bold">Email address:</label>
                            <input type="email" class="form-control" id="email" name="email" 
                                value="{{Auth::user()->email}}">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputnumber" class="fw-bold">Phone number:</label>
                            <input type="text" class="form-control" name="ph_number" id="ph_number"
                                value="{{Auth::user()->ph_number}}">
                        </div>

                        <div class="form-group">
                            <label class="form-label mb-0">Address:</label>
                            <textarea class="form-control" rows="2" id="address"
                                name="address">{{Auth::user()->address}}</textarea>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">