@extends('layouts.admin')


@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">


                        @include('layouts.partials.left_navbar')

                        <div class="col-sm-8">
                            <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" style="background-color: #d0d9d4;">
                                                        <span class="font-weight-bold fs-5"> Personal &amp; Bank
                                                            Details</span>
                                                    </div>



                                                    <div class="card-body">
                                                        <div class="custom-form">
                                                            <form id="CreateUserForm" action="{{ route('update-profile') }}"
                                                                method="post" autocomplete="off"
                                                                enctype="multipart/form-data">
                                                                @csrf
                                                                <div class="row">
                                                                    <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($userProfile->vendorDetails->{'Name'}) ? $userProfile->vendorDetails->{'Name'} : 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>Email <span
                                                                                class="astric-sign text-danger">*</span></label>
                                                                        <div class="mb-3 field-Email required">

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

                                                                            @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 required">

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

                                                                            @error('MobileNo')
                                                                                <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($userProfile->{'Vendor D_O_B'}) ? date('Y-m-d', strtotime($userProfile->{'Vendor D_O_B'})) : 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">
                                                                        <label>Address <span
                                                                                class="astric-sign text-danger">*</span></label>
                                                                        <div class="mb-3 field-Address required">

                                                                            <input type="text" id="Address"
                                                                                class="form-control form-control-sm valid-field remove-first-space"
                                                                                name="Address"
                                                                                value="{{ isset($userProfile->vendorDetails->{'Address'}) ? $userProfile->vendorDetails->{'Address'} : null }}"
                                                                                maxlength="500" placeholder="Enter Address" aria-required="true">

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

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

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

                                                                            @error('BankName')
                                                                                <div class="invalid">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group col-md-6">
                                                                        <label>Branch Name <span
                                                                                class="astric-sign text-danger">*</span></label>
                                                                        <div class="mb-3 field-Branch required">


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

                                                                            @error('Branch')
                                                                                <div class="invalid">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group col-md-6">
                                                                        <label>IFSC <span
                                                                                class="astric-sign text-danger">*</span></label>
                                                                        <div class="mb-3 field-IfscNumber required">

                                                                            <input type="text" id="IfscNumber"
                                                                                class="form-control form-control-sm valid-field remove-first-space"
                                                                                name="IFSCCode" maxlength="11"
                                                                                value="{{ isset($userProfile->{'IFSC Code'}) ? $userProfile->{'IFSC Code'} : null }}"
                                                                                placeholder="Enter IFSC"
                                                                                onkeypress="return blockSpecialChar(event,'alphanumeric')"
                                                                                aria-required="true">

                                                                            @error('IFSCCode')
                                                                                <div class="invalid">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                    <div class="form-group col-md-6">
                                                                        <label>Account Number <span
                                                                                class="astric-sign text-danger">*</span></label>
                                                                        <div class="mb-3 field-AccountNumber required">

                                                                            <input type="text" id="AccountNumber"
                                                                                class="form-control form-control-sm required valid-field remove-first-space"
                                                                                name="AccountNumber" maxlength="16"
                                                                                value="{{ isset($userProfile->{'Vendor Account No_'}) ? $userProfile->{'Vendor Account No_'} : null }}"
                                                                                placeholder="Enter Account Number"
                                                                                onkeypress="return blockSpecialChar(event,'numeric')"
                                                                                aria-required="true">

                                                                            @error('AccountNumber')
                                                                                <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>
                                                                                                                                                    <input type="hidden" name="oldProfileImage"
                                                                                value="{{ isset($userProfile->{'Profile Image'}) ? $userProfile->{'Profile Image'} : null }}">
                                                                             @error('ProfileImage')
                                                                                <div class="invalid">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        
                                                                    </div>
                                                                    <div class="form-group col-md-6">
                                                                        <label>PAN Number <span
                                                                                class="astric-sign text-danger">*</span></label>

                                                                        <div class="mb-3 field-PanNumber required">

                                                                            <input type="text" id="PanNumber"
                                                                                class="form-control form-control-sm remove-first-space"
                                                                                name="PanNumber" maxlength="10"
                                                                                placeholder="Enter PAN Number"
                                                                                value="{{ isset($userProfile->VendorPanDetails->{'P_A_N_ No_'}) ? $userProfile->VendorPanDetails->{'P_A_N_ No_'} : null }}"
                                                                                onkeypress="return blockSpecialChar(event,'alphanumeric')"
                                                                               aria-required="true">
                                                                            @error('PanNumber')
                                                                                <div class="invalid">
                                                                                    {{ $message }}
                                                                                </div>
                                                                            @enderror
                                                                        </div>
                                                                    </div>

                                                            
                                                                    <div class="form-group col-md-6 d-flex">
                                                                        <div class="flex-grow-1">
                                                                            <label>PAN Image </label>
                                                                            <input name="PANImage" type="file"
                                                                                accept="image/png, image/gif, image/jpeg, application/pdf"
                                                                                id="PANImage" class="form-control">
                                                                        </div>
                                                                                                                                                    <input type="hidden" name="oldPANImage"
                                                                                value="{{ isset($userProfile->{'PAN Image Path'}) ? $userProfile->{'PAN Image Path'} : null }}">
                                                                            <div class="invalid-feedback"></div>
                                                                        
                                                                    </div>

                                                                    <div class="form-group col-md-6 d-flex">
                                                                        <div class="flex-grow-1">
                                                                            <label>Cancelled Cheque <span
                                                                                class="astric-sign text-danger">*</span></label>
                                                                            <input type="file" id="Cheque"
                                                                                class="form-control" name="Cheque"
                                                                                accept="image/png, image/gif, image/jpeg, application/pdf">
                                                                                @error('Cheque')
                                                                                    <div class="invalid">
                                                                                        {{ $message }}
                                                                                    </div>
                                                                                @enderror
                                                                        </div>

                                                                                                                                                <input type="hidden" name="oldCheque"
                                                                            value="{{ isset($userProfile->{'Cancelled Cheque Path'}) ? $userProfile->{'Cancelled Cheque Path'} : null }}">
                                                                        <div class="invalid-feedback"></div>
                                                                    </div>
                                                                    {{-- <div class="mb-3 field-ChequeOld">

                                                                        <input type="hidden" id="ChequeOld"
                                                                            class="form-control" name="ChequeOld"
                                                                            value="https://billing.ntaonline.in:4433/backend/web/uploads/91341713766032.jpg">

                                                                        <div class="invalid-feedback"></div>
                                                                    </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 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>');
            }

            // 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>