@extends('layouts.app')
@section('title', __('app.my_profile'))

@section('content')
    <!-- Content Header (Page header) -->
    <!-- Content Header (Page header) -->

    @include('layouts.partials.breadcrumb',['page_title'=> __( 'app.my_profile') , 'bread_crumbs'=>array( array('title'=>__('app.profile'),'url'=>''))])

    <!-- Main content -->
    <section class="content">
        <div class="row mb-3">
            <div class="col-md-12">
                @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                    @if(Session::has('alert-' . $msg))
                        <div class="alert alert-{{ $msg }} alert-dismissible fade show" role="alert">
                            <strong>{{ ucfirst($msg) }}:</strong> {{ Session::get('alert-' . $msg) }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-lg-7 col-xl-8">

                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li><a href="#change_password" data-bs-toggle="tab">@lang('app.change_password')</a></li>
                        <li><a class="active" href="#update_profile" data-bs-toggle="tab">@lang('app.user_profile')</a>
                        </li>
                    </ul>

                    <div class="tab-content">

                        <!-- /.tab-pane -->

                        <div class="tab-pane" id="change_password">

                            <form action="{{ action([\App\Http\Controllers\UserController::class, 'updatePassword']) }}"
                                  method="post">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        @component('components.widget', ['title' => __('app.update_password'),'icon' => __('<i class="mdi mdi-key"></i>')])
                                            <div class="row mb-3">
                                                <div class="col-md-12">
                                                    <input type="password" name="current_password"
                                                           value=""
                                                           class="form-control ps-15 bg-transparent"
                                                           placeholder="@lang('app.current_password')">
                                                </div>
                                            </div>


                                            <div class="row mb-3">
                                                <div class="col-md-12">
                                                    <input type="password" name="new_password"
                                                           value=""
                                                           class="form-control ps-15 bg-transparent"
                                                           placeholder="@lang('app.new_password')">
                                                </div>
                                            </div>

                                            <div class="row mb-3">
                                                <div class="col-md-12">
                                                    <input type="password" name="confirm_password"
                                                           value=""
                                                           class="form-control ps-15 bg-transparent"
                                                           placeholder="@lang('app.confirm_password')">
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12">
                                                    <input type="submit" name="submit" value="@lang('app.update_user_password_btn')"
                                                           class="btn btn-success">
                                                </div>
                                            </div>


                                        @endcomponent
                                    </div>
                                </div>

                            </form>

                        </div>
                        <!-- /.tab-pane -->

                        <div class="active tab-pane" id="update_profile">
                            <form action="{{ action([\App\Http\Controllers\UserController::class, 'updateProfile']) }}"
                                  method="post" enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-12 col-12">

                                        
                                        <!-- /.box-header -->
                                            <div class="">
                                                @include('user.edit_profile_form_personal_info_part')

                                                @include('user.edit_profile_form_more_info_part')
                                                
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        @component('components.widget', ['title' => __('app.profile_photo')])
                                                            @if(!empty($user->media))
                                                                <div class="col-md-12 text-center">
                                                                    {!! $user->media->thumbnail([150, 150], 'img-circle') !!}
                                                                </div>
                                                            @endif
                                                            <div class="col-md-12">
                                                                <div class="form-group">
                                                                    <label class="form-label">@lang('app.upload_image:')</label>
                                                                    {!! Form::file('profile_photo', ['id' => 'profile_photo', 'accept' => 'image/*']); !!}
                                                                    <small>
                                                                        <p class="help-block">@lang('app.max_file_size', ['size' => (config('constants.document_size_limit') / 1000000)])</p>
                                                                    </small>
                                                                </div>
                                                            </div>
                                                        @endcomponent
                                                    </div>
                                                </div>

                                            </div>
                                            <!-- /.box-body -->
                                            <div class="box-footer text-end">
                                                                                                <button type="submit" name="submit" class="btn btn-primary">
                                                    <i class="ti-save-alt"></i> Save
                                                </button>
                                            </div>


                                        <!-- /.box -->
                                    </div>
                                </div>


                            </form>
                        </div>
                        <!-- /.tab-pane -->
                    </div>
                    <!-- /.tab-content -->
                </div>
                <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->

            <div class="col-12 col-lg-5 col-xl-4">
                <div class="box box-widget widget-user">
                    <!-- Add the bg color to the header using any of the bg-* classes -->
                    <div class="widget-user-header bg-primary bbsr-0 bber-0"
                                       data-overlay="5">
                        <h3 class="widget-user-username text-white">{{ $user->first_name . " ".$user->last_name }}</h3>
                                            </div>
                    <div class="widget-user-image">
                        @php
                            $profile_photo = auth()->user()->media;
                        @endphp
                        @if(!empty($profile_photo))
                            <img class="rounded-circle" src="{{$profile_photo->display_url}}">
                        @else
                            <img class="rounded-circle" src="{{ asset('/theme/images/user3-128x128.jpg')}}"
                                 alt="User Avatar">
                        @endif

                    </div>
                    <div class="box-footer">
                                        <!-- /.row -->
                    </div>
                </div>
                <div class="box">
                    <div class="box-body box-profile">
                        <div class="row">
                            <div class="col-12">
                                <div>
                                    <p>Email :<span class="text-gray ps-10">{{ $user->email }}</span></p>
                                    <p>Phone :<span class="text-gray ps-10">{{ $user->contact_number }}</span></p>
                                    <p>Address :<span class="text-gray ps-10">{{ $user->permanent_address }}</span></p>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="pb-15">
                                    <p class="mb-10">Social Profile</p>
                                    <div class="user-social-acount">
                                        <a href="{{ $user->fb_link }}" target="_blank"
                                           class="btn btn-circle btn-social-icon btn-facebook"><i
                                                    class="fa fa-facebook"></i></a>
                                        <a href="{{ $user->twitter_link }}" target="_blank"
                                           class="btn btn-circle btn-social-icon btn-twitter"><i
                                                    class="fa fa-twitter"></i></a>
                                                                            </div>
                                </div>
                            </div>
                                                    </div>
                    </div>
                    <!-- /.box-body -->
                </div>
            </div>

        </div>
        <!-- /.row -->

    </section>
@endsection
@section('javascript')
    <script src="{{asset('theme/js/pages/validation.js')}}"></script>
    <script src="{{asset('theme/js/pages/form-validation.js')}}"></script>


@endsection