@extends('front.layout-ref')
<style>
     #search-block {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

     .active{
            color:#292826!important;
        }
        .pages-content
        {
            color:#292826!important;
            margin:0px 50px;
        }

        .breadcrump-section
        {
            background: #000f1e!important;
        }


    
        .nav-tabs .nav-item {
            margin-right: 10px;
        }

        .tab-content
        {
            background: #fff;
            padding:30px 50px;
            color:#000;
        }

        .change-password-link
        {
            color:#000!important;
            text-decoration: underline!important;
            margin-left: 20px;
        }

        .in-page-form-control
        {
            background-color: #DFA326 !important;
            margin-bottom: 15px;
            padding:15px !important;
        }
        
        .profile_img_block {
            display:flex;
            justify-content:center;
            align-items:center;
            width:100px;
            height:100px;
            border-radius:100%;
        }
        
        .profile_img_block img{
            width:100%;
            height:100%;
            border-radius:100%;
        }

        @media(min-width:1200px){
            body{
                padding-top:70px !important;
            }
        }
</style>
@section('content')
    <main id="content" class="container-fluid p-0">

        <section class="breadcrump-section">
            <div class="bg-gray-1000" style="margin-bottom: 0px!important;padding:5px 0px!important; background:rgb(221,150,10);">
                <div class="container px-md-5 mb-lg-2 py-3 py-0">
                    <h3 class="h3 fw-bold text-center mb-1">Profile</h3>
                    <nav aria-label="breadcrumb" class="border-bottom-0">
                    <ol class="breadcrumb justify-content-center p-0">

                    <li class="breadcrumb-item text-dark" aria-current="page">Edit Your Profile</li>

                    </ol>
                    </nav>
                 </div>

            </div>
        </section>



    <!--overlay-->

    <div class="bg-gray-1100 space-1">
        <div class="container-fluid px-md-6 px-xl-7 px-wd-6 pb-3 pt-1 mt-4" style="max-width:1776px;">
            <div class="pb-4">
                <div class="border-g-1200-op mb-1 pb-3">
                    <div class="dark">

                        @include('front.my-account.tabs')
                          <div class="tab-content">
                            <h3 class="fw-bold mb-2">Edit your details:</h3>
                            @if(\Session::has('error'))
                                <div class="col-xs-12">
                                    <li class="alert alert-danger">{!! \Session::get('error') !!}</li>
                                </div>
                            @endif

                            @if(\Session::has('success'))
                                <div class="col-xs-12">
                                    <li class="alert alert-success">{!! \Session::get('success') !!}</li>
                                </div>
                            @endif

                            @if ($errors->any())
                                <div class="col-xs-12">
                                    @foreach ($errors->all() as $error)
                                        <li class="alert alert-danger">{{ $error }}</li>
                                    @endforeach
                                </div>
                            @endif

                            <form method="post"  enctype="multipart/form-data">
                                {{ csrf_field() }}
                                <label>Your name*</label>
                                <input name="name" class="form-control in-page-form-control mb-4" type="text" value="{{ Auth::user()->name }}" required>
                                
                                <label>Surname*</label>
                                <input name="surname" class="form-control in-page-form-control mb-4" type="text" value="{{ Auth::user()->surname }}" required>

                                <label>Your phone*</label>
                                <input name="phone" class="form-control in-page-form-control mb-4" type="number" value="{{ Auth::user()->phone }}" required>

                                <label>Your email*</label>
                                <input name="email" class="form-control in-page-form-control mb-4" type="email" value="{{ Auth::user()->email }}" required>
                                
                                <label>Profile image</label>
                                <input type="file" name="profile_image" class="form-control in-page-form-control mb-4">
                                
                                @if(Auth::user()->profile_image)
                                <label>Current profile picture</label>
                                <div class="thubnail_img profile_img_block">
                                    <img id="thumbnail-image"  src="{{url("profile-images/".Auth::user()->profile_image )}}" alt="Profile Image">
                                </div>
                                <br />
                                @endif
                                
                                <button class="btn btn-dark p-3" type="submit">Update Details</button>
                            </form>




                          </div>

                    </div>
                </div>
            </div>
            <!--Dakar Section End-->




        </div>
    </div>


    </main>
@endsection

@section('custom-script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
@endsection