{{-- @extends('Admin.layout')
@section('content')
<h4> <button type="button" class="btn btn-icon bg-white waves-effect me-2"  onclick="window.history.back()"
        style="box-shadow: 0px 9px 12px -2px #66328E1F;">
      <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 icons-tabler-outline icon-tabler-chevron-left">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M15 6l-6 6l6 6" />
            </svg>
       </button>Edit Department</h4>
<div class="card p-5">

    <div class="container">
        <h5>Edit Department</h5>


        <form id="UpdateDept" method="POST" action="{{ route('Update_dept_form', $deptName) }}" data-component="repeater" data-props='{"maxRows":10}'>
            @csrf

            <input type="hidden" name="old_dept_name" value="{{ $deptName }}">
            <div class="row">
                <div class="col-lg-12 mb-2">
                    <label class="form-label" for="departmentName">Department Name</label>
                    <input type="text"
                        class="form-control"
                        id="dept_name"
                        name="dept_name"
                        value="{{ old('dept_name', $deptName) }}">
                    @error('dept_name') <div class="text-danger">{{ $message }}</div> @enderror

                </div>
            </div>

            <ol data-ref="rows" tabindex="0" style="list-style-type:none; padding:0; margin:0;">

                @php
                $oldStaff = old('staff', $staff->toArray());
                @endphp

                @foreach($oldStaff as $index => $item)

                <li class="row repeater-row mb-2">
                    <div class="col-lg-5 mb-2">
                        <label class="form-label">Staff Name</label>
                        <input type="text"
                            class="form-control"
                            name="staff[{{ $index }}][name]"
                            value="{{ $item['staff_name'] ?? $item['name'] }}">
                    </div>

                    <div class="col-lg-5 mb-2">
                        <label class="form-label">Phone Number</label>
                        <input type="text"
                            class="form-control"
                            name="staff[{{ $index }}][phone]"
                            value="{{ $item['phone_number'] ?? $item['phone'] }}">
                    </div>

                    <div class="col-lg-2 action-column mb-2">
                        <button class="btn btn-dangermb-3" data-ref="removeButton" type="button"><i
                                class="icon-base ti tabler-x icon-xs me-sm-1"></i>Remove</button>
                        <button class="btn btn-primary w-100" data-ref="addButton" type="button">
                            <i class="icon-base ti tabler-plus icon-xs me-sm-1"></i> Add More
                        </button>
                    </div>

                </li>
                @endforeach



            </ol>

            <div class="form-actions d-flex justify-content-center mt-4">
                <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal"
                    data-bs-target="#submit_dept">Update</button>
                <button type="reset" class="btn btn-label-secondary">Discard</button>
            </div>
        </form>
    </div>
</div>


<!-- submit -->
<div class="modal fade" id="submit_dept" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit ?</p>
            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="submit" id="submit_btn" class="btn btn-primary p-3 fw-semibold ">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        // Submit button
        document.getElementById('submit_btn').addEventListener('click', function(e) {
            e.preventDefault();
            const btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('UpdateDept').submit();
        });

        /* ---------- Repeater Functions ---------- */
        function repeaterComponent($el) {
            const $props = $el.dataset.props ? JSON.parse($el.dataset.props) : {
                maxRows: 10
            };
            const $rowsContainer = $el.querySelector('[data-ref="rows"]');
            const rowTemplateHTML = $rowsContainer.children[0].outerHTML;

            function updateFieldNames() {
                [...$rowsContainer.children].forEach((row, idx) => {
                    row.querySelectorAll('input[name]').forEach(input => {
                        input.name = input.name.replace(/\[\d+\]/, `[${idx}]`);
                    });
                });
            }

            function updateButtons() {
                const rows = [...$rowsContainer.children];
                const rowCount = rows.length;
                rows.forEach((row, idx) => {
                    const removeBtn = row.querySelector('[data-ref="removeButton"]');
                    const addBtn = row.querySelector('[data-ref="addButton"]');

                    if (removeBtn) {
                        removeBtn.style.display = 'block';
                        removeBtn.onclick = e => {
                            e.preventDefault();
                            removeRow(row);
                        };
                    }

                    if (addBtn) {
                        if (idx === rowCount - 1 && rowCount < $props.maxRows) {
                            addBtn.style.display = 'block';
                            addBtn.onclick = e => {
                                e.preventDefault();
                                addRow();
                            };
                        } else {
                            addBtn.style.display = 'none';
                            addBtn.onclick = null;
                        }
                    }
                });
            }

            function addRow() {
                const newRow = document.createElement('li');
                newRow.className = 'row repeater-row mb-2';
                newRow.innerHTML = rowTemplateHTML;
                newRow.querySelectorAll('input').forEach(i => i.value = '');
                $rowsContainer.appendChild(newRow);

                updateFieldNames();
                updateButtons();
            }

            function removeRow(row) {
                row.remove();
                if ($rowsContainer.children.length === 0) addRow(); // Ensure at least one row
                updateFieldNames();
                updateButtons();
            }

            // Initialize
            updateFieldNames();
            updateButtons();
        }

        // Initialize all repeaters on page
        document.querySelectorAll('[data-component="repeater"]').forEach(el => repeaterComponent(el));

    });
</script>

@endsection --}}



@extends('Admin.layout')
@section('content')
<h4> 
    <button type="button" class="btn btn-icon bg-white waves-effect me-2" onclick="window.history.back()" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
        <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 icons-tabler-outline icon-tabler-chevron-left">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M15 6l-6 6l6 6" />
        </svg>
    </button>
    Edit Department
</h4>

<div class="card p-5">
    <div class="container">
        <h5>Edit Department</h5>

        <form id="UpdateDept" method="POST" action="{{ route('Update_dept_form', $deptName) }}" data-component="repeater" data-props='{"maxRows":10}'>
            @csrf
            <input type="hidden" name="old_dept_name" value="{{ $deptName }}">
            
            <div class="row">
                <div class="col-lg-12 mb-4">
                    <label class="form-label" for="departmentName">Department Name</label>
                    <input type="text" class="form-control" id="dept_name" name="dept_name" value="{{ old('dept_name', $deptName) }}">
                    @error('dept_name') <div class="text-danger">{{ $message }}</div> @enderror
                </div>
            </div>

            <hr class="my-4">
            <h6>Staff Details</h6>

            <ol data-ref="rows" tabindex="0" style="list-style-type:none; padding:0; margin:0;">
                @php
                    $oldStaff = old('staff', $staff->toArray());
                @endphp

                @foreach($oldStaff as $index => $item)
                <li class="row repeater-row mb-3">
                    <div class="col-lg-5 mb-3">
                        <label class="form-label">Staff Name</label>
                        <input type="text" class="form-control" name="staff[{{ $index }}][name]" value="{{ $item['staff_name'] ?? $item['name'] ?? '' }}" placeholder="Enter Staff Name">
                    </div>

                    <div class="col-lg-5 mb-3">
                        <label class="form-label">Phone Number</label>
                        <input type="text" class="form-control" name="staff[{{ $index }}][phone]" value="{{ $item['phone_number'] ?? $item['phone'] ?? '' }}" placeholder="Enter Phone Number">
                    </div>

                    <div class="col-lg-2 mb-3 d-flex align-items-end gap-2"> 
                        <button class="btn btn-danger d-none" data-ref="removeButton" type="button">
                            <i class="icon-base ti tabler-x p-2 icon-xs me-sm-1"></i>  Remove
                        </button>
                         <button class="btn btn-primary" data-ref="addButton" type="button">
                           <i class="icon-base ti tabler-plus p-2 icon-xs me-sm-1"></i> Add
                        </button>
                    </div>
                </li>
                @endforeach
            </ol>

            <div class="form-actions d-flex justify-content-center mt-5">
                <button type="button" class="btn btn-primary me-3" data-bs-toggle="modal" data-bs-target="#submit_dept">Update</button>
                <button type="reset" class="btn btn-label-secondary">Discard</button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="submit_dept" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to submit ?</p>
            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary p-3 fw-semibold me-3" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" id="submit_btn" class="btn btn-primary p-3 fw-semibold">Yes, Sure</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {

    // Form Submission Logic
    document.getElementById('submit_btn').addEventListener('click', function() {
        this.disabled = true;
        this.innerText = 'Processing...';
        document.getElementById('UpdateDept').submit();
    });

    /* --- Repeater Logic --- */
    function repeaterComponent($el) {
        const $props = { maxRows: 10, ...JSON.parse($el.dataset.props ?? '{}') };
        const $rowsContainer = $el.querySelector('[data-ref="rows"]');
        const rowTemplateHTML = $rowsContainer.children[0].outerHTML;

        function refreshUI() {
            const allRows = [...$rowsContainer.children];
            const totalCount = allRows.length;

            allRows.forEach((row, index) => {
                const addBtn = row.querySelector('[data-ref="addButton"]');
                const removeBtn = row.querySelector('[data-ref="removeButton"]');
                row.querySelectorAll('[name]').forEach(input => {
                    const baseName = input.name.includes('name') ? 'name' : 'phone';
                    input.setAttribute('name', `staff[${index}][${baseName}]`);
                });
                const isLast = (index === totalCount - 1);
                if (isLast && totalCount < $props.maxRows) {
                    addBtn.classList.remove('d-none');
                } else {
                    addBtn.classList.add('d-none');
                }
                if (totalCount > 1) {
                    removeBtn.classList.remove('d-none');
                } else {
                    removeBtn.classList.add('d-none');
                }
                addBtn.onclick = (e) => { e.preventDefault(); addRow(); };
                removeBtn.onclick = (e) => { e.preventDefault(); row.remove(); refreshUI(); };
            });
        }

        function addRow() {
            if ($rowsContainer.children.length >= $props.maxRows) return;

            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = rowTemplateHTML;
            const newRow = tempDiv.firstChild;
            newRow.querySelectorAll('input').forEach(i => i.value = '');
            newRow.querySelectorAll('.text-danger').forEach(e => e.remove());

            $rowsContainer.appendChild(newRow);
            refreshUI();
        }

        refreshUI();
    }

    document.querySelectorAll('[data-component="repeater"]').forEach(repeaterComponent);
});
</script>
@endsection