@extends("website.service-providers.layouts.layout")
@section('title',"Services")
@section("body")
<section class="banner-services">
        <img class="banner-background-ellipse" src="{{ asset('webAssets/assets/images/banner-bg-img.png') }}" alt="">
</section>

    <!--- Breadcrumbs section -->

    <section class="services-breadcrumb-section dashboard-breadcrumb">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">My Profile</li>
                    <li class="breadcrumb-item active" aria-current="page">Team Member</li>
                    <li class="breadcrumb-item active" aria-current="page">Edit Team Member</li>
                </ol>
            </nav>

        </div>
    </section>


    <!-- Main section started -->

    <section class="dashboard-main">
        <div class="container">
            <div class="row">
                @include("website.service-providers.includes.sidebar")
                @include("website.layouts.modal")                
                <div class="main-content block-view">
                    <div class="profile-info-header d-flex justify-content-between align-items-center">
                        <div class="profile-info-top-items d-flex justify-content-between gap-4px">
                            <h3 class="font-size-24">Profile Info</h3>
                            <a onclick="showEditWindow(); return false;">
                                <img src="{{ asset('webAssets/assets/images/edit-icon.svg') }}" alt="edit-icon">
                            </a>
                        </div>
                       
                        <div class="share-profile-action-btn">
                            <a type="button" href="" class="btn btn-primary d-flex align-items-center">
                                <img src="{{ asset('webAssets/assets/images/upload-icon.svg') }}" alt="upload-icon">Share Profile 
                            </a>
                        </div>
                    </div>
                    <div class="main-content-wrapper my-profile provider">
                        <div class="profile-info d-flex flex-column">
                            
                     
                            <div class="profile-icon user-profile-icon">
                            <img src="{{ asset('bussiness_employee/' . $responseData['profile_image']) }}" alt="profile-img">

                                <h4 class="head font-size-16">Basic Information</h4>
                            </div>
                            <div class="user-profile-info d-flex gap-12px">
                                <div class="profile-name user-profile-info-item">
                                    <h3 class="font-size-14">Name</h3>
                                    <p class="name">{{$responseData['full_name']}}</p>
                                </div>
                                <div class="profile-email user-profile-info-item">
                                    <h3 class="font-size-14">Email</h3>
                                    <p class="name">{{$responseData['email']}}</p>
                                </div>
                            </div>
                            <div class="user-profile-info d-flex gap-12px">
                                <div class="profile-number user-profile-info-item">
                                    <h3 class="font-size-14">Phone Number</h3>
                                    <p class="phone" id="phone">{{$responseData['phone']}}</p>
                                </div>
                                <div class="profile-code user-profile-info-item">
                                    <h3 class="font-size-14">Postal Code</h3>
                                    <p class="name">{{$responseData['postal_code']}}</p>
                                </div>
                            </div>
                            <div class="user-profile-info d-flex gap-12px">
                                <div class="profile-country user-profile-info-item">
                                    <h3 class="font-size-14">Country</h3>
                                    <p class="name">{{$responseData['country']}}</p>
                                </div>
                                <div class="profile-bio user-profile-info-item">
                                    <h3 class="font-size-14">Bio </h3>
                                    <p class="name"></p>
                                </div>
                            </div>

                            <div class="profile-address user-profile-info-item">
                                <h3 class="font-size-14">Address </h3>
                                <p class="name">{{$responseData['address']}}</p>
                            </div>

                            <div class="pause-header-items d-flex justify-content-between">
                                <h3 class="font-size-18">Pause Account</h3>
                                <div class="authentication-switch">
                                    <label class="switch">
                                        <span id="pause-account-toggle" type="button" data-bs-toggle="modal" data-bs-target="#pause-account" class="slider round"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="main-content block-edit" style="display: none;">
                    <div class="profile-upload-img">
                        <span class="file-upload-img user-profile-icon"> 
                            <input class="form-control" type="file" id="formFile">
                            <img src="{{ asset('bussiness_employee/' . $responseData['profile_image']) }}" alt="user">
                        </span>
                    </div>
                    <div class="main-content-edit-profile d-flex gap-24px">
                    <div class="main-content-wrapper my-profile provider-edit d-flex flex-column gap-4px">   
                        <h3 class="head font-size-16">Basic Information</h3>     
                        <div class="profile-info d-flex flex-column">
                            <div class="edit-profile-form ">
                                <form action="" class="d-flex flex-column forms">
                                    <div class="edit-form-field d-flex ">
                                        <div class="edit-form-field d-flex flex-column providers-edit-profile">
                                            <h3 class="font-size-14">First Name</h3>
                                            <input type="text" placeholder="First Name" value="{{$responseData['first_name']}}" name="first_name">
                                        </div>
                                        <div class="edit-form-field d-flex flex-column providers-edit-profile">
                                            <h3 class="font-size-14">Last Name</h3>
                                            <input type="text" placeholder="Last Name" value="{{$responseData['last_name']}}" name="last_name">
                                        </div>
                                    </div>
                                    <div class="edit-form-field d-flex flex-column">
                                        <h3 class="font-size-14">Email</h3>
                                        <input disabled readonly type="email" placeholder="Email" value="{{$responseData['email']}}" name="email">
                                    </div>
                                    <div class="edit-form-field d-flex flex-column">
                                        <h3 class="font-size-14">Phone Number</h3>
                                        <input type="text" placeholder="Phone Number" value="{{$responseData['phone']}}" name="phone" id="edit-phone">
                                    </div>
                                    <div class="edit-form-field d-flex flex-column">
                                        <h3 class="font-size-14">Country</h3>
                                        <input type="text" placeholder="Country" value="{{$responseData['country']}}" name="country">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="main-content-wrapper my-profile provider-edit  d-flex flex-column gap-4px">   
                        <h3 class="head font-size-16">Address</h3>   
                        <div class="profile-info d-flex flex-column">
                            <div class="edit-profile-form ">
                                <form class="d-flex flex-column forms">
                                    <div class="edit-form-field d-flex flex-column">
                                        <h3 class="font-size-14">Street Name</h3>
                                        <input type="text" placeholder="Street Name" value="{{$responseData['street_name']}}" name="street_name">
                                    </div>
                                    <div class="edit-form-field d-flex">
                                        <div class="edit-form-field d-flex flex-column providers-edit-profile">
                                            <h3 class="font-size-14">Apt/Suite</h3>
                                            <input type="text" placeholder="Apt/Suite" value="{{$responseData['apt_suite']}}" name="apt_suite">
                                        </div>
                                        <div class="edit-form-field d-flex flex-column providers-edit-profile">
                                            <h3 class="font-size-14">City</h3>
                                            <input type="text" placeholder="City" value="{{$responseData['city']}}" name="city">
                                        </div>
                                    </div>
                                    <div class="edit-form-field d-flex">
                                        <div class="edit-form-field d-flex flex-column providers-edit-profile">
                                            <h3 class="font-size-14">State</h3>
                                            <input type="text" placeholder="State" value="{{$responseData['state']}}" name="state">
                                        </div>
                                        <div class="edit-form-field d-flex flex-column providers-edit-profile">
                                            <h3 class="font-size-14">Postal Code</h3>
                                            <input type="text" placeholder="Postal Code" value="{{$responseData['postal_code']}}" name="postal_code">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="profile-action-btn accounr-edit-profile d-flex block-edit">                            
                    <a type="button" class="btn btn-primary formSubmit">
                        Save
                    </a>
                </div>
            </div>
        </div>
    </section>

<script>
    function showEditWindow() {
        const viewWindows = document.querySelectorAll('.block-view');
        const editWindows = document.querySelectorAll('.block-edit');
        viewWindows.forEach(element => {
            element.style.display = 'none';
        });
        editWindows.forEach(element => {
            element.style.display = 'block';
        });
    }

    function showViewWindow() {
        const viewWindows = document.querySelectorAll('.block-view');
        const editWindows = document.querySelectorAll('.block-edit');
        viewWindows.forEach(element => {
            element.style.display = 'block';
        });
        editWindows.forEach(element => {
            element.style.display = 'none';
        });
    }
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#verifyOTPModal').on('hidden.bs.modal', function () {
            resetOTPInputFields();
        });

        function getOTP() {
            var otp = '';
            $('.otp-input-block input').each(function() {
                otp += $(this).val();
            });
            return otp;
        }
        
        $('.formSubmit').on('click', function(event) {
            event.preventDefault(); 

            var phoneNumber = $('#edit-phone').val();
    
            $('#verifyOTPModal #number').text(phoneNumber);
            $('#verifyOTPModal').modal('show');
        });


        $('#verifyOTPModal .btn-primary').off('click').on('click', function() {
        var fData = new FormData();
        fData.append('number', $('#number').text());
        fData.append('otp', getOTP());


        $.ajax({
            url: "{{ route('sp.validateOTP') }}",
            method: 'POST',
            data: fData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    if(response.success.status == 200){
                        /* START */
                        handleProfileUpdate();
                        /* END */
                    }
                    else if(response.success.status == 401){
                        toastr.error('Invalid OTP entered');
                    }
                } else if (response.error) {
                }
            },
            error: function(xhr, status, error) {
                toastr.error('There was some problem while verifying OTP');
            }
        });
    });
    });

    

    function handleProfileUpdate(){
        var formData = new FormData();
        formData.append('first_name', $("input[name='first_name']").val());
        formData.append('last_name', $("input[name='last_name']").val());
        formData.append('phone', $("input[name='phone']").val());
        formData.append('postal_code', $("input[name='postal_code']").val());
        formData.append('country', $("input[name='country']").val());
        formData.append('street_name', $("input[name='street_name']").val());
        formData.append('apt_suite', $("input[name='apt_suite']").val());
        formData.append('city', $("input[name='city']").val());
        formData.append('state', $("input[name='state']").val());
        var fileInput = document.getElementById('formFile');
        if (fileInput.files.length > 0) {
            formData.append('profile', fileInput.files[0]);
        }

        $.ajax({
            url: "{{ route('sp.updateProfile') }}",
            method: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                console.log(response);
                if(response.status == 200){
                    $('.block-view').load(window.location.href + ' .block-view > * ');
                    // $('.block-edit').load(window.location.href + ' .block-edit > * ');
                    showViewWindow();
                    $('#verifyOTPModal').modal('hide');
                    toastr.success(response.success.message);
                    resetOTPInputFields();
                }
                else if(response.status == 401){
                    toastr.error(response.error.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('There was a problem with your AJAX request:', error);
            }
        });
    }
    function resetOTPInputFields() {
        $('.otp-input-block input').val('');
    }

    function previewImage(event) {
        var reader = new FileReader();
        reader.onload = function () {
            var output = document.getElementById('previewImage');
            output.src = reader.result;
        }
        reader.readAsDataURL(event.target.files[0]);
    }
</script>

<script>
    $(document).ready(function() {
        $('#confirm-pause-account').on('click', function() {
            $('#pause-account-toggle').prop('checked', true);
            $('#verifyOTPModal').modal('hide');
            // var userId = {{ Auth::guard('web_sp')->user()->id }}; 
            // $.ajax({
            //     url: '/api/pause-account',
            //     type: 'POST',
            //     data: {
            //         user_id: userId,
            //         _token: '{{ csrf_token() }}'
            //     },
            //     success: function(response) {
            //         $('#pause-account').modal('hide');
            //         $('#successful-pause-account').modal('show');
            //         console.log('Account paused successfully:', response);
            //     },
            //     error: function(xhr, status, error) {
            //         console.error('Failed to pause account:', error);
            //     }
            // });
        });
    });
</script>
@endsection