@extends('layout.customerapp')
@section('title','- Home')
@section('customerbody')

    <div class="card col-xl-8">
        <h5 class="card-header">Profile Details</h5>
        <!-- Account -->

        <hr class="my-0" />
        <div class="card-body">
            <form id="formAccountSettings" method="POST" onsubmit="return false">
                <div class="row">
                    <div class="mb-3 col-md-12">
                        <label for="firstName" class="form-label">First Name</label>
                        <input class="form-control" type="text" id="firstName" name="firstName" value="{{session()->get('name')}}" autofocus/>
                    </div>
                    <div class="mb-3 col-md-6">
                        <label for="lastName" class="form-label">Phone Number</label>
                        <input class="form-control" type="text" name="lastName" id="lastName" value="{{session()->get('phone')}}" />
                    </div>
                    <div class="mb-3 col-md-6">
                        <label for="email" class="form-label">E-mail</label>
                        <input class="form-control" type="text" id="email" name="email" value="{{session()->get('email')}}" placeholder="john.doe@example.com"/>
                    </div>

                    <div class="mb-3 col-md-12">
                        <label for="address" class="form-label">Address</label>
                        <input type="text" class="form-control" id="address" name="address" value="{{session()->get('address')}}" placeholder="Address" />
                    </div>

                </div>
                <div class="mt-2">
                    <button type="submit" class="btn btn-primary me-2">Edit Profile</button>
                    <button type="reset" class="btn btn-outline-secondary">Cancel</button>
                </div>
            </form>
        </div>
        <!-- /Account -->
    </div>
@endsection
@section('script')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Get all the input elements
        const inputs = document.querySelectorAll('#formAccountSettings input');
        const editButton = document.getElementById('editButton');

        // Function to enable editing
        function enableEditing() {
            inputs.forEach(function(input) {
                input.removeAttribute('readonly');
            });
            editButton.textContent = "Save Profile"; // Change button text to 'Save'
            editButton.setAttribute('type', 'submit'); // Change button type to submit
        }

        // Add click event to the Edit Profile button
        editButton.addEventListener('click', enableEditing);
    });
</script>

@endsection