@extends('layouts.appv2')

@section('content')


                            {{-- table index start --}}
                                <div class="card"  style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                                    <div class="card-header">
                                        <div class="d-flex justify-content-between align-items-center mb-0">
                                            <h5>Add Department and Unit</h5>

                                            <div class="btn-toolbar mb-2 mb-md-0">
                                                <a href="{{ route('admins.departmentunit')}}" class="btn btn-sm btn-secondary mt-1 mb-1" style="width:70px; text-align: center; border-radius: 50px;">Back</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">

                                        @if ($message = Session::get('success'))
                                            <div class="alert alert-success" role="alert">
                                                {{ $message }}
                                            </div>
                                        @endif

                                        @if ($message = Session::get('error'))
                                            <div class="alert alert-danger" role="alert">
                                                {{ $message }}
                                            </div>
                                        @endif

                                        @if ($errors->any())
                                            <div class="alert alert-danger" role="alert">
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif


                                        {{-- --------------------------------------------------------------------------- --}}
                                        <form  action="{{ route('admins.savedepartmentunitadd') }}" method="POST">
                                        @csrf
                                            
                                            <div class="form-col">

                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label for="department-name">Department Name</label>
                                                    <input type="text" name="department_name" class="form-control" id="department-name" placeholder="Enter Department Name" value="" required>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label for="department-code">Department Code</label>
                                                    <input type="text" name="department_code" class="form-control" id="department-code" placeholder="Enter Department Code" value="" required>
                                                </div>
                                            </div>

                                            <div class="form-row">
                                                <div class="form-group col-md-6">
                                                    <label for="unit-name">Unit Name</label>
                                                    <input type="text" name="unit_name" class="form-control" id="unit-name" placeholder="Enter Unit Name" value="" disabled required>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label for="unit-code">Unit Code</label>
                                                    <input type="text" name="unit_code" class="form-control" id="unit-code" placeholder="Enter Unit Code" value="" disabled required>
                                                </div>
                                            </div>

                                            </div>
                                            <hr>
                                            <button type="submit" class="btn btn-primary">Add Confirm</button>
                                        </form>
                                    </div>
                                </div>




                                            
                                <div class="card"  style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
                                    <div class="card-header">
                                        <h5>Add Unit only</h5>
                                    </div>
                                    <div class="card-body">

                                    <form action="{{ route('admins.saveunitadd') }}" method="POST">
                                        @csrf
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="department-name">Department Name</label>
                                                <select name="department_id" class="form-control" id="department-name" required>
                                                    <option value="">Select Department</option>
                                                    @foreach($departments as $department)
                                                        <option value="{{ $department->department_id }}">{{ $department->department_name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="unit-name">Unit Name</label>
                                                <input type="text" name="unit_name" class="form-control" id="unit-name" placeholder="Enter Unit Name" required>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="unit-code">Unit Code</label>
                                                <input type="text" name="unit_code" class="form-control" id="unit-code" placeholder="Enter Unit Code" required>
                                            </div>
                                        </div>

                                        <button type="submit" class="btn btn-primary">Add Confirm</button>
                                    </form>


                                        {{-------------------- --}}
                                    </div>
                                </div>
                            {{-- table index end --}}

<script>
    // Function to enable unit section once department section is filled
    document.getElementById('department-name').addEventListener('input', enableUnitSection);
    document.getElementById('department-code').addEventListener('input', enableUnitSection);

    function enableUnitSection() {
        const departmentName = document.getElementById('department-name').value.trim();
        const departmentCode = document.getElementById('department-code').value.trim();

        const unitNameField = document.getElementById('unit-name');
        const unitCodeField = document.getElementById('unit-code');

        // Enable the unit fields only if department fields are filled
        if (departmentName && departmentCode) {
            unitNameField.disabled = false;
            unitCodeField.disabled = false;
        } else {
            unitNameField.disabled = true;
            unitCodeField.disabled = true;
        }
    }
</script>
             
@endsection