@extends('layouts.master')

@section('title') Edit Profile @endsection
@section('content')

@component('components.breadcrumb')
@slot('li_1') Contacts @endslot
@slot('title') Edit Profile @endslot
@endcomponent

<div class="row">
    <div class="col-xl-4">
        <div class="card overflow-hidden">
            <div class="bg-primary-subtle">
                <div class="row">
                    <div class="col-7">
                        <div class="text-primary p-3">
                            <!-- <h5 class="text-primary">Welcome Back !</h5>
                            <p>It will seem like simplified</p> -->
                        </div>
                    </div>
                    <div class="col-5 align-self-end">
                        <img src="{{ URL::asset('build/images/profile-img.png') }}" alt="" class="img-fluid">
                    </div>
                </div>
            </div>
            <div class="card-body pt-0">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="avatar-md profile-user-wid mb-4">
                            <img src="{{ isset(Auth::user()->imgurl) ? asset(Auth::user()->imgurl) : asset('build/images/users/avatar-1.jpg') }}" alt="" class="img-thumbnail rounded-circle">
                        </div>
                        <h5 class="font-size-15 text-truncate">{{ Auth::user()->name }}</h5>
                        <!-- <p class="text-muted mb-0 text-truncate">UI/UX Designer</p> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- end card -->

        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Edit Password Information</h4>

                <div class="row">
            
                    <form class="form-horizontal" method="POST" enctype="multipart/form-data" action="update-password-profile">
                        @csrf
                            <input type="hidden" value="{{ Auth::user()->id }}" name="userid">
                        

                        @if(session('danger'))
                            <div class="alert alert-danger">
                                {{ session('danger') }}
                            </div>
                        @endif
                        @if(session('success-password'))
                            <div class="alert alert-success">
                                {{ session('success-password') }}
                            </div>
                        @endif

                        <div class="mb-3">
                            <label for="new-password" class="form-label">New Password</label>
                            <div class="input-group">
                                <input type="password" class="form-control @error('newpassword') is-invalid @enderror" id="newpassword" name="newpassword" placeholder="Enter New Password">
                                <button type="button" class="btn btn-outline-secondary" onclick="togglePassword('newpassword')">👁</button>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="confirm-password" class="form-label">Confirm New Password</label>
                            <div class="input-group">
                                <input type="password" class="form-control @error('confirmnewpassword') is-invalid @enderror" id="confirmnewpassword" name="confirmnewpassword" placeholder="Enter Confirm New Password" onkeyup="checkPasswordMatch()">
                                <button type="button" class="btn btn-outline-secondary" onclick="togglePassword('confirmnewpassword')">👁</button>
                            </div>
                            <small id="password-match-msg"></small>
                        </div>               

                        <div class="mt-3 d-grid">
                            <button class="btn btn-primary waves-effect waves-light UpdateProfile" data-id="{{ Auth::user()->id }}" type="submit">Update</button>
                        </div>
                    </form>
                 
                </div>

            </div>
        </div>
        <!-- end card -->
    </div>

    <div class="col-xl-8">

        <h4 class="card-title mb-4">Personal Information</h4>
       
        <div class="row">
            @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            <form class="form-horizontal" method="POST" enctype="multipart/form-data" action="save-my-profile">
                @csrf
                <input type="hidden" value="{{ Auth::user()->id }}" id="userid" name="userid">

                    <div class="row">
                        <div class="col-12">
                            <label for="avatar">Company Logo</label>
                            <div class="input-group">
                                <input type="file" class="form-control @error('avatar') is-invalid @enderror" id="imgurl" name="imgurl">
                                <label class="input-group-text" for="avatar">Upload</label>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12"><br>
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" value="{{ Auth::user()->name }}" name="name" placeholder="Enter Name">
                        </div>

                        <div class="col-6"><br>
                            <label for="email" class="form-label">Email</label>
                            <input type="text" class="form-control @error('email') is-invalid @enderror" value="{{ Auth::user()->email }}" id="email" name="email" placeholder="Enter Email">
                        </div>
                        

                        <div class="col-6"><br>
                            <label for="phonenumber" class="form-label">Phone Number</label>
                            <input type="text" class="form-control @error('phonenumber') is-invalid @enderror" value="{{ Auth::user()->phonenumber }}" id="phonenumber" name="phonenumber" placeholder="Enter Phone Number" readonly>
                        </div>
                    </div>

                    <div class="row"> 
                        
                        <div class="col-6"><br>
                            <label for="bankname" class="form-label">Bank Name</label>
                            <input type="text" class="form-control @error('bankname') is-invalid @enderror" value="{{ Auth::user()->bankname }}" id="bankname" name="bankname" placeholder="Enter Bank Name">
                        </div>
                    
                        <div class="col-6"><br>
                            <label for="accountbank" class="form-label">Account Bank Number</label>
                            <input type="text" class="form-control @error('accountbank') is-invalid @enderror" value="{{ Auth::user()->accountbank }}" id="accountbank" name="accountbank" placeholder="Enter Account Bank Number">
                        </div>

                    </div>
                
                    <div class="row"> 
                
                        <div class="col-4"><br>
                            <label for="companyssm" class="form-label">Company SSM</label>
                            
                            <input type="text" class="form-control @error('companyssm') is-invalid @enderror" value="{{ Auth::user()->companySSM }}" id="companySSM" name="companySSM" placeholder="Enter Company SSM">
                        </div>

                        
                        <div class="col-4"><br>
                            <label for="companyname" class="form-label">Company Name</label>
                            <input type="text" class="form-control @error('companyname') is-invalid @enderror" value="{{ Auth::user()->companyName }}" id="companyName" name="companyName" placeholder="Enter Company Name">
                        </div>
                    
                        <div class="col-4"><br>
                            <label for="companytype" class="form-label">Company Type</label>
                            <select class="form-control @error('companytype') is-invalid @enderror" id="companytype" name="companytype">
                                <option value=""> -- Select Company Type -- </option>
                                <option value="Personal" {{ Auth::user()->companyType == 'Personal' ? 'selected' : '' }}>Personal</option>
                                <option value="Company" {{ Auth::user()->companyType == 'Company' ? 'selected' : '' }}>Company</option>
                            </select>
                        </div>


                    </div>

                

                    <div class="row"> 
                
                        <div class="col-12"><br>
                            <label for="address " class="form-label">Address</label>
                            <input type="text" class="form-control @error('address  ') is-invalid @enderror" value="{{ Auth::user()->address    }}" id="address" name="address" placeholder="Enter Address">
                        </div>

                    </div>


                

                    <div class="row"> 
                
                        <div class="col-4"><br>
                            <label for="postcode" class="form-label">Postcode</label>
                            <input type="text" class="form-control @error('postcode') is-invalid @enderror" value="{{ Auth::user()->postcode }}" id="postcode" name="postcode" placeholder="Enter Postcode">
                        </div>
                       
                        <div class="col-4"><br>
                            <label for="state" class="form-label">State</label>
                            <input type="text" class="form-control @error('state') is-invalid @enderror" value="{{ Auth::user()->state }}" id="state" name="state" placeholder="Enter Postcode">
                        </div>

                        
                        <div class="col-4"><br>
                            <label for="city" class="form-label">City</label>
                            <input type="text" class="form-control @error('city') is-invalid @enderror" value="{{ Auth::user()->city }}" id="city" name="city" placeholder="Enter Postcode">
                        </div>


                    </div>
                

                            

                <div class="mt-3 d-grid">
                    <button class="btn btn-primary waves-effect waves-light UpdateProfile" data-id="{{ Auth::user()->id }}" type="submit">Update</button>
                </div>
            </form>
         
        </div>
    </div>
</div>
<br>
<!-- end row -->


@endsection
@section('script')
<!-- apexcharts -->
<script src="{{ URL::asset('build/libs/apexcharts/apexcharts.min.js') }}"></script>

<!-- profile init -->
<script src="{{ URL::asset('build/js/pages/profile.init.js') }}"></script>

    <script>
    $(document).ready(function() {
        $('#state').on('change', function() {
            let stateId = $(this).val();
            if (stateId != 0) {
                $.ajax({
                    url: 'get-cities/' + stateId,
                    type: 'GET',
                    success: function(data) {
                        $('#city').empty().append('<option value="0"> -- select city -- </option>');
                        $.each(data, function(key, city) {
                            $('#city').append('<option value="'+ city.id +'">'+ city.cityname +'</option>');
                        });
                    }
                });
            } else {
                $('#city').empty().append('<option value="0"> -- select city -- </option>');
            }
        });
    });
    </script>

<script>
function togglePassword(id) {
    let input = document.getElementById(id);
    input.type = input.type === "password" ? "text" : "password";
}

function checkPasswordMatch() {
    const newPass = document.getElementById('newpassword').value;
    const confirmPass = document.getElementById('confirmnewpassword').value;
    const msg = document.getElementById('password-match-msg');

    if (confirmPass === "") {
        msg.textContent = "";
        return;
    }

    if (newPass === confirmPass) {
        msg.textContent = "✅ Passwords match";
        msg.style.color = "green";
    } else {
        msg.textContent = "❌ Passwords do not match";
        msg.style.color = "red";
    }
}
</script>

<script>
    $('#update-profile').on('submit', function(event) {
        event.preventDefault();
        var Id = $('#data_id').val();
        let formData = new FormData(this);
        $('#emailError').text('');
        $('#nameError').text('');
        $('#dobError').text('');
        $('#avatarError').text('');
        $.ajax({
            url: "{{ url('update-profile') }}" + "/" + Id,
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                $('#emailError').text('');
                $('#nameError').text('');
                $('#dobError').text('');
                $('#avatarError').text('');
                if (response.isSuccess == false) {
                    alert(response.Message);
                } else if (response.isSuccess == true) {
                    setTimeout(function() {
                        window.location.reload();
                    }, 1000);
                }
            },
            error: function(response) {
                $('#emailError').text(response.responseJSON.errors.email);
                $('#nameError').text(response.responseJSON.errors.name);
                $('#dobError').text(response.responseJSON.errors.dob);
                $('#avatarError').text(response.responseJSON.errors.avatar);
            }
        });
    });
</script>

@endsection