@extends('Admin.layout')

@section('content')
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-lg-12 d-flex justify-content-between
     gap-3">

            <h5 class="mb-0 d-flex align-items-center">
                <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>

                Edit Staff
            </h5>

            {{-- <a href="{{ route('staff_edit_history', $staff->id) }}" class="btn btn-primary">
                Staff Edit History
            </a> --}}

        </div>
    </div>
    <div class="card p-5">
        <form id="staffForm" method="POST" action="{{ route('update_staff', $staff->id) }}" enctype="multipart/form-data">
            @csrf
            <h4 class="mb-3">Personal Details</h4>
            <div class="row">
                <input type="hidden" name="id" value="{{ $staff->id }}">
                <div class="col-lg-2 mb-3">
                    <div class="border border-secondary border-dashed rounded 
    d-flex flex-column align-items-center justify-content-center 
    p-3 text-center position-relative" style="height:140px; border-style:dashed !important; cursor:pointer;"
                        onclick="document.getElementById('profileImage').click();">
                        @if (!empty($staff->profile_image))
                            <img id="previewImage" src="{{ asset('storage/' . $staff->profile_image) }}"
                                style="width:100%;height:100%;object-fit:cover;border-radius:6px;">
                        @else
                            <small class="fw-bold">Click to Upload</small>
                            <span class="text-muted" style="font-size:10px;">
                                (Max file size: 5 MB, PNG, JPG only)
                            </span>
                        @endif
                        <input type="file" name="profile_image" class="d-none" id="profileImage"
                            onchange="previewProfile(this)">
                    </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', $staff->device_id) }}"
                                placeholder="Enter Device ID (e.g., 9)" min="1" >

                            <div class="text-danger small error-device_id"></div>
                        </div> --}}
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" name="name" value="{{ old('name', $staff->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" name="father_name"
                                value="{{ old('father_name', $staff->father_name) }}" placeholder="Enter Fathers Name">
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Phone Number </label>
                            <input type="text" class="form-control" name="phone_number"
                                value="{{ old('phone_number', $staff->phone_number) }}" placeholder="Enter phone number">
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">DOB</label>
                            <input type="date" class="form-control" name="dob" value="{{ old('dob', $staff->dob) }}">
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Martial Status</label>
                            <select class="form-select" name="martial_status">
                                <option value="">Select</option>
                                <option value="Single" {{ old('martial_status', $staff->martial_status) == 'Single' ? 'selected' : '' }}>Single
                                </option>
                                <option value="Married" {{ old('martial_status', $staff->martial_status) == 'Married' ? 'selected' : '' }}>
                                    Married</option>
                            </select>
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Branch</label>
                            <select class="form-select" name="branch">
                                <option value="">Select</option>
                                @foreach ($branches as $br)
                                    <option value="{{ $br->id }}" {{ old('branch_id', $staff->branch_id) == $br->id ? 'selected' : '' }}>
                                        {{ $br->branch_name }} - {{ $br->place }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Blood group</label>
                            <input type="text" class="form-control" name="blood_group"
                                value="{{ old('blood_group', $staff->blood_group) }}" placeholder="Enter Blood group">
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="form-label">Address</label>
                            <input type="text" class="form-control" name="address"
                                value="{{ old('address', $staff->address) }}" placeholder="Enter Address">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-2">
                <div class="col-lg-6 mb-3">
                    <label class="form-label">Identification Marks</label>
                    <textarea class="form-control" name="identification"
                        rows="1">{{ old('identification', $staff->identification) }}</textarea>
                </div>

                <div class="col-lg-6 mb-3">
                    <label class="form-label">Shop Reference Person Details</label>
                    <textarea rows="1" class="form-control"
                        name="shop_ref_personal_details">{{ old('shop_ref_personal_details', $staff->shop_ref_personal_details) }}</textarea>
                </div>
            </div>

            <hr>

            <div class="row mt-3 align-items-end">
                <div class="col-lg-4">
                    <label class="form-label">Per Day Salary</label>
                    <input type="number" class="form-control" name="per_day_salary" id="per_day_salary"
                        value="{{ old('per_day_salary', $staff->per_day_salary) }}" placeholder="₹0.00">
                </div>
                <div class="col-lg-2">
        <label class="form-label">Month</label>
        <select name="month" class="form-select" id="salary_month">
            @for ($i = 0; $i < 12; $i++)
                @php $m = now()->copy()->startOfMonth()->subMonths($i); @endphp
                <option value="{{ $m->format('Y-m') }}" {{ $i === 0 ? 'selected' : '' }}>
                    {{ $m->format('F Y') }}
                </option>
            @endfor
        </select>
    </div>

                <div class="col-lg-2">
                    <button type="submit" formaction="{{ route('staff_salary_update', $staff->id) }}"
                        class="btn btn-primary w-100">
                        Update Salary
                    </button>
                </div>

                <div class="col-lg-2">
                    <a href="{{ route('view_staff_salary_history', $staff->user_id) }}" class="btn btn-info">
                        View History
                    </a>
                </div>
            </div>
            <hr>

            <h6 class="mt-2">Family Details</h6>
            <p class="fw-semibold mt-3 mb-2">
                Details of Family Members
            </p>
            <div class="p-3 border rounded mb-4" data-component="repeater" data-props='{"maxRows":5}'>
                <ol data-ref="rows" class="m-0 p-0" style="list-style:none;">
                    @php
                        $families = old('family', $familyMembers->toArray() ?? []);
                    @endphp
                    @forelse ($families as $index => $family)
                        <li class="row g-2 align-items-end repeater-row mb-2">
                            <div class="col-md-3">
                                <label class="form-label">Relationship</label>
                                <select class="form-select" name="family[{{ $index }}][relationship]">
                                    <option value="">Select</option>
                                    @foreach (['Father', 'Mother', 'Spouse', 'Child'] as $rel)
                                        <option value="{{ $rel }}" {{ ($family['relationship'] ?? '') == $rel ? 'selected' : '' }}>
                                            {{ $rel }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Name</label>
                                <input type="text" class="form-control @error(" family.$index.name") is-invalid @enderror"
                                    name="family[{{ $index }}][name]" value="{{ $family['name'] ?? '' }}">

                                @error("family.$index.name")
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Number</label>
                                <input type="text" class="form-control" name="family[{{ $index }}][phone]"
                                    value="{{ $family['phone'] ?? '' }}">
                            </div>
                            <div class="col-md-3 d-flex gap-2">
                                <button type="button" class="btn btn-primary  w-100" data-ref="addButton">
                                    Add
                                </button>
                                <button type="button" class="btn btn-danger  w-100 d-none" data-ref="removeButton">
                                    Remove
                                </button>
                            </div>
                        </li>
                    @empty
                        <li class="row g-2 align-items-end repeater-row mb-2">
                            <div class="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>
                            <div class="col-md-3">
                                <label class="form-label">Name</label>
                                <input type="text" class="form-control" name="family[0][name]">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Number</label>
                                <input type="text" class="form-control" name="family[0][phone]">
                            </div>
                            <div class="col-md-3 d-flex gap-2">
                                <button type="button" class="btn btn-primary  w-100" data-ref="addButton">
                                    Add
                                </button>
                                <button type="button" class="btn btn-danger  w-100 d-none" data-ref="removeButton">
                                    Remove
                                </button>
                            </div>
                        </li>
                    @endforelse
                </ol>
            </div>
            <p class="fw-semibold mt-4 mb-2">
                Details of Non Family Members
            </p>
            <div class="p-3 border rounded mb-4" data-component="repeater" data-props='{"maxRows":5}'>
                <ol data-ref="rows" class="m-0 p-0" style="list-style:none;">
                    @php
                        $nonfamilies = old('nonfamily', $nonFamilyMembers->toArray() ?? []);
                    @endphp
                    @forelse ($nonfamilies as $index => $nonfamily)
                        <li class="row g-2 align-items-end repeater-row mb-2">
                            <div class="col-md-3">
                                <label class="form-label">Relationship</label>
                                <select class="form-select" name="nonfamily[{{ $index }}][relationship]">
                                    <option value="">Select</option>
                                    @foreach (['Friend', 'Neighbor', 'Colleague', 'Other'] as $rel)
                                        <option value="{{ $rel }}" {{ ($nonfamily['relationship'] ?? '') == $rel ? 'selected' : '' }}>
                                            {{ $rel }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Name</label>
                                <input type="text" class="form-control" name="nonfamily[{{ $index }}][name]"
                                    value="{{ $nonfamily['name'] ?? '' }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Number</label>
                                <input type="text" class="form-control" name="nonfamily[{{ $index }}][phone]"
                                    value="{{ $nonfamily['phone'] ?? '' }}">
                            </div>
                            <div class="col-md-3 d-flex gap-2">
                                <button type="button" class="btn btn-primary  w-100" data-ref="addButton">
                                    Add
                                </button>
                                <button type="button" class="btn btn-danger  w-100 d-none" data-ref="removeButton">
                                    Remove
                                </button>
                            </div>
                        </li>
                    @empty
                        {{-- ✅ IMPORTANT FIX HERE --}}
                        <li class="row g-2 align-items-end repeater-row mb-2">
                            <div class="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>
                            <div class="col-md-3">
                                <label class="form-label">Name</label>
                                <input type="text" class="form-control" name="nonfamily[0][name]">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Number</label>
                                <input type="text" class="form-control" name="nonfamily[0][phone]">
                            </div>
                            <div class="col-md-3 d-flex gap-2">
                                <button type="button" class="btn btn-primary  w-100" data-ref="addButton">
                                    Add
                                </button>
                                <button type="button" class="btn btn-danger  w-100 d-none" data-ref="removeButton">
                                    Remove
                                </button>
                            </div>
                        </li>
                    @endforelse
                </ol>
            </div>
            <!-- <div class="row g-2">

            </div> -->
            <h6 class="mt-4">Employment Details</h6>
            <div class="row">
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Qualification </label>
                    <textarea rows="1" class="form-control"
                        name="qualification">{{ old('qualification', $staff->qualification) }}</textarea>
                </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>
    @error('designation')
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Experience Details</label>
                    <textarea rows="1" class="form-control"
                        name="experience_details">{{ old('experience_details', $staff->experience_details) }}</textarea>
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label">Previous Workplace</label>
                    <textarea rows="1" class="form-control"
                        name="pre_work_details">{{ old('pre_work_details', $staff->pre_work_details) }}</textarea>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Previous Salary</label>
                    <textarea rows="1" class="form-control"
                        name="pre_work_details">{{ old('pre_salary', $staff->pre_salary) }}</textarea>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Reason for Leaving</label>
                    <textarea rows="1" class="form-control"
                        name="reason_for_leaving">{{ old('reason_for_leaving', $staff->reason_for_leaving) }}</textarea>
                </div>
            </div>
            <h6 class="mt-4">Other Proofs</h6>
            <div class="row">
                {{-- ================= AADHAR CARD ================= --}}
                <div class="col-lg-6 mb-3">
                    <label class="form-label">Upload Aadhar Card</label>
                    <input type="file" class="form-control @error('aadhar_card_file') is-invalid @enderror"
                        name="aadhar_card_file" id="aadharInput" accept="image/*,application/pdf">
                    @error('aadhar_card_file')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror

                    @if ($staff->aadhar_card_file)
                        <div class="mt-2 old-file" id="oldAadhar">
                            @php
                                $ext = pathinfo($staff->aadhar_card_file, PATHINFO_EXTENSION);
                            @endphp
                            @if (in_array(strtolower($ext), ['jpg', 'jpeg', 'png', 'webp']))
                                <img src="{{ asset('storage/' . $staff->aadhar_card_file) }}"
                                    style="width:100px!important; height:100px!important;" class="img-thumbnail">
                            @else
                                <a href="{{ asset('storage/' . $staff->aadhar_card_file) }}" target="_blank">
                                    View PDF
                                </a>
                            @endif
                            <button type="button" class="btn btn-danger  d-block mt-2" onclick="removeOldFile('aadhar')">
                                Remove
                            </button>
                            <input type="hidden" name="remove_aadhar" id="removeAadhar" value="0">
                        </div>
                    @endif
                    <div id="aadharPreview" class="mt-2"></div>
                </div>
                {{-- ================= AGREEMENT ================= --}}
                <div class="col-lg-6 mb-3">
                    <label class="form-label">Upload Agreement</label>
                    <input type="file" class="form-control @error('agreement_file') is-invalid @enderror"
                        name="agreement_file" id="agreementInput" accept="image/*,application/pdf">
                    @error('agreement_file')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror

                    @if ($staff->agreement_file)
                        <div class="mt-2 old-file" id="oldAgreement">
                            @php
                                $ext = pathinfo($staff->agreement_file, PATHINFO_EXTENSION);
                            @endphp
                            @if (in_array(strtolower($ext), ['jpg', 'jpeg', 'png', 'webp']))
                                <img src="{{ asset('storage/' . $staff->agreement_file) }}"
                                    style="width:100px!important; height:100px!important;" class="img-thumbnail">
                            @else
                                <a href="{{ asset('storage/' . $staff->agreement_file) }}" target="_blank">
                                    View PDF
                                </a>
                            @endif
                            <button type="button" class="btn btn-danger  d-block mt-2" onclick="removeOldFile('agreement')">
                                Remove
                            </button>
                            <input type="hidden" name="remove_agreement" id="removeAgreement" value="0">
                        </div>
                    @endif
                    <div id="agreementPreview" class="mt-2"></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" name="bank_name" value="{{ $staff->bank_name }}"
                        placeholder="Enter Bank Name">
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Account Holder Name </label>
                    <input type="text" class="form-control" name="account_holder_name"
                        value="{{ $staff->account_holder_name }}" placeholder="Enter Account Holder Name">
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Account Number </label>
                    <input type="text" class="form-control" name="account_number" placeholder="Enter Account Number"
                        value="{{ $staff->account_number }}">
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Gpay/Phonepay Number </label>
                    <input type="text" class="form-control" name="gpay_no" placeholder="Enter Gpay/Phonepay Number"
                        value="{{ $staff->gpay_no }}">
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">IFSC Code</label>
                    <input type="text" class="form-control" name="ifsc" value="{{ $staff->ifsc }}"
                        placeholder="Enter IFSC Code">
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label">Branch Name </label>
                    <input type="text" class="form-control" name="branch_name" placeholder="Enter Branch Name"
                        value="{{ $staff->branch_name }}">
                </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">Discard</button>
                <button type="submit" class="btn btn-primary" id="finalSubmit">
                    Submit
                </button>
                <a href="{{ route('agreement_a4', $staff->id) }}" class="btn btn-primary" target="_blank">
                    Download Agreement
                </a>
            </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 maxRows = JSON.parse($el.dataset.props || '{}').maxRows || 5;
            const $rowsContainer = $el.querySelector('[data-ref="rows"]');
            const $firstRow = $rowsContainer.querySelector('.repeater-row');
            const rowHTML = $firstRow.outerHTML;

            function updateUI() {
                const allRows = $rowsContainer.querySelectorAll('.repeater-row');
                allRows.forEach((row, index) => {
                    const refs = getRefs(row);
                    row.querySelectorAll('[name]').forEach(input => {
                        const name = input.getAttribute('name');
                        const updatedName = name.replace(/\[\d+\]/, `[${index}]`);
                        input.setAttribute('name', updatedName);
                    });
                    const isLast = (index === allRows.length - 1);
                    const isOnly = (allRows.length === 1);
                    if (refs.addButton) {
                        refs.addButton.classList.toggle('d-none', !isLast || allRows.length >= maxRows);
                        refs.addButton.onclick = (e) => {
                            e.preventDefault();
                            addRow();
                        };
                    }
                    if (refs.removeButton) {
                        refs.removeButton.classList.toggle('d-none', isOnly);
                        refs.removeButton.onclick = (e) => {
                            e.preventDefault();
                            row.remove();
                            updateUI();
                        };
                    }
                });
            }

            function addRow() {
                const allRows = $rowsContainer.querySelectorAll('.repeater-row');
                if (allRows.length >= maxRows) return;
                const newRow = createFromHTML(rowHTML);
                newRow.querySelectorAll('input, select, textarea').forEach(el => el.value = '');
                $rowsContainer.appendChild(newRow);
                updateUI();
            }
            updateUI();
        }
        document.querySelectorAll('[data-component="repeater"]').forEach(el => repeaterComponent(el));
    </script>
    <script>
        function removeOldFile(type) {
            if (type === 'aadhar') {
                document.getElementById('oldAadhar').style.display = 'none';
                document.getElementById('removeAadhar').value = 1;
            }
            if (type === 'agreement') {
                document.getElementById('oldAgreement').style.display = 'none';
                document.getElementById('removeAgreement').value = 1;
            }
        }

        function previewFile(input, previewId, oldFileId, removeInputId) {
            const preview = document.getElementById(previewId);
            const oldFile = document.getElementById(oldFileId);
            const removeInput = document.getElementById(removeInputId);

            preview.innerHTML = "";
            const file = input.files[0];
            if (!file) return;
            if (oldFile) {
                oldFile.style.display = "none";
            }
            if (removeInput) {
                removeInput.value = 1;
            }

            if (file.type.startsWith("image/")) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    preview.innerHTML = `
                        <img src="${e.target.result}" style="width:100px!important; height:100px!important;" class="img-thumbnail mb-2">
                        <p class="small">${file.name}</p>
                        <button type="button" class="btn btn-danger d-block"
                            onclick="removeNewFile('${input.id}', '${previewId}', '${oldFileId}', '${removeInputId}')">
                            Remove
                        </button>
                    `;
                };
                reader.readAsDataURL(file);
            } else {
                preview.innerHTML = `
                    <p>${file.name}</p>
                    <button type="button" class="btn btn-danger d-block"
                        onclick="removeNewFile('${input.id}', '${previewId}', '${oldFileId}', '${removeInputId}')">
                        Remove
                    </button>
                `;
            }
        }

        function previewProfile(input) {

            const file = input.files[0];
            if (!file) return;

            const reader = new FileReader();

            reader.onload = function (e) {
                document.getElementById("previewImage").src = e.target.result;
            };

            reader.readAsDataURL(file);
        }

        function removeNewFile(inputId, previewId, oldFileId, removeInputId) {
            document.getElementById(inputId).value = "";
            document.getElementById(previewId).innerHTML = "";
            if (document.getElementById(oldFileId)) {
                document.getElementById(oldFileId).style.display = "block";
            }
            if (document.getElementById(removeInputId)) {
                document.getElementById(removeInputId).value = 0;
            }
        }

        document.getElementById("aadharInput")
            .addEventListener("change", function () {
                previewFile(this, "aadharPreview", "oldAadhar", "removeAadhar");
            });

        document.getElementById("agreementInput")
            .addEventListener("change", function () {
                previewFile(this, "agreementPreview", "oldAgreement", "removeAgreement");
            });
    </script>
    <script>
        $(document).on("click", "#finalSubmit", function (e) {
            e.preventDefault();
            console.log("Submit clicked");
            let form = document.getElementById("staffForm");
            let formData = new FormData(form);
            let button = $("#finalSubmit");
            button.prop("disabled", true).html("Updating...");
            $(".invalid-feedback").remove();
            $(".is-invalid").removeClass("is-invalid");
            $.ajax({
                url: "{{ route('update_staff', $staff->id) }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    button.prop("disabled", false).html("Submit");

                    if (response.status) {
                        showToast(response.message, 'bg-success');

                        setTimeout(function () {
                            window.location.href = window.location.href.split('#')[0];
                        });
                    }
                },
                error: function (xhr) {
                    button.prop("disabled", false).html("Submit");

                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;

                        $.each(errors, function (field, messages) {
                            let fieldName = field.split('.').reduce((acc, val, index) => {
                                if (index === 0) return val;
                                return acc + '[' + val + ']';
                            }, '');

                            let input = $("[name='" + fieldName + "']");

                            if (input.length) {
                                input.addClass("is-invalid");
                                input.after(
                                    '<div class="invalid-feedback">' + messages[0] +
                                    '</div>'
                                );
                            }
                        });

                        showToast("Please fill the missing fields", 'bg-danger');
                        return;
                    }

                    showToast("Server Error", 'bg-danger');
                }


            });
        });
    </script>
@endsection