@extends('Admin.layout')
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('staff_table') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Add Staff
            </h5>
        </div>
    </div>
    <div class="card p-5">
        <form id="staffForm" action="{{ route('create_staff') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <h4 class="mb-3">Personal Details</h4>
            <div class="row">

                <div class="col-lg-2 mb-3">
                    <div class="upload-box rounded-3 p-4 mt-3 text-center position-relative"
                        style="border: 1px dashed #000; background-color: #fff; height: 100%;"
                        ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)"
                        ondrop="handleDrop(event, 'storeImageInput', 'storePreview')">
                        <!-- File input -->
                        <input type="file" id="storeImageInput" name="profile_image"
                            class="file-input position-absolute top-0 start-0 w-100 h-100 opacity-0 cursor-pointer"
                            onchange="previewImage(this, 'storePreview', 'storePreview_hidden')"
                            accept=".jpg,.jpeg,.png,.webp" />
                        <!-- Hidden input for Base64 backup -->
                        <input type="hidden" id="storePreview_hidden" name="store_image_base64"
                            value="{{ old('store_image_base64') }}">
                        <!-- Upload placeholder -->
                        <div class="upload-placeholder {{ old('store_image_base64') ? 'd-none' : '' }}">
                            <svg width="76" height="59" viewBox="0 0 76 59" fill="none"
                                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <rect width="75.5224" height="58.8477" fill="url(#pattern0_1236_31340)" />
                                <defs>
                                    <pattern id="pattern0_1236_31340" patternContentUnits="objectBoundingBox" width="1"
                                        height="1">
                                        <use xlink:href="#image0_1236_31340"
                                            transform="matrix(0.00390625 0 0 0.0050131 0 -0.141677)" />
                                    </pattern>
                                    <image id="image0_1236_31340" width="256" height="256" preserveAspectRatio="none"
                                        xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAABAKADAAQAAAABAAABAAAAAABn6hpJAAAWt0lEQVR4Ae2dC5AcxXnHv5ndvd3bu9vdu5N0IAlxxyGELQkBlh0kxxAeFileCSECG0JV5MiGKmNbIZGBGCOUlB1DYsoEW66YVyrYsQ3mZSzHBJfjgEJUQImHAnIAo/fzHnvv1+7OpHvlPu3d7e3u7M6je+Y/VVc9N9PT/fXv6++/8+wmwgICIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIAACIFCOgFYuQzX7TdPU0unhZQZlf5807cNk0hmkUQcrK8n+Gn73V03ROAYE/ExgmDWO//WxmNnDYuZdMs13dAq91Nzc+LamaabdjbdNAFjQh7vSA2t0nW5gxn+SGTrXbmNRHggEmMAx1vYXdJN+0Nyc+A8mBjk7WNQsAAMDA63jOfNLmkafZYF/kh1GoQwQAIGSBA6zU4EH63S6P5lM9pbMWWZn1QLQ29ubNEm/09S0m1kdjWXqwW4QAAH7CQyRqX1HMzNfb21tHaim+KoEoKt34Er2i7+FyFxYTaU4BgRAwFYCh1lpt7emEo9ZvU9gSQB6enoShhZ+kAX/tbaaj8JAAATsIPBsWDPXpVKpdKWFVSwAXX19KzVTe4IV3F5p4cgHAiDgLgEW0B8Ymrl2biq1o5KaKxKA7r6+i9i1xjOswKZKCkUeEAABTwkMawb9aWtr8hflrNDLZejp61vLgv/fWT4EfzlY2A8CchBoMHV6lsXuNeXMKXkGwH75L2bBv5UVEi1XEPaDAAhIRyCj6XRlazL5/GyWzSoAv7vm/092IB7xzUYP20FAfgKDBhkXzGtufr2YqUUFIJ1Op7Kk72A7O4od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" />
                                </defs>
                            </svg>
                            <h6 class="card-title mb-1 fw-bold">Upload Image</h6>
                            <p class="mb-1 small">Choose a file</p>
                            <p class="text-muted small">Max 1MB • 770x770px</p>
                            <button type="button" class="btn btn-outline-dark btn-sm d-none"
                                onclick="document.getElementById('storeImageInput').click()">Browse
                                File</button>
                        </div>
                        <!-- Preview Image -->
                        <img id="storePreview" src="{{ old('store_image_base64') ? old('store_image_base64') : '' }}"
                            class="img-preview mt-3 {{ old('store_image_base64') ? '' : 'd-none' }}"
                            style="width:100px; height:100px;" />
                        <div class="text-danger small error-profile_image"></div>
                    </div>
                </div>


                <div class="col-lg-10">
                    <div class="row">
                        <div class="col-lg-4 mb-3">
                            <label class="form-label fw-bold">Fingerprint Device ID <span
                                    class="text-danger">*</span></label>
                            <input type="number" class="form-control @error('device_id') is-invalid @enderror"
                                name="device_id" value="{{ old('device_id') }}" placeholder="Enter Device ID (e.g., 9)"
                                min="1">
                            <small class="text-muted">This ID must match the User ID on the biometric device</small>
                            <div class="text-danger small error-device_id"></div>
                        </div>

                        {{-- <div class="col-lg-4 mb-3">
                            <label class="form-label fw-bold">Fingerprint Device ID *</label>
                            <select name="device_id" id="device_id" class="form-control" required>
                                <option value="">Select ID</option>

                                @foreach ($users as $user)
                                <option value="{{ $user['userid'] }}" data-name="{{ $user['name'] }}">
                    {{ $user['userid'] }}
                    </option>
                    @endforeach

                    </select>
                </div> --}}

                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" id='name' name="name"
                                value="{{ old('name') }}" placeholder="Enter Name">
                            <div class="text-danger small error-name"></div>
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Fathers Name</label>
                            <input type="text" class="form-control @error('father_name') is-invalid @enderror"
                                name="father_name" value="{{ old('father_name') }}" placeholder="Enter Fathers Name">
                            <div class="text-danger small error-father_name"></div>
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Phone Number</label>
                            <input type="text" class="form-control @error('phone_number') is-invalid @enderror"
                                name="phone_number" value="{{ old('phone_number') }}" maxlength="10">
                            <div class="text-danger small error-phone_number"></div>
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">DOB</label>
                            <input type="date" class="form-control @error('dob') is-invalid @enderror" name="dob"
                                value="{{ old('dob') }}">
                            <div class="text-danger small error-dob"></div>
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Martial Status</label>
                            <select class="form-select @error('martial_status') is-invalid @enderror"
                                name="martial_status">
                                <option value="">Select</option>
                                <option value="Single" {{ old('martial_status') == 'Single' ? 'selected' : '' }}>Single
                                </option>
                                <option value="Married" {{ old('martial_status') == 'Married' ? 'selected' : '' }}>Married
                                </option>
                            </select>
                            <div class="text-danger small error-martial_status"></div>
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Branch</label>
                            <select class="form-select @error('branch') is-invalid @enderror" name="branch">
                                <option value="">Select</option>

                                @foreach ($branches as $branch)
                                    <option value="{{ $branch->id }}"
                                        {{ old('branch') == $branch->id ? 'selected' : '' }}>
                                        {{ $branch->branch_name }} - {{ $branch->place }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="text-danger small error-branch"></div>
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Blood group</label>
                            <input type="text" class="form-control @error('blood_group') is-invalid @enderror"
                                name="blood_group" value="{{ old('blood_group') }}" placeholder="Enter Blood group">
                            <div class="text-danger small error-blood_group"></div>
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Address</label>
                            <input type="text" class="form-control @error('address') is-invalid @enderror"
                                name="address" value="{{ old('address') }}" placeholder="Enter Address">
                            <div class="text-danger small error-address"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Identification Marks</label>
                    <textarea class="form-control @error('identification') is-invalid @enderror" name="identification" rows="1">{{ old('identification') }}</textarea>
                    <div class="text-danger small error-identification"></div>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Shop Reference Person</label>
                    <textarea rows="1" class="form-control @error('shop_ref_personal_details') is-invalid @enderror"
                        name="shop_ref_personal_details">{{ old('shop_ref_personal_details') }}</textarea>
                    <div class="text-danger small error-shop_ref_personal_details"></div>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Per Day Salary</label>
                    <input type="number" class="form-control @error('per_day_salary') is-invalid @enderror"
                        name="per_day_salary" value="{{ old('per_day_salary') }}" placeholder="₹0.00" min="0"
                        step="0.01">
                    <div class="text-danger small error-per_day_salary"></div>
                </div>

            </div>
            <h6 class="mt-2">Family Details</h6>
            <p class="fw-semibold mt-3 mb-2">Details of Family Members</p>
            <div class="p-3" data-component="repeater" data-props='{"maxRows":5, "prefix":"family"}'>
                <ol data-ref="rows" class="m-0 p-0" style="list-style: none;">
                    <li class="row g-2 align-items-end repeater-row mb-2">
                        <div class="col-12 col-md-3">
                            <label class="form-label">Relationship</label>
                            <select class="form-select" name="family[0][relationship]">
                                <option value="">Select</option>
                                <option value="Father">Father</option>
                                <option value="Mother">Mother</option>
                                <option value="Spouse">Spouse</option>
                                <option value="Child">Child</option>
                            </select>
                            <div class="text-danger small error-family_0_relationship"></div>
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" name="family[0][name]" placeholder="Enter Name">
                            <div class="text-danger small error-family_0_name"></div>
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">Number</label>
                            <input type="text" class="form-control" name="family[0][phone]"
                                placeholder="Enter Phone Number" maxlength="10">
                            <div class="text-danger small error-family_0_phone"></div>
                        </div>
                        <div class="col-12 col-md-3 d-flex gap-2">
                            <button class="btn btn-primary w-100" data-ref="addButton" type="button">Add</button>
                            <button class="btn btn-danger w-100 d-none" data-ref="removeButton"
                                type="button">Remove</button>
                        </div>
                    </li>
                </ol>
            </div>
            <p class="fw-semibold mt-4 mb-2">Details of Non Family Members</p>
            <div class="p-3" data-component="repeater" data-props='{"maxRows":5, "prefix":"nonfamily"}'>
                <ol data-ref="rows" class="m-0 p-0" style="list-style: none;">
                    <li class="row g-2 align-items-end repeater-row mb-2">
                        <div class="col-12 col-md-3">
                            <label class="form-label">Relationship</label>
                            <select class="form-select" name="nonfamily[0][relationship]">
                                <option value="">Select</option>
                                <option value="Friend">Friend</option>
                                <option value="Neighbor">Neighbor</option>
                                <option value="Colleague">Colleague</option>
                                <option value="Other">Other</option>
                            </select>
                            <div class="text-danger small error-nonfamily_0_relationship"></div>
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" name="nonfamily[0][name]"
                                placeholder="Enter Name">
                            <div class="text-danger small error-nonfamily_0_name"></div>
                        </div>
                        <div class="col-12 col-md-3">
                            <label class="form-label">Number</label>
                            <input type="text" class="form-control" name="nonfamily[0][phone]"
                                placeholder="Enter Phone Number" maxlength="10">
                            <div class="text-danger small error-nonfamily_0_phone"></div>
                        </div>
                        <div class="col-12 col-md-3 d-flex gap-2">
                            <button class="btn btn-primary w-100" data-ref="addButton" type="button">Add</button>
                            <button class="btn btn-danger w-100 d-none" data-ref="removeButton"
                                type="button">Remove</button>
                        </div>
                    </li>
                </ol>
            </div>
            <div class="row g-2 m-1">

            </div>
            <h6 class="mt-2">Employment Details</h6>
            <div class="row">

                <div class="col-lg-4 mb-2">
                    <label class="form-label">Qualification Details</label>
                    <textarea rows="1" class="form-control @error('qualification') is-invalid @enderror" name="qualification"
                        placeholder="Enter Qualification">{{ old('qualification') }}</textarea>
                    <div class="text-danger small error-qualification"></div>
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label">Designation</label>
                    <select class="form-select @error('designation') is-invalid @enderror" name="designation">
                        <option value="">Select Role</option>
                        @foreach ($designations as $d)
                            <option value="{{ $d->designation }}"
                                {{ old('designation', $staff->designation ?? '') == $d->designation ? 'selected' : '' }}>
                                {{ $d->designation }}
                            </option>
                        @endforeach
                    </select>
                    <div class="text-danger small error-designation"></div>
                </div>
                {{-- <div class="col-lg-4 mb-2">
                    <label class="form-label">Designation</label>
                    <select class="form-select @error('designation') is-invalid @enderror" name="designation">
                        <option value="">Select Role</option>
                        <option value="Supervisor" {{ old('designation') == 'Supervisor' ? 'selected' : '' }}>Supervisor
                        </option>
                        <option value="Sales" {{ old('designation') == 'Sales' ? 'selected' : '' }}>Sales</option>
                        <option value="Service" {{ old('designation') == 'Service' ? 'selected' : '' }}>Service</option>
                        <option value="House Keeping" {{ old('designation') == 'House Keeping' ? 'selected' : '' }}>House
                            Keeping</option>
                        <option value="Cashier" {{ old('designation') == 'Cashier' ? 'selected' : '' }}>Cashier</option>
                        <option value="Billing Executive"
                            {{ old('designation') == 'Billing Executive' ? 'selected' : '' }}>Billing Executive</option>
                    </select>
                    <div class="text-danger small error-designation"></div>
                </div> --}}
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Experience Details</label>
                    <textarea rows="1" class="form-control @error('experience_details') is-invalid @enderror"
                        name="experience_details" placeholder="Enter Experience">{{ old('experience_details') }}</textarea>
                    <div class="text-danger small error-experience_details"></div>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Previous Workplace</label>
                    <textarea rows="1" class="form-control @error('pre_work_details') is-invalid @enderror"
                        name="pre_work_details" placeholder="Enter Workplace">{{ old('pre_work_details') }}</textarea>
                    <div class="text-danger small error-pre_work_details"></div>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Previous Salary</label>
                    <textarea rows="1" class="form-control @error('pre_salary') is-invalid @enderror" name="pre_salary"
                        placeholder="Enter Previous salary">{{ old('pre_salary') }}</textarea>
                    <div class="text-danger small error-pre_salary"></div>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Reason for Leaving</label>
                    <textarea rows="1" class="form-control @error('reason_for_leaving') is-invalid @enderror"
                        name="reason_for_leaving" placeholder="Enter reason_for_leaving">{{ old('reason_for_leaving') }}</textarea>
                    <div class="text-danger small error-reason_for_leaving"></div>
                </div>
            </div>
            <h6 class="mt-2">Legal Details $ Declaration</h6>
            <div class="row">
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Police Case Details</label>
                    <textarea rows="1" class="form-control @error('police_case_details') is-invalid @enderror"
                        name="police_case_details" placeholder="Enter Case Details">{{ old('police_case_details') }}</textarea>
                    <div class="text-danger small error-police_case_details"></div>
                </div>
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Aadhar Card Number</label>
                    <input type="text" class="form-control @error('aadhar_number') is-invalid @enderror"
                        name="aadhar_number" value="{{ old('aadhar_number') }}" maxlength="12" pattern="\d{12}"
                        inputmode="numeric" oninput="this.value=this.value.replace(/[^0-9]/g,'')">
                    <div class="text-danger small error-aadhar_number"></div>
                </div>
            </div>
            <h6 class="mt-2">Other Proofs</h6>
            <div class="row">
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Upload Aadhar</label>
                    <input type="file" class="form-control @error('aadhar_card') is-invalid @enderror"
                        name="aadhar_card_file">
                    <div class="text-danger small error-aadhar_card_file"></div>
                </div>
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Upload Agreement</label>
                    <input type="file" class="form-control @error('agreement_file') is-invalid @enderror"
                        name="agreement_file">
                    <div class="text-danger small error-agreement_file"></div>
                </div>
            </div>
            <h6 class="mt-2">Bank Details</h6>
            <div class="row">
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Bank Name</label>
                    <input type="text" class="form-control @error('bank_name') is-invalid @enderror" name="bank_name"
                        value="{{ old('bank_name') }}" placeholder="Bank Name">
                    <div class="text-danger small error-bank_name"></div>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Account Holder</label>
                    <input type="text" class="form-control @error('account_holder_name') is-invalid @enderror"
                        name="account_holder_name" value="{{ old('account_holder_name') }}" placeholder="Holder Name">
                    <div class="text-danger small error-account_holder_name"></div>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Account Number</label>
                    <input type="text" class="form-control @error('account_number') is-invalid @enderror"
                        name="account_number" value="{{ old('account_number') }}" placeholder="Account Number">
                    <div class="text-danger small error-account_number"></div>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Gpay/PhonePe Number</label>
                    <input type="text" class="form-control @error('gpay_no') is-invalid @enderror" name="gpay_no"
                        value="{{ old('gpay_no') }}" placeholder="Gpay No">
                    <div class="text-danger small error-gpay_no"></div>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">IFSC Code</label>
                    <input type="text" class="form-control @error('ifsc') is-invalid @enderror" name="ifsc"
                        value="{{ old('ifsc') }}" placeholder="IFSC">
                    <div class="text-danger small error-ifsc"></div>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Branch Name</label>
                    <input type="text" class="form-control @error('branch_name') is-invalid @enderror"
                        name="branch_name" value="{{ old('branch_name') }}" placeholder="Branch Name">
                    <div class="text-danger small error-branch_name"></div>
                </div>
            </div>
            <div class="form-actions mt-4 d-flex gap-3 justify-content-center">
                <button type="reset" class="btn btn-label-secondary me-2" onclick="window.location.reload()">
                    Discard
                </button>
                <button type="submit" id="finalSubmit" class="btn btn-primary">
                    Submit
                </button>
            </div>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function getRefs(el) {
            let result = {};
            [...el.querySelectorAll('[data-ref]')].forEach(ref => {
                result[ref.dataset.ref] = ref;
            });
            return result;
        }

        function createFromHTML(html = '') {
            const template = document.createElement('template');
            template.innerHTML = html.trim();
            return template.content.firstElementChild;
        }

        function repeaterComponent($el) {
            const props = JSON.parse($el.dataset.props ?? '{}');
            const maxRows = props.maxRows || 5;
            const prefix = props.prefix || 'items';
            const $refs = getRefs($el);
            const rowHTML = $refs.rows.children[0].outerHTML;

            function updateRows() {
                const rows = [...$refs.rows.children];
                rows.forEach((row, index) => {
                    const rowRefs = getRefs(row);
                    row.querySelectorAll('[name]').forEach(input => {
                        const nameAttr = input.getAttribute('name');
                        const parts = nameAttr.match(/\[([^\]]+)\]/g);
                        if (parts && parts.length > 0) {
                            const actualField = parts[parts.length - 1].replace('[', '').replace(']', '');
                            const newName = `${prefix}[${index}][${actualField}]`;
                            input.setAttribute('name', newName);
                            const errorDiv = input.parentElement.querySelector('.text-danger');
                            if (errorDiv) {
                                errorDiv.className =
                                    `text-danger small error-${prefix}_${index}_${actualField}`;
                                errorDiv.innerHTML = "";
                            }
                        }
                    });
                    if (rows.length === 1) {
                        rowRefs.addButton.classList.remove('d-none');
                        rowRefs.removeButton.classList.add('d-none');
                    } else if (index === rows.length - 1) {
                        rowRefs.addButton.classList.remove('d-none');
                        rowRefs.removeButton.classList.remove('d-none');
                    } else {
                        rowRefs.addButton.classList.add('d-none');
                        rowRefs.removeButton.classList.remove('d-none');
                    }
                    rowRefs.addButton.onclick = (e) => {
                        e.preventDefault();
                        if (rows.length < maxRows) {
                            const newRow = createFromHTML(rowHTML);
                            newRow.querySelectorAll('input, select').forEach(i => {
                                i.value = '';
                                i.classList.remove('is-invalid');
                            });
                            newRow.querySelectorAll('.text-danger').forEach(d => d.innerHTML = '');
                            $refs.rows.appendChild(newRow);
                            updateRows();
                        }
                    };
                    rowRefs.removeButton.onclick = (e) => {
                        e.preventDefault();
                        row.remove();
                        updateRows();
                    };
                });
            }
            updateRows();
        }
        document.querySelectorAll('[data-component="repeater"]').forEach(el => repeaterComponent(el));
    </script>
    <script>
        $("#staffForm").on("submit", function(e) {
            e.preventDefault();
            let form = $(this);
            let button = $("#finalSubmit");
            $(".text-danger").html("");
            $(".form-control,.form-select").removeClass("is-invalid");
            button.prop("disabled", true).html("Processing...");
            let formData = new FormData(this);
            $.ajax({
                url: "{{ route('create_staff') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                success: function(response) {
                    button.prop("disabled", false).html("Submit");
                    console.log(response);
                    if (response.status === true) {
                        showToast(response.message, "bg-success");
                        form[0].reset();
                        // Reset image preview
                        $("#storePreview").attr("src", "").addClass("d-none");

                        // Clear hidden field
                        $("#storePreview_hidden").val("");

                        // Show placeholder
                        $(".upload-placeholder").removeClass("d-none");
                    } else {
                        showToast(response.message ?? "Operation Failed", "bg-danger");
                    }
                },
                error: function(xhr) {
                    button.prop("disabled", false).html("Submit");
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let firstError = "";
                        $.each(errors, function(key, value) {
                            let fieldClass = key.replace(/\./g, "_");
                            $(".error-" + fieldClass).html(value[0]);
                            $("[name='" + key + "']").addClass("is-invalid");
                            if (firstError === "") {
                                firstError = value[0];
                            }
                        });
                        showToast(firstError, "bg-danger");
                    } else {
                        showToast("Server Error", "bg-danger");
                    }
                }
            });
        });
    </script>
    <script>
        function previewImage(input, previewId, hiddenId) {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById(previewId).src = e.target.result;
                    document.getElementById(previewId).classList.remove('d-none');
                    document.getElementById(hiddenId).value = e.target.result; // Save base64
                    document.querySelector('.upload-placeholder').classList.add('d-none');
                };
                reader.readAsDataURL(file);
            }
        }

        function handleDragOver(e) {
            e.preventDefault();
            e.currentTarget.classList.add('border-primary');
        }

        function handleDragLeave(e) {
            e.preventDefault();
            e.currentTarget.classList.remove('border-primary');
        }

        function handleDrop(e, inputId, previewId) {
            e.preventDefault();
            e.currentTarget.classList.remove('border-primary');
            const input = document.getElementById(inputId);
            input.files = e.dataTransfer.files;
            previewImage(input, previewId, 'storePreview_hidden');
        }

        function previewImage(input, previewId, hiddenId) {
            const file = input.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById(previewId).src = e.target.result;
                    document.getElementById(previewId).classList.remove('d-none');
                    // Set the value to the hidden input
                    const hiddenInput = document.getElementById(hiddenId);
                    if (hiddenInput) {
                        hiddenInput.value = e.target.result;
                    }
                    // Hide the placeholder
                    const placeholder = document.querySelector('.upload-placeholder');
                    if (placeholder) {
                        placeholder.classList.add('d-none');
                    }
                };
                reader.readAsDataURL(file);
            }
        }
    </script>
    <script>
        $('#device_id').on('change', function() {
            let selected = $(this).find(':selected');
            let name = selected.data('name');

            if (name) {
                $('#name').val(name);
            } else {
                $('#name').val('');
            }
        });
    </script>
@endsection