@extends('layout.index')
@section('title', 'User Profile')
<!-- Dashboard Ecommerce start -->
@section('content')
    <section>
        <div class="content-body">
            <!-- Bordered table start -->
            <div class="row" id="table-bordered">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header w-100">
                            <div class="content-header-left">
                                <div class="row breadcrumbs-top">
                                    <div class="col-sm-12">
                                        <h2 class="content-header-title float-left mb-0">User Profile</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end breadcrumb-wrapper">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb mr-1">
                                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                                        <li class="breadcrumb-item">User</li>
                                        <li class="breadcrumb-item active" aria-current="page"> User Profile</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Bordered table end -->
        </div>

        @if ($message = Session::get('success'))
            <div class="demo-spacing-0 mb-1">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <div class="alert-body">
                        {{-- <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> --}}
                        {{ $message }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        @endif

        <div class="content-body">
            <!-- Basic multiple Column Form section start -->
            <section id="multiple-column-form">
                <div class="row justify-content-center">
                    <div class="col-sm-7">
                        <div class="card">
                            <div class="card-body">
                                <form class="form" action="{{ url('user_profile/update') }}" method="POST">
                                    {{ csrf_field() }}
                                    <div class="row">
                                        <div class="col-md-12 col-12">
                                            <div class="media justify-content-center mb-2">
                                                <img src={{ asset('app-assets/images/portrait/small/proflie-default.png') }}
                                                    id="account-upload-img" class="rounded-circle mr-50"
                                                    alt="profile image" height="150" width="150" />
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <input type="hidden" id="user_id" class="form-control"
                                                placeholder="user_id" name="user_id" value="{{ $aUser->id }}" />
                                            <div class="row">

                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">
                                                        <label for="last-name-column">First Name</label>
                                                        <input type="text" id="firstname" class="form-control"
                                                            placeholder="First Name" name="firstname" value="{{ $aUser->firstname }}"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">
                                                        <label for="city-column">Last Name</label>
                                                        <input type="text" id="lastname" class="form-control"
                                                            placeholder="Last Name" name="lastname" value="{{ $aUser->lastname }}"/>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-12">
                                                    <div class="form-group">
                                                        <label for="country-floating">Email ID</label>
                                                        <input type="email" id="email" class="form-control"
                                                            name="email" placeholder="Email ID" value="{{ $aUser->email }}" />
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <label for="country-floating">Gender</label>
                                                    <div class="demo-inline-spacing mt-1">
                                                        <div class="custom-control custom-radio mt-0">
                                                            <input type="radio" id="customRadio1" name="gender"
                                                                class="custom-control-input" value="1" @php if ($aUser->gender == 1) {
                                                                    echo 'checked';
                                                                } @endphp  />
                                                            <label class="custom-control-label"
                                                                for="customRadio1">Male</label>
                                                        </div>
                                                        <div class="custom-control custom-radio mt-0">
                                                            <input type="radio" id="customRadio2" name="gender"
                                                                class="custom-control-input" value="0" @php if ($aUser->gender == 0) {
                                                                    echo 'checked';
                                                                } @endphp />
                                                            <label class="custom-control-label"
                                                                for="customRadio2">Female</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12 text-center mt-1">
                                            <label for="city-column mb-1">Theme color</label>
                                            <div class="custom-control custom-switch custom-switch-dark mb-1">
                                                <input type="checkbox"
                                                    class=" nav-link nav-link-style custom-control-input"
                                                    id="{{ $aUser->id }}" name="theme_mode" 
                                                     @php if ($aUser->theme_mode == 1) {
                                                        echo 'checked';
                                                    } @endphp 
                                                    onchange="change_status(event.target,{{ $aUser->id}});"
                                                     />
                                                <label class="custom-control-label" for="{{ $aUser->id }}">
                                                    <span class="ficon switch-icon-left"><i
                                                            data-feather="moon"></i></span>
                                                    <span class="ficon switch-icon-right"><i
                                                            data-feather="sun"></i></span>
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <div class="col-12 text-center mt-1">
                                            <button type="submit" class="btn btn-primary mr-1">Save</button>
                                            <button type="reset" class="btn btn-outline-secondary">Reset</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-5">
                        <div class="card">
                            <div class="card-body">
                                <form class="form" action="{{ url('user/change_password') }}" method="POST">
                                    {{ csrf_field() }}
                                    <div class="row">
                                        <div class="col-md-12 col-12">
                                            <div class="media justify-content-center mb-2">
                                                <img src={{ asset('app-assets/images/logo/password.png') }}
                                                    class="rounded mr-50" alt="profile image" height="150"
                                                    width="150" />
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <input type="hidden" id="user_id" class="form-control"
                                                    placeholder="user_id" name="user_id"
                                                    value="{{ $aUser->id }}" />
                                                <div class="col-md-12 col-12">
                                                    <div class="form-group">
                                                        <label for="country-floating">Current Password</label>
                                                        <input type="Password" id="country-floating"
                                                            class="form-control" name="current_password"
                                                            placeholder="Password" />
                                                        @error('current_password')
                                                            <span class="error"
                                                                style="color:red;">{{ $message }}</span>
                                                        @enderror

                                                    </div>
                                                </div>
                                                <div class="col-md-12 col-12">
                                                    <div class="form-group">
                                                        <label for="password">Password</label>
                                                        <input type="password" id="password" class="form-control"
                                                            name="password" placeholder="Password" />
                                                        @error('password')
                                                            <span class="error"
                                                                style="color:red;">{{ $message }}</span>
                                                        @enderror

                                                    </div>
                                                </div>
                                                <div class="col-md-12 col-12">
                                                    <div class="form-group">
                                                        <label for="password_confirmation">Confirm Password</label>
                                                        <input type="password" id="password" class="form-control"
                                                            name="password_confirmation"
                                                            placeholder="Confirm Password" />
                                                        @error('password_confirmation')
                                                            <span class="error"
                                                                style="color:red;">{{ $message }}</span>
                                                        @enderror

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

                                        <div class="col-12 text-center mt-1">
                                            <button type="submit" class="btn btn-primary mr-1">Save</button>
                                            <button type="reset" class="btn btn-outline-secondary">Reset</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Basic Floating Label Form section end -->
        </div>
    </section>
@endsection

<script>
    function change_status(_this, id) {
        if (confirm("Are you sure want to change theme?")) {
            var theme_mode = $(_this).prop('checked') == true ? 1 : 0;
          
            $.ajax({
                url: 'user_profile/change_theme_mode',
                type: 'post',
                data: {
                    _token: "{{ csrf_token() }}",
                    id: id,
                    theme_mode: theme_mode
                },
                success: function(result) {}
            });
        }else{
            location.reload();
        }
    }
</script>