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

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

        <form id="deptForm" method="POST" action="{{ route('Create_dept_form') }}" data-component="repeater" data-props='{"maxRows":5}'>
            @csrf

            <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') }}"
                        placeholder="Enter Department Name">

                    @error('dept_name')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>

            </div>


            @php
            $oldStaff = old('staff', [['name' => '', 'phone' => '']]);
            @endphp


            <ol data-ref="rows" tabindex="0" style="list-style-type:none; padding:0; margin:0;">
                @foreach ($oldStaff as $index => $staff)

                <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="{{ old("staff.$index.name") }}"
                            placeholder="Enter Staff Name">
                        @error("staff.$index.name")
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-lg-5 mb-2">
                        <label class="form-label">Phone Number</label>
                        <input type="tel" class="form-control" name="staff[{{ $index }}][phone]"
                            value="{{ old("staff.$index.phone") }}"
                            placeholder="Enter Phone Number">
                        @error("staff.$index.phone")
                        <div class="text-danger">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-lg-2 d-flex align-items-end mb-2">
                        <button class="btn btn-primary" data-ref="addButton" type="button">
                            <i class="icon-base ti tabler-plus icon-xs me-sm-1"></i> Add More
                        </button>
                        <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>

                    </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">Create</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.getElementById('submit_btn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('deptForm').submit();
    });
    let i = 1;

    document.addEventListener('click', function(e) {

        if (e.target.classList.contains('add-row')) {
            let html = `
        <div class="row staff-row mt-3">
            <div class="col-lg-5 mb-2">
                <input type="text" name="staff[${i}][name]" class="form-control" placeholder="Staff Name">
            </div>
            <div class="col-lg-5 mb-2">
                <input type="text" name="staff[${i}][phone]" class="form-control" placeholder="Phone Number">
            </div>
            <div class="col-lg-2 d-flex align-items-end mb-2">
                <button type="button" class="btn btn-danger remove-row">-</button>
            </div>
        </div>`;

            document.getElementById('staff-container').insertAdjacentHTML('beforeend', html);
            i++;
        }

        if (e.target.classList.contains('remove-row')) {
            e.target.closest('.staff-row').remove();
        }
    });



    function getRefs(el) {
        let result = {};
        [...el.querySelectorAll('[data-ref]')].forEach(ref => {
            result[ref.dataset.ref] = ref;
        });
        return result;
    }

    function setDefaults(obj, defaults) {
        let results = obj;
        for (const prop in defaults) {
            if (!obj.hasOwnProperty(prop)) results[prop] = defaults[prop];
        }
        return results;
    }

    function getProps(el, defaults = {}) {
        return setDefaults(JSON.parse(el.dataset.props ?? '{}'), defaults);
    }

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

    /* ---------- Repeater Component ---------- */
    function repeaterComponent($el) {
        const $props = getProps($el);
        const $refs = getRefs($el);
        const rowHTML = $refs.rows.children[0].outerHTML;

        function setUpRow(row, isLast = false) {
            const rowRefs = getRefs(row);

            if (isLast) {
                rowRefs.addButton.classList.remove('d-none');
                rowRefs.removeButton.classList.add('d-none');
            } else {
                rowRefs.addButton.classList.add('d-none');
                rowRefs.removeButton.classList.remove('d-none');
            }

            if (rowRefs.removeButton) {
                rowRefs.removeButton.onclick = (e) => {
                    e.preventDefault();
                    removeRow(row);
                };
            }

            if (rowRefs.addButton) {
                rowRefs.addButton.onclick = (e) => {
                    e.preventDefault();
                    addRow();
                };
            }
        }

        function updateFieldNames() {
            [...$refs.rows.children].forEach((el, index) => {
                el.querySelectorAll('[name]').forEach(input => {
                    const newName = input.getAttribute('name').replace(/\[\d+\]/, `[${index}]`);
                    input.setAttribute('name', newName);
                });
            });
        }

        function updateButtons() {
            const rows = [...$refs.rows.children];
            rows.forEach((row, index) => {
                const isLast = index === rows.length - 1;
                setUpRow(row, isLast);
            });
        }

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

            const newRow = createFromHTML(rowHTML);
            newRow.querySelectorAll('input').forEach(input => input.value = '');
            $refs.rows.appendChild(newRow);

            updateFieldNames();
            updateButtons();
        }

        function removeRow(row) {
            row.remove();
            updateFieldNames();
            updateButtons();
        }

        function init() {
            setUpRow($refs.rows.children[0], true);
            updateFieldNames();
        }

        init();
    }

    /* ---------- Initialize All Repeaters ---------- */
    document.querySelectorAll('[data-component="repeater"]').forEach(el => repeaterComponent(el));
</script>

@endsection --}}


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

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

        <form id="deptForm" method="POST" action="{{ route('Create_dept_form') }}" data-component="repeater" data-props='{"maxRows":10}'>
            @csrf

            <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') }}" placeholder="Enter Department Name">
                    @error('dept_name')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
            </div>

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

            @php
            $oldStaff = old('staff', [['name' => '', 'phone' => '']]);
            @endphp

            <ol id="repeater-list" data-ref="rows" style="list-style-type:none; padding:0; margin:0;">
                @foreach ($oldStaff as $index => $staff)
                <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="{{ old("staff.$index.name") }}" placeholder="Enter Staff Name">
                        @error("staff.$index.name")
                        <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-lg-5 mb-3">
                        <label class="form-label">Phone Number</label>
                        <input type="tel" class="form-control" name="staff[{{ $index }}][phone]" value="{{ old("staff.$index.phone") }}" placeholder="Enter Phone Number">
                        @error("staff.$index.phone")
                        <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-lg-2 mb-3 d-flex align-items-end gap-2">
                        <button class="btn btn-danger remove-btn {{ count($oldStaff) > 1 ? '' : 'd-none' }}" type="button">
                             <i class="icon-base ti tabler-x p-2 icon-xs me-sm-1"></i>  Remove
                        </button>
                        <button class="btn btn-primary add-btn {{ $loop->last && count($oldStaff) < 10 ? '' : 'd-none' }}" 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">Create Department</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 text-center p-4">
            <h5 class="fw-bold">Are you sure?</h5>
            <p class="text-muted">Do you want to save this department and staff list?</p>
            <div class="d-flex justify-content-center gap-2 mt-3">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" id="submit_btn" class="btn btn-primary">Yes, Submit</button>
            </div>
        </div>
    </div>
</div>

<script>
    // Submit Button Logic
    document.getElementById('submit_btn').addEventListener('click', function() {
        this.disabled = true;
        this.innerText = 'Processing...';
        document.getElementById('deptForm').submit();
    });

    // Repeater Logic
    function initRepeater() {
        const repeater = document.querySelector('[data-component="repeater"]');
        const container = repeater.querySelector('[data-ref="rows"]');
        const maxRows = JSON.parse(repeater.dataset.props).maxRows || 10;

        // Use the first row as a clean template
        const rowTemplate = container.firstElementChild.cloneNode(true);
        // Clear inputs and errors in template
        rowTemplate.querySelectorAll('input').forEach(input => input.value = '');
        rowTemplate.querySelectorAll('.text-danger').forEach(err => err.remove());

        function updateIndices() {
            const rows = container.querySelectorAll('.repeater-row');
            rows.forEach((row, index) => {
                // Update Name Attributes
                row.querySelectorAll('input').forEach(input => {
                    const nameAttr = input.getAttribute('name');
                    if (nameAttr) {
                        input.setAttribute('name', nameAttr.replace(/staff\[\d+\]/, `staff[${index}]`));
                    }
                });

                const addBtn = row.querySelector('.add-btn');
                const removeBtn = row.querySelector('.remove-btn');

                // Logic: Only show "Add More" on the last row
                if (index === rows.length - 1 && rows.length < maxRows) {
                    addBtn.classList.remove('d-none');
                } else {
                    addBtn.classList.add('d-none');
                }

                // Logic: Show "Remove" if more than 1 row exists
                if (rows.length > 1) {
                    removeBtn.classList.remove('d-none');
                } else {
                    removeBtn.classList.add('d-none');
                }
            });
        }

        // Event Delegation for Clicks (Add/Remove)
        container.addEventListener('click', (e) => {
            if (e.target.closest('.add-btn')) {
                const newRow = rowTemplate.cloneNode(true);
                container.appendChild(newRow);
                updateIndices();
            }

            if (e.target.closest('.remove-btn')) {
                e.target.closest('.repeater-row').remove();
                updateIndices();
            }
        });

        // Run once on load
        updateIndices();
    }

    document.addEventListener('DOMContentLoaded', initRepeater);
</script>
@endsection