@extends('admin.layouts.app')

@section('content')
        <div class="container-fluid py-4">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb bg-transparent mb-0 pb-0 px-0 me-sm-6 me-5">
                    <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.dashboard') }}">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.staff-listing.index') }}">Staff Listing</a>
                    </li>
                    <li class="breadcrumb-item text-sm text-dark active font-weight-bolder" aria-current="page">
                        Staff Edit</li>
                </ol>
            </nav>
            <div class="row">
                <div class="col-12">
                    <div class="row justify-content-between mt-4">
                        <div class="col-md-4">
                            <a class="btn bg-gradient-info mb-3" href="{{ route('admin.staff-listing.index') }}">Back</a>
                        </div>
                    </div>
                </div>
            </div>
            <form role="form" action="{{ route('admin.staff-listing.update', $staff->id) }}" id="staff-form" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
                <div class="row justify-content-center">
                    <div class="col-md-8 col-sm-12">
                        <div class="card pt-4 mb-4">
                            <div class="card-body pt-0 pb-2">
                                {{-- <div class="row">
                                    <div class="col-md-6">
                                        <label>Staff Name <span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="text" class="form-control" placeholder="Your Name"
                                                aria-label="Email" aria-describedby="username-addon" id="staff_name" name="staff_name" value="{{ @$staff->staff_name }}">
                                                <div id="staff_name_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Staff Code</label>
                                        <div class="mb-3">
                                            <input type="num" class="form-control" placeholder="50101"
                                                aria-label="Email" aria-describedby="username-addon" name="staff_code" id="staff_code" value="{{ @$staff->staff_code }}" readonly>
                                                <div id="staff_code_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Mobile <span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="text" class="form-control" placeholder="09805363015"
                                                aria-label="Email" aria-describedby="username-addon" id="staff_mobile" name="staff_mobile" value="{{ @$staff->staff_mobile }}">
                                            <div id="staff_mobile_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Select Roles <span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <select class="form-select w-100" id="staff_role" name="staff_role">
                                                <option value="">Roles</option>
                                                @foreach($roles as $role)
                                                    <option value="{{ $role->id }}" @if($staff->staff_role == $role->id) selected @endif>{{ $role->name }}</option>
                                                @endforeach
                                            </select>
                                            <div id="staff_role_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6">
                                        <label>Email <span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="email" class="form-control" placeholder="Your Email"
                                                aria-label="Email" aria-describedby="username-addon" name="staff_email" value="{{ @$staff->staff_email }}" id="staff_email">
                                                <div id="staff_email_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>User Name <span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="text" class="form-control" placeholder="Your Username"
                                                aria-label="Email" aria-describedby="username-addon" id="staff_username" name="staff_username" value="{{ @$staff->staff_username }}" readonly>
                                                <div id="staff_username_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Aadhaar No. <span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="num" class="form-control" placeholder="1111 2222 3333"
                                                aria-label="Email" aria-describedby="username-addon" id="staff_aadhar_no" name="staff_aadhar_no" value="{{ @$staff->staff_aadhar_no }}" maxlength="12">
                                                <div id="staff_aadhar_no_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Password <span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="password" class="form-control" placeholder="******"
                                                aria-label="Email" aria-describedby="username-addon" id="staff_password" name="staff_password" value="">
                                                <div id="staff_password_error" class="text-danger"></div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label>Address Line 1<span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="text" class="form-control" placeholder="Address Line 1" aria-label="Email" aria-describedby="username-addon" id="staff_address_first" name="staff_address_first" value="{{ @$staff->staff_address_first }}">
                                            <div id="staff_address_first_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Passcode <span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="num" class="form-control" placeholder="4555" aria-label="Email"
                                                aria-describedby="username-addon" name="staff_passcode" id="staff_passcode" value="{{ @$staff->staff_passcode }}">
                                                <div id="staff_passcode_error" class="text-danger"></div>

                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <label>Address Line 2<span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="text" class="form-control" placeholder="Address Line 2" aria-label="Email" aria-describedby="username-addon" id="staff_address_second" name="staff_address_second" value="{{ @$staff->staff_address_second }}">
                                            <div id="staff_address_second_error" class="text-danger"></div>
                                            @if(@$staff->staff_address_second == null)
                                                <div class="form-check mt-2">
                                                    <input type="checkbox" class="form-check-input" id="copy_address_checkbox">
                                                    <label class="form-check-label" for="copy_address_checkbox">Same as Address Line 1</label>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>State</label>
                                        <div class="mb-3">
                                            <select class="form-select w-100" id="stateSelect" name="state">
                                                <option selected="" disabled="" value="">State</option>
                                                @foreach($states as $stateName)
                                                    <option value="{{ $stateName->state_id }}" {{ $staff->staff_state == $stateName->state_id ? 'selected' : '' }}>
                                                        {{ $stateName->state_title }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('state')
                                            {{ $message }}
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>Pincode <span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="text" class="form-control" placeholder="176001"
                                                aria-label="Email" aria-describedby="username-addon" id="staff_pincode" name="staff_pincode" value="{{ @$staff->staff_pincode }}">
                                                <div id="staff_pincode_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>District</label>
                                        <div class="mb-3">
                                            <select class="form-select w-100" id="districtSelect" name="district">
                                                @if ($staff->staff_state)
                                                    <option value="{{ @$district->districtid }}" {{ $staff->staff_district == @$district->districtid ? 'selected' : '' }}>
                                                        {{ @$district->district_title }}
                                                    </option>
                                                @else
                                                    <option selected value="">District</option>
                                                @endif
                                            </select>
                                            @error('district')
                                            {{ $message }}
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="profile-upload" id="profile-label">Profile <span class="required-mark">*</span></label>
                                            <div class="mb-3">
                                            <div class="profile-wrap">
                                                @if($staff->staff_picture != null)
                                                    <img id="profile-image" class="profile-upload" src="{{ asset($staff->staff_picture) . '?t=' . time() }}" alt="" />
                                                @else
                                                    <img id="profile-image" class="profile-upload" src="{{ asset('admin-asset/assets/img/profile.jpeg') }}" alt="" />
                                                @endif
                                            </div>
                                            <input type="file" name="image" id="profile-upload" accept="image/*" style="">
                                            </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label>City <span class="requered-mark">*</span></label>
                                        <div class="mb-3">
                                            <input type="text" class="form-control" placeholder="Your City"
                                                aria-label="Email" aria-describedby="username-addon" name="staff_city" id="staff_city" value="{{ @$staff->staff_city }}">
                                                <div id="staff_city_error" class="text-danger"></div>
                                        </div>
                                    </div>
                                   <div class="col-12">
                                                <button type="button" class="btn bg-gradient-info mb-3" style="float: right;" id="saveButton">Update</button>
                                            </div>
                                </div> --}}

                                <div class="row justify-content-center">
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>Staff Name <span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <input type="text" class="form-control" placeholder="Your Name"
                                                        aria-label="Email" aria-describedby="username-addon" id="staff_name" name="staff_name" value="{{ @$staff->staff_name }}">
                                                        <div id="staff_name_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>Staff Code</label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <input type="num" class="form-control" placeholder="50101"
                                                        aria-label="Email" aria-describedby="username-addon" name="staff_code" id="staff_code" value="{{ @$staff->staff_code }}" readonly>
                                                        <div id="staff_code_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>Mobile <span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <input type="text" class="form-control" placeholder="09805363015"
                                                        aria-label="Email" aria-describedby="username-addon" id="staff_mobile" name="staff_mobile" value="{{ @$staff->staff_mobile }}">
                                                    <div id="staff_mobile_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>Select Roles <span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <select class="form-select w-100" id="staff_role" name="staff_role">
                                                        <option value="">Roles</option>
                                                        @foreach($roles as $role)
                                                            <option value="{{ $role->id }}" @if($staff->staff_role == $role->id) selected @endif>{{ $role->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <div id="staff_role_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>Email <span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <input type="email" class="form-control" placeholder="Your Email"
                                                        aria-label="Email" aria-describedby="username-addon" name="staff_email" value="{{ @$staff->staff_email }}" id="staff_email">
                                                        <div id="staff_email_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>User Name <span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <input type="text" class="form-control" placeholder="Your Username"
                                                        aria-label="Email" aria-describedby="username-addon" id="staff_username" name="staff_username" value="{{ @$staff->staff_username }}" readonly>
                                                        <div id="staff_username_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>Aadhaar No. <span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <input type="num" class="form-control" placeholder="1111 2222 3333"
                                                        aria-label="Email" aria-describedby="username-addon" id="staff_aadhar_no" name="staff_aadhar_no" value="{{ @$staff->staff_aadhar_no }}" maxlength="12">
                                                        <div id="staff_aadhar_no_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>Password <span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <input type="password" class="form-control" placeholder="******"
                                                        aria-label="Email" aria-describedby="username-addon" id="staff_password" name="staff_password" value="">
                                                        <div id="staff_password_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>Address Line 1<span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <input type="text" class="form-control" placeholder="Address Line 1" aria-label="Email" aria-describedby="username-addon" id="staff_address_first" name="staff_address_first" value="{{ @$staff->staff_address_first }}">
                                                    <div id="staff_address_first_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>Passcode <span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <input type="num" class="form-control" placeholder="4555" aria-label="Email"
                                                        aria-describedby="username-addon" name="staff_passcode" id="staff_passcode" value="{{ @$staff->staff_passcode }}">
                                                        <div id="staff_passcode_error" class="text-danger"></div>
        
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>Address Line 2<span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <input type="text" class="form-control" placeholder="Address Line 2" aria-label="Email" aria-describedby="username-addon" id="staff_address_second" name="staff_address_second" value="{{ @$staff->staff_address_second }}">
                                                    <div id="staff_address_second_error" class="text-danger"></div>
                                                    @if(@$staff->staff_address_second == null)
                                                        <div class="form-check mt-2">
                                                            <input type="checkbox" class="form-check-input" id="copy_address_checkbox">
                                                            <label class="form-check-label" for="copy_address_checkbox">Same as Address Line 1</label>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>State</label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <select class="form-select w-100" id="stateSelect" name="state">
                                                        <option selected="" disabled="" value="">State</option>
                                                        @foreach($states as $stateName)
                                                            <option value="{{ $stateName->state_id }}" {{ $staff->staff_state == $stateName->state_id ? 'selected' : '' }}>
                                                                {{ $stateName->state_title }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('state')
                                                    {{ $message }}
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>Pincode <span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <input type="text" class="form-control" placeholder="176001"
                                                        aria-label="Email" aria-describedby="username-addon" id="staff_pincode" name="staff_pincode" value="{{ @$staff->staff_pincode }}">
                                                        <div id="staff_pincode_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>District</label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <select class="form-select w-100" id="districtSelect" name="district">
                                                        @if ($staff->staff_state)
                                                            <!-- Only enable the district dropdown if a state is selected -->
                                                            <option value="{{ @$district->districtid }}" {{ $staff->staff_district == @$district->districtid ? 'selected' : '' }}>
                                                                {{ @$district->district_title }}
                                                            </option>
                                                        @else
                                                            <!-- If no state is selected, disable the district dropdown -->
                                                            <option selected value="">District</option>
                                                        @endif
                                                    </select>
                                                    @error('district')
                                                    {{ $message }}
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label>City <span class="requered-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <input type="text" class="form-control" placeholder="Your City"
                                                        aria-label="Email" aria-describedby="username-addon" name="staff_city" id="staff_city" value="{{ @$staff->staff_city }}">
                                                        <div id="staff_city_error" class="text-danger"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-9 mb-3">
                                        <div class="row align-items-center">
                                            <div class="col-md-4">
                                                <label for="profile-upload" id="profile-label">Profile <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="">
                                                    <div class="profile-wrap d-flex" style="align-items: center">
                                                        @if($staff->staff_picture != null)
                                                            <img id="profile-image" class="profile-upload" src="{{ asset($staff->staff_picture) . '?t=' . time() }}" alt="" />
                                                        @else
                                                            <img id="profile-image" class="profile-upload" src="{{ asset('admin-asset/assets/img/profile.jpeg') }}" alt="" />
                                                        @endif
                                                        <input type="file" name="image" id="profile-upload" accept="image/*" style="margin-left: 15px;">
                                                    {{-- <label class="btn bg-gradient-info mt-3" for="profile-upload" style="width: 120px;">Upload</label> --}}
                                                    </div>
                                                    </div>
                                                    
                                            </div>
                                        </div>
                                    </div>
                                   <div class="row justify-content-center">
                                                <button type="button" class="btn bg-gradient-info mb-3" style="max-width:150px;" id="saveButton">Update</button>
                                            </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body pb-0">
                    <h1 class="modal-title fs-5 mb-3" id="exampleModalLabel">Information</h1>
                    <p><span style="color: #198754;">Staff Added Successfully.</span></p>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button> -->
                    <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_staff.html">Ok</a>
                </div>
            </div>
        </div>
    </div>
   
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {

    document.getElementById('staff_mobile').addEventListener('input', function () {
        // Get the input value and remove non-numeric characters
        var inputValue = this.value.replace(/\D/g, '');
        // Update the input value with only numeric characters
        this.value = inputValue;
    });
        
    document.getElementById('staff_passcode').addEventListener('input', function () {
        // Get the input value and remove non-numeric characters
        var inputValue = this.value.replace(/\D/g, '');

        // Check if the input value is longer than 4 characters
        if (inputValue.length > 4) {
            // If it's longer than 4 characters, truncate it to 4 characters
            inputValue = inputValue.slice(0, 4);
        }

        // Update the input value with the sanitized and truncated value
        this.value = inputValue;
    });

    document.getElementById('staff_pincode').addEventListener('input', function () {
        // Get the input value and remove non-numeric characters
        var inputValue = this.value.replace(/\D/g, '');
        // Update the input value with only numeric characters
        this.value = inputValue;
    });

    document.getElementById('staff_code').addEventListener('input', function () {
        // Get the input value and remove non-numeric characters
        var inputValue = this.value;

        if (inputValue.length > 10) {
            // If it's more than 10 characters, truncate it to 10 characters
            inputValue = inputValue.slice(0, 10);
            // Update the input value with the truncated value
            this.value = inputValue;
        }
    });

    document.getElementById('staff_pincode').addEventListener('input', function () {
        // Get the input value and remove non-numeric characters
        var inputValue = this.value;

        if (inputValue.length > 6) {
            // If it's more than 10 characters, truncate it to 10 characters
            inputValue = inputValue.slice(0, 6);
            // Update the input value with the truncated value
            this.value = inputValue;
        }
    });



    document.getElementById('staff_aadhar_no').addEventListener('input', function () {
        // Get the input value and remove non-numeric characters
        var inputValue = this.value.replace(/\D/g, '');

        // Update the input value with only numeric characters
        this.value = inputValue;
    });

    $("#saveButton").click(function () {
        // Remove any existing error messages
        $(".text-danger").html('');

        // Perform client-side validation
        var isValid = true;

        function validateInput(inputId, errorMessage, validationRule) {
            var value = $(inputId).val();
            if (!value) {
                $(inputId + "_error").text(errorMessage);
                isValid = false;
            } else if (validationRule && !validationRule.test(value)) {
                $(inputId + "_error").text("Invalid " + errorMessage.toLowerCase());
                isValid = false;
            }
        }

        // Validate Name
        validateInput("#staff_name", "Name is required.");

        // Validate Staff Code
        validateInput("#staff_code", "Staff Code is required.");

        // Validate Mobile
        validateInput("#staff_mobile", "Mobile is required.", /^\d{10}$/);
        validateInput("#staff_mobile", "Mobile must be 10 digits.", null);

        // Validate Role
        //validateInput("#staff_role", "Role is required.");

        // Validate Email
        validateInput(
            "#staff_email",
            "Email is required.",
            /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/
        );
        validateInput("#staff_email", "Invalid email format.", null);

        // Validate Username (no spaces allowed between words)
        validateInput("#staff_username", "Username is required.", /^[^\s]+$/);
        validateInput("#staff_username", "Username cannot contain spaces.", null);

        // Validate Aadhaar No. (16 digits, no text)
        validateInput("#staff_aadhar_no", "Aadhaar No. is required.", /^\d{12}$/);
        validateInput("#staff_aadhar_no", "Aadhaar No. must be 12 digits.", null);

        // Validate Password (1 capital, 1 small, 1 symbol, 1 number, min 6 characters)
        // validateInput(
        //     "#staff_password",
        //     "Password is required.",
        //     /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z\d]).{6,}$/
        // );
        // validateInput(
        //     "#staff_password",
        //     "Password must include 1 capital letter, 1 small letter, 1 symbol, and 1 number. Minimum 6 characters.",
        //     null
        // );

        // Validate Address Line 1
        validateInput("#staff_address_first", "Address is required.");

        // Validate Passcode
        validateInput("#staff_passcode", "Passcode is required.");

        // Validate Address Line 2
        validateInput("#staff_address_second", "Address is required.");

        // Validate State
       // validateInput("#staff_state", "State is required.");

        // Validate Pincode
        validateInput("#staff_pincode", "Pincode is required.", /^\d{6}$/);
        validateInput("#staff_pincode", "Pincode must be 6 digits.", null);

        // Validate District
        //validateInput("#staff_district", "District is required.");

        // Validate City
        validateInput("#staff_city", "City is required.");

        // Submit the form if no errors
        if (isValid) {
            // Add your form submission logic here
            $("#staff-form").submit(); // This submits the form with id "staff-form"
        }
        // Return whether the form is valid
        return isValid;
    });
});

 

    document.getElementById("profile-upload").addEventListener("change", function(e) {
    const fileInput = e.target;
    const image = document.getElementById("profile-image");

    if (fileInput.files && fileInput.files[0]) {
        const reader = new FileReader();

        reader.onload = function(e) {
        image.src = e.target.result;
        };

        reader.readAsDataURL(fileInput.files[0]);
    }
    });

</script>
<script>
    $(document).ready(function () {
        // Disable the district select by default
        $('#districtSelect').prop('disabled', false);

        // Event handler for state selection change
        $('#stateSelect').on('change', function () {
            var selectedStateId = $(this).val();

            // Enable or disable the district select based on state selection
            if (selectedStateId) {
                $('#districtSelect').prop('disabled', false);
                // Send the selected state_id as data in the AJAX request
                $.ajax({
                    url: '{{ route("admin.customer-district-list") }}', // Replace with your backend route
                    method: 'GET',
                    data: {
                        stateId: selectedStateId
                    },
                    success: function (data) {
                        // Clear existing options
                        $('#districtSelect').empty();

                        // Populate the district select with new options
                        $.each(data, function (key, value) {
                            $('#districtSelect').append('<option value="' + key + '">' + value + '</option>');
                        });
                    },
                    error: function (xhr, status, error) {
                        console.error(xhr.responseText);
                        // Handle error as needed
                    }
                });
            } else {
                $('#districtSelect').prop('disabled', true).val('');
            }
        });
    });
</script>
@endsection