@extends('web.layouts.base')
@section('titre')
    Mon Profil
@endsection
@section('content')
<div class="page-content">
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0">Mon Profil</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Mon profil</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="row">
            <div class="col-xxl-3">
                <div class="card card-bg-fill">
                    <div class="card-body p-4">
                        <div class="text-center">
                            <div class="profile-user position-relative d-inline-block mx-auto  mb-4">
                                <img src="{{ is_null(auth()->user()->photo) ? asset('upload/no_image.jpg') : asset('upload/profil_images/'.auth()->user()->photo) }}" class="rounded-circle avatar-xl img-thumbnail user-profile-image" alt="user-profile-image">
                                {{-- <div class="avatar-xs p-0 rounded-circle profile-photo-edit">
                                    <input id="profile-img-file-input" type="file" class="profile-img-file-input">
                                    <label for="profile-img-file-input" class="profile-photo-edit avatar-xs">
                                        <span class="avatar-title rounded-circle bg-light text-body">
                                            <i class="ri-camera-fill"></i>
                                        </span>
                                    </label>
                                </div> --}}
                            </div>
                            <h5 class="fs-16 mb-1">{{ auth()->user()->name.' '.auth()->user()->postnom.' '.auth()->user()->prenom }}</h5>
                            <p class="text-muted mb-0">{{ auth()->user()->role->name }}</p>
                        </div>
                    </div>
                </div>
                <!--end card-->
                {{-- <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-5">
                            <div class="flex-grow-1">
                                <h5 class="card-title mb-0">Complete Your Profile</h5>
                            </div>
                            <div class="flex-shrink-0">
                                <a href="javascript:void(0);" class="badge bg-light text-primary fs-12"><i class="ri-edit-box-line align-bottom me-1"></i> Edit</a>
                            </div>
                        </div>
                        <div class="progress animated-progress custom-progress progress-label">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
                                <div class="label">30%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-4">
                            <div class="flex-grow-1">
                                <h5 class="card-title mb-0">Portfolio</h5>
                            </div>
                            <div class="flex-shrink-0">
                                <a href="javascript:void(0);" class="badge bg-light text-primary fs-12"><i class="ri-add-fill align-bottom me-1"></i> Add</a>
                            </div>
                        </div>
                        <div class="mb-3 d-flex">
                            <div class="avatar-xs d-block flex-shrink-0 me-3">
                                <span class="avatar-title rounded-circle fs-16 bg-dark text-light">
                                    <i class="ri-github-fill"></i>
                                </span>
                            </div>
                            <input type="email" class="form-control" id="gitUsername" placeholder="Username" value="@daveadame">
                        </div>
                        <div class="mb-3 d-flex">
                            <div class="avatar-xs d-block flex-shrink-0 me-3">
                                <span class="avatar-title rounded-circle fs-16 bg-primary">
                                    <i class="ri-global-fill"></i>
                                </span>
                            </div>
                            <input type="text" class="form-control" id="websiteInput" placeholder="www.example.com" value="www.velzon.com">
                        </div>
                        <div class="mb-3 d-flex">
                            <div class="avatar-xs d-block flex-shrink-0 me-3">
                                <span class="avatar-title rounded-circle fs-16 bg-success">
                                    <i class="ri-dribbble-fill"></i>
                                </span>
                            </div>
                            <input type="text" class="form-control" id="dribbleName" placeholder="Username" value="@dave_adame">
                        </div>
                        <div class="d-flex">
                            <div class="avatar-xs d-block flex-shrink-0 me-3">
                                <span class="avatar-title rounded-circle fs-16 bg-danger">
                                    <i class="ri-pinterest-fill"></i>
                                </span>
                            </div>
                            <input type="text" class="form-control" id="pinterestName" placeholder="Username" value="Advance Dave">
                        </div>
                    </div>
                </div> --}}
                <!--end card-->
            </div>
            <!--end col-->
            <div class="col-xxl-9">
                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-bs-toggle="tab" href="#personalDetails" role="tab">
                                    <i class="fas fa-home"></i> Information
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#changePassword" role="tab">
                                    <i class="mdi mdi-key-alert"></i> Changer de mot de passe
                                </a>
                            </li>
                            {{-- <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#experience" role="tab">
                                    <i class="far fa-envelope"></i> Experience
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-bs-toggle="tab" href="#privacy" role="tab">
                                    <i class="far fa-envelope"></i> Privacy Policy
                                </a>
                            </li> --}}
                        </ul>
                    </div>
                    <div class="card-body p-4">
                        <div class="tab-content">
                            <div class="tab-pane active" id="personalDetails" role="tabpanel">
                                <form action="{{ route('profil.store') }}" enctype="multipart/form-data" method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="nom" class="form-label">Nom</label>
                                                <input type="text" class="form-control" name="nom" id="nom" placeholder="Votre nom" value="{{ auth()->user()->name }}">
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="postnom" class="form-label">Postnom</label>
                                                <input type="text" class="form-control" id="postnom" name="postnom" placeholder="Votre postnom" value="{{ auth()->user()->postnom }}">
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="prenom" class="form-label">Prénom</label>
                                                <input type="text" class="form-control" id="prenom" name="prenom" placeholder="Votre prenom" value="{{ auth()->user()->prenom }}">
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="telephone" class="form-label">Téléphone</label>
                                                <input type="text" class="form-control" id="telephone" name="telephone" placeholder="Votre numéro de telephone" value="{{ auth()->user()->telephone }}">
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="emailInput" class="form-label">Email Address</label>
                                                <input type="email" class="form-control" id="emailInput" name="email" placeholder="Votre email" value="{{ auth()->user()->email }}" @readonly(true)>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="profession" class="form-label">Profession</label>
                                                <input type="text" class="form-control" id="profession" name="profession" placeholder="Proffession" value="{{ auth()->user()->profession }}" />
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="code_postal" class="form-label">Code Postal</label>
                                                <input type="text" class="form-control" id="code_postal" name="code_postal" placeholder="Code Postal" value="{{ auth()->user()->code_postal }}" />
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="code_postal" class="form-label">Pays</label>
                                                <select name="pays" id="pays" class="form-select " @readonly(true)>
                                                    <option value="" selected disabled>Choisir un pays
                                                    </option>
                                                    @foreach ($pays as $pay)
                                                        <option value="{{ $pay->id }}" {{ $pay->id == auth()->user()->pays_id ? 'selected' : '' }}>
                                                            {{ $pay->pays }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label for="adresse" class="form-label">Adresse</label>
                                                <input type="text" class="form-control" id="adresse" name="adresse" placeholder="Adresse" value="{{ auth()->user()->adresse }}" />
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label for="photo" class="form-label">Image de profil</label>
                                                <input type="file" class="form-control" id="photo" name="photo" />
                                                <img id="showImage"
                                                 src="{{ (!empty(auth()->user()->photo)) ? url('upload/profil_images/'.auth()->user()->photo) : url('upload/no_image.jpg') }}"
                                                 style="width: 100px;height: 100px; border: 1px solid #fff8e9;" alt="">
                                            </div>
                                        </div>

                                        {{-- <div class="col-lg-12">
                                            <div class="mb-3">
                                                <label for="skillsInput" class="form-label">Skills</label>
                                                <select class="form-control" name="skillsInput" data-choices data-choices-text-unique-true multiple id="skillsInput">
                                                    <option value="illustrator">Illustrator</option>
                                                    <option value="photoshop">Photoshop</option>
                                                    <option value="css">CSS</option>
                                                    <option value="html">HTML</option>
                                                    <option value="javascript" selected>Javascript</option>
                                                    <option value="python">Python</option>
                                                    <option value="php">PHP</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="designationInput" class="form-label">Designation</label>
                                                <input type="text" class="form-control" id="designationInput" placeholder="Designation" value="Lead Designer / Developer">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="websiteInput1" class="form-label">Website</label>
                                                <input type="text" class="form-control" id="websiteInput1" placeholder="www.example.com" value="www.velzon.com" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="mb-3">
                                                <label for="cityInput" class="form-label">City</label>
                                                <input type="text" class="form-control" id="cityInput" placeholder="City" value="California" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="mb-3">
                                                <label for="countryInput" class="form-label">Country</label>
                                                <input type="text" class="form-control" id="countryInput" placeholder="Country" value="United States" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="mb-3">
                                                <label for="zipcodeInput" class="form-label">Zip Code</label>
                                                <input type="text" class="form-control" minlength="5" maxlength="6" id="zipcodeInput" placeholder="Enter zipcode" value="90011">
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="mb-3 pb-2">
                                                <label for="exampleFormControlTextarea" class="form-label">Description</label>
                                                <textarea class="form-control" id="exampleFormControlTextarea" placeholder="Enter your description" rows="3">Hi I'm Anna Adame,It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is European languages are members of the same family.</textarea>
                                            </div>
                                        </div> --}}
                                        <div class="col-lg-12">
                                            <div class="hstack gap-2 justify-content-end">
                                                <button type="submit" class="btn btn-primary">Modifier</button>
                                                {{-- <button type="button" class="btn btn-soft-danger">Cancel</button> --}}
                                            </div>
                                        </div>
                                    </div>
                                    <!--end row-->
                                </form>
                            </div>
                            <!--end tab-pane-->
                            <div class="tab-pane" id="changePassword" role="tabpanel">
                                <form action="{{ route('update.pass') }}" class="save-form">
                                    @csrf
                                    @method('POST')
                                    <div class="row g-2">
                                        <div class="col-lg-4">
                                            <div>
                                                <label for="motdepasse" class="form-label">Ancien mot de passe*</label>
                                                <input type="password" class="form-control" id="motdepasse" name="motdepasse" placeholder="Entrer votre mot de passe actuel">
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-lg-4">
                                            <div>
                                                <label for="password" class="form-label">Nouveau Mot de passe*</label>
                                                <input type="password" class="form-control" id="password" name="password" placeholder="Entrer le nouveau mot de passe">
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-lg-4">
                                            <div>
                                                <label for="password_confirmation" class="form-label">Confirmer le nouveau mot de passe*</label>
                                                <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Confirmer le nouveau mot de passe">
                                            </div>
                                        </div>
                                        <!--end col-->
                                        {{-- <div class="col-lg-12">
                                            <div class="mb-3">
                                                <a href="javascript:void(0);" class="link-primary text-decoration-underline">Forgot Password ?</a>
                                            </div>
                                        </div> --}}
                                        <!--end col-->
                                        <div class="col-lg-12">
                                            <div class="text-end">
                                                <button type="submit" id="submitBtn" class="btn btn-primary">Changer le mot de passe</button>
                                            </div>
                                        </div>
                                        <!--end col-->
                                    </div>
                                    <!--end row-->
                                </form>
                                {{-- <div class="mt-4 mb-3 border-bottom pb-2">
                                    <div class="float-end">
                                        <a href="javascript:void(0);" class="link-primary">All Logout</a>
                                    </div>
                                    <h5 class="card-title">Login History</h5>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="flex-shrink-0 avatar-sm">
                                        <div class="avatar-title bg-light text-primary rounded-3 fs-18">
                                            <i class="ri-smartphone-line"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6>iPhone 12 Pro</h6>
                                        <p class="text-muted mb-0">Los Angeles, United States - March 16 at 2:47PM</p>
                                    </div>
                                    <div>
                                        <a href="javascript:void(0);">Logout</a>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="flex-shrink-0 avatar-sm">
                                        <div class="avatar-title bg-light text-primary rounded-3 fs-18">
                                            <i class="ri-tablet-line"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6>Apple iPad Pro</h6>
                                        <p class="text-muted mb-0">Washington, United States - November 06 at 10:43AM</p>
                                    </div>
                                    <div>
                                        <a href="javascript:void(0);">Logout</a>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <div class="flex-shrink-0 avatar-sm">
                                        <div class="avatar-title bg-light text-primary rounded-3 fs-18">
                                            <i class="ri-smartphone-line"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6>Galaxy S21 Ultra 5G</h6>
                                        <p class="text-muted mb-0">Conneticut, United States - June 12 at 3:24PM</p>
                                    </div>
                                    <div>
                                        <a href="javascript:void(0);">Logout</a>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 avatar-sm">
                                        <div class="avatar-title bg-light text-primary rounded-3 fs-18">
                                            <i class="ri-macbook-line"></i>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6>Dell Inspiron 14</h6>
                                        <p class="text-muted mb-0">Phoenix, United States - July 26 at 8:10AM</p>
                                    </div>
                                    <div>
                                        <a href="javascript:void(0);">Logout</a>
                                    </div>
                                </div> --}}
                            </div>
                            <!--end tab-pane-->
                        </div>
                    </div>
                </div>
            </div>
            <!--end col-->
        </div>
        <!--end row-->

    </div>
    <!-- container-fluid -->
</div><!-- End Page-content -->
@endsection
@section('scripts')
    <script>
        $(document).ready(function () {
            $('#photo').change(function (e) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('#showImage').attr('src', e.target.result);
                }
                reader.readAsDataURL(e.target.files['0']);
            });

            //store form
            $('.save-form').on('submit', function (e) {
                e.preventDefault();
                $("#submitBtn").prop('disabled',true)

                var spinner = 'En cours &nbsp;<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>\n' +
                    '          <span class="sr-only">Loading...</span>'

                var formObj = $(this);
                var url = formObj.attr('action');

                $.each(formObj.find('input','select'), function(key, field){
                    var element = $('[name="'+field.name+'"]');
                    element.removeClass('is-invalid');
                    element.siblings('p.error').remove();
                });

                $("#submitBtn").html(spinner);
                var formData = new FormData(formObj[0]);

                $.ajax({
                    url: url,
                    dataType:'JSON',
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    mimeType: 'multipart/form-data',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function () {
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'))
                    }
                })
                    .done(function (data) {
                        //console.log('DONE :: ', data);
                        if(data.redirect){
                            window.location.href = data.redirect
                        }
                    })
                    .fail((jqXHR, options, error) => {
                        $("#submitBtn").text("Valider");
                        $("#submitBtn").prop('disabled',false);
                        // console.log('FAIL :: ', jqXHR)
                        if(!jqXHR.responseJSON) {
                            return;
                        }
                        status = jqXHR.responseJSON.status;
                        error = jqXHR.responseJSON.error;

                        $.each(error, function (key, val) {
                            var element = $('[name="'+key+'"]', formObj);

                            //console.log('ELEMENT :: ', element);
                            element.addClass('is-invalid');
                            if($.isArray(val)){
                                val.forEach((data) => { element.parent().append(`<p class="error text-danger">${data}</p>`); })
                            } else {
                                element.parent().append(`<p class="error text-danger">${data}</p>`);
                            }
                        });
                    });
            });
            //endstore
        });
    </script>
@stop