@extends('layouts.adminLayout.dashboardLayout')
@section('content')
    <main role="main" class="flex-shrink-0">
        <div class="container custom-container">
            <div class="login-5 mt-50 mb-50">
                <div class="container-fluid">
                    <div class="row no-gutters">
                        <div class="col-sm-12">
                            <div class="content-body">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="local">
                                        <div class="row no-gutters">
                                            <div class="col-sm-12">
                                                <div class="card">
                                                    <div
                                                        class="card-header d-flex align-items-center justify-content-between py-3 px-3">
                                                        <h4 class="mb-0 fw-bold fs-4">Profile Update</h4>

                                                    </div>
                                                    <div class="card-body">
                                                        <div class="custom-form">
                                                            <form id="CreateUserForm" action="{{ route('profile.update') }}"
                                                                method="post" autocomplete="off"
                                                                enctype="multipart/form-data">
                                                                @csrf
                                                                @method('PATCH')
                                                                <div class="row">


                                                                    <div class="form-group col-md-6">
                                                                        <label>Email <span
                                                                                class="astric-sign text-danger">*</span></label>
                                                                        <div class="mb-3 field-Email">



                                                                            <input type="text" id="Email"
                                                                                class="form-control form-control-sm valid-field remove-first-space"
                                                                                name="Email" maxlength="200"
                                                                                value="{{ isset($data->Email) ? $data->Email : null }}"
                                                                                placeholder="Enter Email"
                                                                                aria-required="true" readonly>

                                                                            @error('Email')
                                                                                <div class="invalid">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>

                                                                    <div class="form-group col-md-6">
                                                                        <label>Mobile No <span
                                                                                class="astric-sign text-danger">*</span></label>
                                                                        <div class="mb-3 field-MobileNo">



                                                                            <input type="text" id="MobileNo"
                                                                                class="form-control form-control-sm valid-field remove-first-space"
                                                                                name="MobileNo" maxlength="10"
                                                                                value="{{ isset($data->MobileNo) ? $data->MobileNo : null }}"
                                                                                placeholder="Enter Mobile No"
                                                                                onkeypress="return blockSpecialChar(event,'numeric')"
                                                                                minlength="10" aria-required="true" readonly>

                                                                            @error('MobileNo')
                                                                                <div class="invalid">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>

                                                                    <div class="form-group col-md-6">
                                                                        <label>Full Name <span
                                                                                class="astric-sign text-danger">*</span></label>
                                                                        <div class="mb-3 field-FullName required">

                                                                            <input type="text" id="Name"
                                                                                class="form-control form-control-sm required valid-field remove-first-space"
                                                                                name="FullName" id="FullName"
                                                                                maxlength="200"
                                                                                value="{{ isset($data->FullName) ? $data->FullName : null }}"
                                                                                placeholder="Enter Full Name"
                                                                                onkeypress="return blockSpecialChar(event,'alpha')"
                                                                                aria-required="true">

                                                                            @error('FullName')
                                                                                <div class="invalid">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>

                                                                    <div class="form-group col-md-6">
                                                                        <label>Date of Birth <span
                                                                                class="astric-sign text-danger">*</span></label>
                                                                        <div class="mb-3 field-dashboard-dob required">

                                                                            <input type="date" id="dashboard-dob"
                                                                                class="form-control hasDatepicker valid-field"
                                                                                name="DOB"
                                                                                value="{{ isset($data->DOB) ? date('Y-m-d', strtotime($data->DOB)) : null }}"
                                                                                autocomplete="off" onpaste="return false"
                                                                                size="10">

                                                                            @error('DOB')
                                                                                <div class="invalid">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>




                                                                    <div class="form-group col-md-6 d-flex">

                                                                        <div class="flex-grow-1">

                                                                            <label>Profile Image </label>
                                                                            <input type="file" id="ProfileImage" name="ProfileImage" class="form-control" accept="image/png, image/gif, image/jpeg">
                                                                        </div>


                                                                        <div class="mx-2">
                                                                            @if(!empty($data->ProfileImage) && file_exists(public_path('admin/' . $data->ProfileImage)))
                                                                            <img src="{{ asset('admin/' . $data->ProfileImage) }}" alt="Profile Image" style="width: 100px; height: 100px;">
                                                                        @endif
                                                                        </div>

                                                                        <input type="hidden" name="oldProfileImage"
                                                                            value="{{ isset($data->ProfileImage) ? $data->ProfileImage : null }}">
                                                                        @error('ProfileImage')
                                                                            <div class="invalid">
                                                                                {{ $message }}
                                                                            </div>
                                                                        @enderror

                                                                    </div>


                                                                    <div class="form-group col-md-12">
                                                                        <button type="submit" id="CreateUserFormSubmit"
                                                                            class="btn btn-warning mt-10"
                                                                            style="margin-top:40px; float:right">Update</button>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="{{ asset('assets/js/jquery.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            // alert();
            var today = new Date().toISOString().split('T')[0];
            $('.hasDatepicker').attr('max', today);
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#CreateUserFormSubmit').click(function() {
                var formIsValid = true;
                $('.valid-field').each(function() {
                    var fieldValue = $(this).val().trim();
                    if (fieldValue === '') {
                        $(this).next('span.text-danger').remove();
                        $(this).after('<span class="text-danger">*This field is required</span>');
                        if (formIsValid) {
                            $(this).focus();
                            formIsValid = false;
                        }
                    }
                });
                return formIsValid;
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const inputs = document.querySelectorAll('.remove-first-space');

            inputs.forEach(input => {
                input.addEventListener('input', function() {
                    // Remove leading spaces
                    let value = this.value.trimStart();

                    // Replace multiple spaces between words with a single space
                    value = value.replace(/\s+/g, ' ');

                    this.value = value;
                });
            });
        });
        $(document).ready(function() {
            function validateEmail(email) {
                // Regular expression for validating an email
                const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                // Test the email against the regex
                return emailRegex.test(email);
            }

            $('#CreateUserForm').on('submit', function(event) {
                const emailInput = $('#Email').val().trim();
                const panInput = $('#PanNumber').val().trim();
                const nameInput = $('#Name').val().trim();
                const BankNameInput = $('#BankName').val().trim();
                const AddressInput = $('#Address').val().trim();
                const BranchInput = $('#Branch').val().trim();
                const AccountNumberInput = $('#AccountNumber').val().trim();
                const AccountHolderNameInput = $('#AccountHolderName').val().trim();
                const IfscNumberInput = $('#IfscNumber').val().trim();
                const MobileNoInput = $('#MobileNo').val().trim();
                const PanNumberInput = $('#PanNumber').val().trim();
                const panPattern = /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/;
                const ifscPattern = /^[A-Z]{4}0[A-Z0-9]{6}$/;

                let isValid = true; // Track overall form validity

                // Clear existing error messages
                $('.text-danger').remove();

                // Name Validation
                if (nameInput.length < 2) {
                    isValid = false;
                    $('#Name').after(
                        '<span class="text-danger">Name should be minimum 2 characters.</span>');
                }

                // BankName Validation
                if (BankNameInput.length < 2) {
                    isValid = false;
                    $('#BankName').after(
                        '<span class="text-danger">Bank Name should be minimum 2 characters.</span>');
                }

                // Branch Validation
                if (BranchInput.length < 2) {
                    isValid = false;
                    $('#Branch').after(
                        '<span class="text-danger">Branch should be minimum 2 characters.</span>');
                }

                // Address Validation
                if (AddressInput.length < 12) {
                    isValid = false;
                    $('#Address').after(
                        '<span class="text-danger">Address should be minimum 12 characters.</span>');
                }

                // Account Number Validation
                if (AccountNumberInput.length < 8) {
                    isValid = false;
                    $('#AccountNumber').after(
                        '<span class="text-danger">Account Number should be minimum 8 characters.</span>'
                    );
                }

                // Account Holder Name Validation
                if (AccountHolderNameInput.length < 8) {
                    isValid = false;
                    $('#AccountNumber').after(
                        '<span class="text-danger">Account Holder Name should be minimum 8 characters.</span>'
                    );
                }

                // IFSC Validation
                if (IfscNumberInput.length < 8) {
                    isValid = false;
                    $('#IfscNumber').after(
                        '<span class="text-danger">IFSC should be minimum 8 characters.</span>');
                } else
                if (!ifscPattern.test(IfscNumberInput)) {
                    isValid = false;
                    $('#IfscNumber').after('<span class="text-danger">IFSC Format should be proper</span>');
                }

                // PAN Number Validation
                if (PanNumberInput.length < 10) {
                    isValid = false;
                    $('#PanNumber').after(
                        '<span class="text-danger">PAN Number should be minimum 10 characters.</span>');
                }

                // Mobile Number Validation
                if (MobileNoInput.length < 10) {
                    isValid = false;
                    $('#MobileNo').after(
                        '<span class="text-danger">Mobile Number should be minimum 10 characters.</span>'
                    );
                }

                // Email Validation
                if (!validateEmail(emailInput)) {
                    isValid = false;
                    $('#Email').after(
                        '<span class="text-danger">Please enter a valid email address.</span>');
                }

                // PAN Validation
                if (!panPattern.test(panInput)) {
                    isValid = false;
                    $('#PanNumber').after(
                        '<span class="text-danger">Invalid PAN Number. Format should be ABCDE1234F.</span>'
                    );
                }

                if (!isValid) {
                    event.preventDefault(); // Prevent form submission if any validation fails
                }
            });
        });
    </script>
@endsection
<style>
    .text-right {
        text-align: right !important;
    }

    .invalid {
        color: red;
    }
</style>