@php
use App\Helpers\Helper;
@endphp

@extends('layouts.master')

@section('title', 'My Profile')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/page-profile.css') }}">
@endsection

@section('content')
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
        <!-- Header -->
        
         @section('breadcrumbs')
        <nav aria-label="breadcrumb" class="d-flex custom-breadcrumbs flex-sm-nowrap flex-wrap ">
            <ol class="breadcrumb mb-0 me-1">
                <li class="breadcrumb-item active">
                    My Profile
                </li>
            </ol>
        </nav>
        @endsection
        
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="user-profile-header-banner">
                        <img src="{{ asset('assets/img/pages/profile-banner.png') }}" alt="Banner image"
                            class="rounded-top" />
                    </div>
                    <div class="user-profile-header d-flex flex-column flex-sm-row text-sm-start text-center mb-4">
                        <div class="flex-shrink-0 mt-n2 mx-sm-0 mx-auto">
                            <img src="{{ $user->profile_pic }}" alt="user image"
                                class="d-block ms-0 ms-sm-4 rounded user-profile-img profile-pic-image" height="100"
                                width="100" />
                        </div>
                        <div class="flex-grow-1 mt-3 mt-sm-5">
                            <div
                                class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-4 flex-md-row flex-column gap-4">
                                <div class="user-profile-info">
                                    <h4>{{ $user->name }}</h4>
                                    <ul
                                        class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-2">
                                        <li class="list-inline-item"><i class="ti ti-mail"></i> <a
                                                href="mailto:{{ $user->email }}"> {{ $user->email }} </a></li>

                                        <li class="list-inline-item"><i class="ti ti-color-swatch"></i>
                                            {{ Helper::getuserRole($user) }}
                                        </li>
                                        <li class="list-inline-item"><i class="ti ti-calendar"></i> Joined
                                            {{ $user->created_at->format(config('const.displayDateMonthAndYear')) }}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ Header -->

        <!-- Navbar pills -->
        <div class="row">
            <div class="col-md-12">
                <ul class="nav nav-pills flex-column flex-sm-row mb-4">
                    <li class="nav-item">
                        <button type="button" class="nav-link active tab-button" role="tab" data-bs-toggle="tab"
                            data-bs-target="#navs-justified-profile" aria-controls="navs-justified-profile"
                            aria-selected="true">
                            <i class="tf-icons ti ti-user ti-xs me-1"></i> Profile
                        </button>
                    </li>
                    <li class="nav-item">
                        <button type="button" class="nav-link tab-button" role="tab" data-bs-toggle="tab"
                            data-bs-target="#navs-justified-change-password" aria-controls="navs-justified-change-password"
                            aria-selected="false">
                            <i class="tf-icons ti ti-lock ti-xs me-1"></i> Change Password
                        </button>
                    </li>

                </ul>
            </div>
        </div>
        <!--/ Navbar pills -->
        <!-- User Profile Content -->
        <div class="tab-content" style="padding:0">
            <div class="tab-pane show active fade" id="navs-justified-profile" role="tabpanel">
                <div class="row">
                    <div class="col-xl-4 col-lg-5 col-md-5">
                        <!-- About User -->
                        <div class="card mb-4">
                            <div class="card-body">
                                <small class="card-text text-uppercase">About</small>
                                <ul class="list-unstyled mb-4 mt-3">
                                    @if (auth()->user()->roles[0]->id != config('const.roleSuperAdmin'))
                                        @if (auth()->user()->roles[0]->id == config('const.roleAgency'))
                                            <li class="d-flex align-items-center mb-3">
                                                <i class="ti ti-user"></i><span class="fw-bold mx-2">Agency Name: </span>
                                                <span class="text-break">{{ $user->name }}</span>
                                            </li>
                                        @else
                                            <li class="d-flex align-items-center mb-3">
                                                <i class="ti ti-user"></i><span class="fw-bold mx-2">Agency Name: </span>
                                                <span class="text-break">{{ $user->agencyUser()->first()->name }}</span>
                                            </li>
                                        @endif
                                    @endif

                                    <li class="d-flex align-items-center mb-3">
                                        <i class="ti ti-user"></i><span class="fw-bold mx-2">Name: </span>
                                        <span class="text-break">{{ $user->owner_name }}</span>
                                    </li>

                                    <li class="d-flex align-items-center mb-3">
                                        <i class="ti ti-color-swatch"></i><span class="fw-bold mx-2">Role:</span>
                                        <span class="text-break">{{ Helper::getuserRole($user) }}</span>
                                    </li>

                                    <li class="d-flex align-items-center mb-3">
                                        <i class="ti ti-check"></i><span class="fw-bold mx-2">Status:</span>
                                        <span>{{ Helper::userStatus()[$user->status] }}</span>
                                    </li>
                                </ul>
                                <small class="card-text text-uppercase">Contacts</small>
                                <ul class="list-unstyled mb-4 mt-3">
                                    <li class="d-flex align-items-center mb-3">
                                        <i class="ti ti-mail"></i><span class="fw-bold mx-2">Email:</span>
                                        <a href="mailto:{{ $user->email }}" class="text-break">{{ $user->email }}</a>
                                    </li>

                                    <li class="d-flex align-items-center mb-3">
                                        <i class="ti ti-phone-call"></i><span class="fw-bold mx-2">Contact Number:</span>
                                        <span>{{ $user->mobile_number }}</span>
                                    </li>
                                </ul>

                            </div>
                        </div>
                        <!--/ About User -->

                    </div>
                    <div class="col-xl-8 col-lg-7 col-md-7">
                        <div class="card-action mb-4">
                            <div class="card-body pb-0">
                                <div class="row">
                                    <div class="col-xl">
                                        <div class="card mb-4">
                                            <div class="card-header d-flex justify-content-between align-items-center">
                                                <h5 class="mb-0">Update Profile</h5>
                                            </div>
                                            <div class="card-body">
                                                @include('admin.errors.error')

                                                {!! Form::open([
                                                    'route' => ['admin.profile.update', $user],
                                                    'id' => 'profile_update_form',
                                                    'name' => 'profile_update_form',
                                                    'enctype' => 'multipart/form-data',
                                                ]) !!}
                                                @csrf
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        <div class="form-group">
                                                            <label for="profile_pic">
                                                                {!! Form::file('profile_pic', [
                                                                    'id' => 'profile_pic',
                                                                    'style' => 'display:none;',
                                                                    'onchange' => 'loadFile(event)',
                                                                    'accept' => 'image/png, image/jpeg, image/jpg, image/gif',
                                                                ]) !!}

                                                                <img src="{{ $user->profile_pic }}"
                                                                    id="account-upload-img"
                                                                    class="rounded mr-50 profile-pic-image cursor-pointer"
                                                                    alt="Profile Image" height="80" width="80">
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row mt-2 mb-2">
                                                    <div class="col-3">
                                                        @if (auth()->user()->getRawOriginal('profile_pic'))
                                                            <button type="button"
                                                                class="btn btn-sm btn-danger waves-effect waves-light remove-image"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#profile_pic_remove_model">Remove</button>
                                                        @endif
                                                    </div>
                                                </div>
                                                @if (auth()->user()->roles[0]->id !== config('const.roleSuperAdmin'))
                                                    @if (auth()->user()->roles[0]->id === config('const.roleAgency'))
                                                        <div class="mb-3">
                                                            {!! Form::label('name', 'Agency Name', ['class' => 'form-label']) !!}
                                                            <span class="error">*</span>
                                                            {!! Form::text('name', old('name', $user->name), [
                                                                'id' => 'name',
                                                                'placeholder' => 'Enter Agency Name',
                                                                'class' => 'form-control',
                                                            ]) !!}
                                                        </div>
                                                    @else
                                                        <div class="mb-3">
                                                            {!! Form::label('name', 'Agency Name', ['class' => 'form-label']) !!}
                                                            <span class="error">*</span>
                                                            {!! Form::text('name', $user->agencyUser()->first()->name, [
                                                                'id' => 'name',
                                                                'placeholder' => 'Enter Agency Name',
                                                                'class' => 'form-control',
                                                                'readonly',
                                                                'disabled',
                                                            ]) !!}
                                                        </div>
                                                    @endif
                                                @endif

                                                @if (auth()->user()->roles[0]->id == config('const.roleAgency'))
                                                    <div class="mb-3">
                                                        {!! Form::label('first_name', 'Owner First Name', ['class' => 'form-label']) !!}
                                                        <span class="error">*</span>
                                                        {!! Form::text('first_name', old('first_name', $user->first_name), [
                                                            'id' => 'first_name',
                                                            'placeholder' => 'Enter Owner First Name',
                                                            'class' => 'form-control',
                                                        ]) !!}
                                                    </div>
                                                @else
                                                    <div class="mb-3">
                                                        {!! Form::label('first_name', 'First Name', ['class' => 'form-label']) !!}
                                                        <span class="error">*</span>
                                                        {!! Form::text('first_name', old('first_name', $user->first_name), [
                                                            'id' => 'first_name',
                                                            'placeholder' => 'Enter First Name',
                                                            'class' => 'form-control',
                                                        ]) !!}
                                                    </div>
                                                @endif

                                                @if (auth()->user()->roles[0]->id == config('const.roleAgency'))
                                                    <div class="mb-3">
                                                        {!! Form::label('last_name', 'Owner Last Name', ['class' => 'form-label']) !!}
                                                        <span class="error">*</span>
                                                        {!! Form::text('last_name', old('last_name', $user->last_name), [
                                                            'id' => 'last_name',
                                                            'placeholder' => 'Enter Owner Last Name',
                                                            'class' => 'form-control',
                                                        ]) !!}
                                                    </div>
                                                @else
                                                    <div class="mb-3">
                                                        {!! Form::label('last_name', 'Last Name', ['class' => 'form-label']) !!}
                                                        <span class="error">*</span>
                                                        {!! Form::text('last_name', old('last_name', $user->last_name), [
                                                            'id' => 'last_name',
                                                            'placeholder' => 'Enter Last Name',
                                                            'class' => 'form-control',
                                                        ]) !!}
                                                    </div>
                                                @endif

                                                <div class="mb-3">
                                                    {!! Form::label('email', 'Email', ['class' => 'form-label']) !!}
                                                    <span class="error">*</span>
                                                    {!! Form::text('email', old('email', $user->email), [
                                                        'id' => 'email',
                                                        'placeholder' => 'Enter Email',
                                                        'class' => 'form-control',
                                                    ]) !!}

                                                </div>

                                                <div class="mb-3">
                                                    {!! Form::label('mobile_number', 'Contact Number', ['class' => 'form-label']) !!}

                                                    {!! Form::number('mobile_number', old('mobile_number', $user->getRawOriginal('mobile_number')), [
                                                        'id' => 'mobile_number',
                                                        'placeholder' => 'Enter Contact Number',
                                                        'class' => 'form-control',
                                                    ]) !!}

                                                </div>
                                                        
                                                
                                                @if (auth()->user()->roles[0]->id == config('const.roleAgency'))        
                                                <div class="mb-3">
                                                    {!! Form::label('timezone', 'Timezone', ['class' => 'form-label']) !!}
                                                    <select name="timezone" id="timezone" class="form-select">
                                                        <option value="">Select Timezone</option>
                                                        @foreach($timezones as $key => $timezone)
                                                        <option value="{{$timezone}}" {{$user->timezone == $key ? 'selected' : '' }}> {{$timezone}} </option>
                                                        @endforeach
                                                    </select>    
                                                    
                                                </div>
                                                @endif

                                                <button type="submit" class="btn btn-primary submitbutton">
                                                    <span class="spinner-border me-1 loader-btn-1 d-none" role="status"
                                                        aria-hidden="true"></span> Save Changes
                                                </button>
                                                <a href="{{ route('admin.dashboard') }}"
                                                    class="btn btn-secondary">Cancel</a>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

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

            <div class="tab-pane  fade" id="navs-justified-change-password" role="tabpanel">
                <!-- Change Password -->
                <div class="card mb-4">
                    <h5 class="card-header">Change Password</h5>
                    <div class="card-body">
                        @include('admin.errors.error')
                        {!! Form::open([
                            'route' => ['admin.password.update', $user],
                            'id' => 'password_change_form',
                            'name' => 'password_change_form',
                        ]) !!}

                        @csrf
                        <div class="row">
                            <div class="mb-3 col-md-6 form-password-toggle">
                                {!! Form::label('oldpassword', 'Current Password', ['class' => 'form-label']) !!}
                                <span class="error">*</span>
                                <div class="input-group input-group-merge">
                                    {!! Form::password('oldpassword', [
                                        'id' => 'oldpassword',
                                        'placeholder' => 'Enter Current Password',
                                        'class' => 'form-control',
                                    ]) !!}

                                    <span class="input-group-text cursor-pointer"><i id="current_password_show_icon"
                                            class="ti ti-eye-off"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-3 col-md-6 form-password-toggle">
                                {!! Form::label('password', 'New Password', ['class' => 'form-label']) !!}
                                <span class="error">*</span>
                                <div class="input-group input-group-merge">
                                    {!! Form::password('password', [
                                        'id' => 'password',
                                        'placeholder' => 'Enter New Password',
                                        'class' => 'form-control',
                                    ]) !!}

                                    <span class="input-group-text cursor-pointer"><i id="password_show_icon"
                                            class="ti ti-eye-off"></i></span>
                                </div>
                            </div>

                            <div class="mb-3 col-md-6 form-password-toggle">
                                {!! Form::label('password_confirmation', 'Confirm Password', ['class' => 'form-label']) !!}
                                <span class="error">*</span>
                                <div class="input-group input-group-merge">
                                    {!! Form::password('password_confirmation', [
                                        'id' => 'password_confirmation',
                                        'placeholder' => 'Enter Confirm Password',
                                        'class' => 'form-control',
                                    ]) !!}
                                    <span class="input-group-text cursor-pointer"><i id="confirm_password_show_icon"
                                            class="ti ti-eye-off"></i></span>
                                </div>
                            </div>
                            <div class="col-12 mb-4">
                                <h6>Password Requirements:</h6>
                                <ul class="ps-3 mb-0">
                                    <li class="mb-1">Minimum 8 characters long - the more, the better.</li>
                                    <li class="mb-1">Maximum 16 characters long.</li>
                                    <li class="mb-1">At least one lowercase character.</li>
                                    <li class="mb-1">At least one uppercase character.</li>
                                    <li>At least one number and symbol.</li>
                                </ul>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-primary me-2 submitbutton">
                                    <span class="spinner-border me-1 loader-btn d-none" role="status"
                                        aria-hidden="true"></span> Change Password
                                </button>
                                <button type="reset" class="btn btn-label-secondary">Cancel</button>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
                <!--/ Change Password -->
            </div>
        </div>
        <!--/ User Profile Content -->
    </div>
    <!-- / Content -->

    @include('admin.confirmalert')
@endsection

@section('scripts')
    <script>
        var oldImgURL = $("#account-upload-img").attr("src");
        console.log(oldImgURL);

        function loadFile(event) {
            var output = document.getElementById('account-upload-img');
            output.src = URL.createObjectURL(event.target.files[0]);
            var fileInput = document.getElementById('profile_pic');
            var filePath = fileInput.value;
            var extn = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();

            if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
                output.onload = function() {
                    URL.revokeObjectURL(output.src) // free memory
                }
            } else {
                $("#account-upload-img").attr("src", oldImgURL);
            }

        }

        $(document).ready(function() {

            /* hide success and error alert on click on tabs */
            $('.tab-button').on('click', function() {
                $('.btn-close').click();
            });

            $('#profile_update_form').validate({
                rules: {
                    name: {
                        required: true,
                        maxlength: 100
                    },
                    first_name: {
                        required: true,
                        maxlength: 50
                    },
                    last_name: {
                        required: true,
                        maxlength: 50
                    },
                    email: {
                        required: true,
                        email: true,
                        maxlength: 100
                    },
                    mobile_number: {
                        maxlength: 10,
                        mobile_number: true
                    },
                    timezone:{
                        required:true
                    }
                },

                submitHandler: function(form) {
                    $('.loader-btn-1').removeClass("d-none");
                    $(".submitbutton").attr("type", "button");
                    $('.submitbutton').prop('disabled', true);
                    form.submit();
                }
            });

            $('#remove-profile-image').on('click', function() {
                $('#profile_pic_remove_model').modal('hide');

                $.ajax({
                    url: "{{ route('remove-profile-pic') }}",
                    dataType: 'json',
                    success: function(data) {

                        $('.profile-pic-image').each(function() {
                            this.src = data.data.profile_pic;
                        })
                        $('.remove-image').remove();

                        toastr.success(data.msg, 'Success!!');

                    },
                    error: function(data) {
                        toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
                    }
                });
            });

            $("#password_change_form").validate({
                rules: {
                    oldpassword: {
                        required: true,
                        password: false,
                        minlength: 8,
                    },
                    password: {
                        required: true,
                        minlength: 8,
                        password: true,
                        maxlength: 16,
                    },
                    password_confirmation: {
                        required: true,
                        password: false,
                        equalTo: "#password"
                    },
                },
                messages: {
                    password_confirmation: {
                        required: "This field is required.",
                        equalTo: "New Password and Confirm Password does not match."
                    }
                },
                submitHandler: function(form) {
                    $('.loader-btn').removeClass("d-none");
                    $(".submitbutton").attr("type", "button");
                    $('.submitbutton').prop('disabled', true);
                    form.submit();
                },

                /* This method is to display error message at proper place for select2 type of selects*/
                errorPlacement: function(error, element) {
                    if (element.attr("id") == "password" || element.attr("id") ==
                        "password_confirmation" || element.attr("id") == "oldpassword") {
                        error.insertAfter(element.parent("div"));
                    } else {
                        error.insertAfter(element);
                    }
                },
                /* This method is used when input is invalid it will add error class*/
                highlight: function(element, errorClass, validClass) {
                    if ($(element).attr("id") == "password" || $(element).attr("id") ==
                        "password_confirmation" || $(element).attr("id") == "oldpassword") {
                        $(element).addClass("has-error");
                        $(element).next('span').addClass('has-error');
                        $($(element).parent("div")).addClass("is-invalid");
                    } else {
                        $(element).addClass("has-error");
                    }
                },
                /* This method is used when input is valid it will remove error class*/
                unhighlight: function(element, errorClass, validClass) {
                    if ($(element).attr("id") == "password" || $(element).attr("id") ==
                        "password_confirmation" || $(element).attr("id") == "oldpassword") {
                        $(element).removeClass("has-error");
                        $(element).next('span').removeClass('has-error');
                        $($(element).parent("div")).removeClass("is-invalid");
                    } else {
                        $(element).removeClass("has-error");
                    }
                }
            });

            $.validator.addMethod("password", function(value, element) {
                let password = value;
                if (!(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[#?!@$%^&*-])/.test(password))) {
                    return false;
                }
                return true;
            }, function(value, element) {
                let password = $(element).val();
                if (!(/^(?=.*[A-Z])/.test(password))) {
                    return "@lang('admin.uppercasePassword')";
                } else if (!(/^(?=.*[a-z])/.test(password))) {
                    return "@lang('admin.lowercasePassword')";
                } else if (!(/^(?=.*[0-9])/.test(password))) {
                    return "@lang('admin.digitPassword')";
                } else if (!(/^(?=.*[#?!@$%^&*-])/.test(password))) {
                    return "@lang('admin.specialcharacterPassword')";
                }
                return false;
            });

            /* Phone Number Validation Allow Only Number */
            $.validator.addMethod("mobile_number", function(value, element) {
                return this.optional(element) || /^[0-9]*$/.test(value);
            }, "@lang('admin.phoneNumberValid')");
        });
    </script>
@endsection