@extends('layouts.app')
@section('page-pretitle', __('Management'))
@section('page-title', 'Setup')

@section('content')

    <!-- Flash Messages -->
    @if ($errors->any())
        <div id="validation-alert" class="alert alert-danger alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-red text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session('success'))
        <div id="success-alert" class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-green text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                {{ session('success') }}
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Responsive Styles -->
    <style>
        @media (max-width: 768px) {
            #validation-alert, #success-alert {
                width: 90% !important; /* Adjust the width for small screens */
                left: 5% !important; /* Center it horizontally */
            }
        }

        @media (max-width: 576px) {
            #validation-alert, #success-alert {
                width: 95% !important; /* Make the alert almost full width on very small screens */
                left: 2.5% !important; /* Slightly adjust for better centering */
            }
        }
    </style>

<div class="col-12">
    <div class="row row-cards">
    
        <!-- Status Section -->
        <div class="col-md-6">
            <div class="card h-100 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <!-- Search Form -->
                    <h3 class="card-title mb-0 me-2">Status</h3>
                    <form action="{{ route('setup.index') }}" method="GET" class="d-flex gap-2 align-items-center w-50">
                        <input type="text" name="status_search" value="{{ request('status_search') }}" class="form-control form-control-sm" placeholder="Search status type...">
                        <button type="submit" class="btn btn-sm btn-outline-secondary">Search</button>
                        <a href="{{ route('setup.index') }}" class="btn btn-sm btn-outline-danger">Clear</a>
                    </form>
                    @if (auth()->user()->role == 'admin')
                    <button type="button" class="btn btn-success ms-2" data-bs-toggle="modal" data-bs-target="#addStatusModal">Add Status</button>
                    @endif
                </div>
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th style="width:30px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                            @foreach ($statuses as $status)
                            {{-- @foreach (\App\Models\Status::all() as $status) --}}
                            <tr>
                                <td>
                                    <span class="status-name text-capitalize" id="status-name-{{ $status->id }}">{{ $status->name }}</span>
                                </td>
                                <td>
                                    @if (auth()->user()->role == 'admin')
                                    <!-- Dropdown for Submission Type Actions -->
                                    <div class="dropdown text-center">
                                        <button class="btn btn-icon btn-light" type="button"
                                            id="dropdownMenuButton{{ $status->id }}"
                                            data-bs-toggle="dropdown"
                                            aria-expanded="false"
                                            onclick="event.stopPropagation();">
                                            <i class="ti ti-dots-vertical"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton{{ $status->id }}">
                                            <li>
                                                <button type="button"
                                                    class="dropdown-item text-warning edit-submission-type-btn"
                                                    data-id="{{ $status->id }}"
                                                    data-name="{{ $status->name }}"
                                                    data-url="{{ route('status.update', $status->id) }}">
                                                    <i class="ti ti-edit me-2"></i> Edit
                                                </button>
                                            </li>
                                            <li>
                                                <form action="{{ route('status.destroy', $status) }}" method="POST" onsubmit="event.stopPropagation();" class="delete-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn-delete-project dropdown-item text-danger">
                                                        <i class="ti ti-trash me-2"></i> Delete
                                                    </button>
                                                </form>
                                            </li>
                                        </ul>
                                    </div>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                {{-- <div class="card-footer border-top py-3">
                    <div class="d-flex justify-content-end">
                        {{ $status->links('pagination::bootstrap-5') }}
                    </div>
                </div> --}}

                <!-- Pagination -->
                @if ($statuses->hasPages())
                    <div class="card-footer bg-transparent border-top-0">
                        {{ $statuses->appends(request()->except('page'))->onEachSide(1)->links('pagination::bootstrap-5') }}
                    </div>
                @endif
            
            <div class="card-footer">
            </div>
            </div>
        </div>

        <!-- Submission Types Section -->
        <div class="col-md-6">
            <div class="card h-100 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <!-- Search Form -->
                    <h3 class="card-title mb-0 me-2">Submission Type</h3>
                    <form action="{{ route('setup.index') }}" method="GET" class="d-flex gap-2 align-items-center w-50">
                        <input type="text" name="submission_search" value="{{ request('submission_search') }}" class="form-control form-control-sm" placeholder="Search submission type...">
                        <button type="submit" class="btn btn-sm btn-outline-secondary">Search</button>
                        <a href="{{ route('setup.index') }}" class="btn btn-sm btn-outline-danger">Clear</a>
                    </form>
                    @if (auth()->user()->role == 'admin')
                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addSubmissionTypeModal">Add Submission</button>
                    @endif
                </div>
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th style="width:30px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($submissionTypes as $submissionType)
                            {{-- @foreach (\App\Models\SubmissionType::all() as $submissionType) --}}
                            <tr>
                                <td class="text-uppercase">{{ $submissionType->name }}</td>
                                <td>
                                    @if (auth()->user()->role == 'admin')
                                    <!-- Dropdown for Submission Type Actions -->
                                    <div class="dropdown text-center">
                                        <button class="btn btn-icon btn-light" type="button"
                                            id="dropdownMenuButton{{ $submissionType->id }}"
                                            data-bs-toggle="dropdown"
                                            aria-expanded="false"
                                            onclick="event.stopPropagation();">
                                            <i class="ti ti-dots-vertical"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton{{ $submissionType->id }}">
                                            <li>
                                                <button type="button"
                                                    class="dropdown-item text-warning edit-submission-type-btn"
                                                    data-id="{{ $submissionType->id }}"
                                                    data-name="{{ $submissionType->name }}"
                                                    data-url="{{ route('submission_types.update', $submissionType->id) }}">
                                                    <i class="ti ti-edit me-2"></i> Edit
                                                </button>
                                            </li>
                                            <li>
                                                <form action="{{ route('submission_types.destroy', $submissionType) }}" method="POST" onsubmit="event.stopPropagation();" class="delete-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn-delete-project dropdown-item text-danger">
                                                        <i class="ti ti-trash me-2"></i> Delete
                                                    </button>
                                                </form>
                                            </li>
                                        </ul>
                                    </div>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if ($submissionTypes->hasPages())
                    <div class="card-footer bg-transparent border-top-0">
                        {{ $submissionTypes->appends(request()->except('page'))->onEachSide(1)->links('pagination::bootstrap-5') }}
                    </div>
                @endif
            
                <div class="card-footer">
                </div>

            </div>
        </div>      

        <!-- Scopes Section -->
        <div class="col-md-6">
            <div class="card h-100 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0 me-2">Scopes</h3>
                    <form action="{{ route('setup.index') }}" method="GET" class="d-flex gap-2 align-items-center w-50">
                        <input type="text" name="scope_search" value="{{ request('scope_search') }}" class="form-control form-control-sm" placeholder="Search scope...">
                        <button type="submit" class="btn btn-sm btn-outline-secondary">Search</button>
                        <a href="{{ route('setup.index') }}" class="btn btn-sm btn-outline-danger">Clear</a>
                    </form>
                    @if (auth()->user()->role == 'admin')
                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addScopeModal">Add Scope</button>
                    @endif
                </div>
                <div class="card-body">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th style="width:30px;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{-- @foreach ($scopes as $scope) --}}
                            @foreach ($scopes as $scope)
                            {{-- @foreach (\App\Models\Scope::all() as $scope) --}}
                            <tr>
                                <td>
                                    <span class="scope-name text-capitalize" id="scope-name-{{ $scope->id }}">{{ $scope->name }}</span>
                                </td>
                                <td>
                                    @if (auth()->user()->role == 'admin')
                                    <!-- Dropdown for Submission Type Actions -->
                                    <div class="dropdown text-center">
                                        <button class="btn btn-icon btn-light" type="button"
                                            id="dropdownMenuButton{{ $scope->id }}"
                                            data-bs-toggle="dropdown"
                                            aria-expanded="false"
                                            onclick="event.stopPropagation();">
                                            <i class="ti ti-dots-vertical"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton{{ $scope->id }}">
                                            <li>
                                                <button type="button"
                                                    class="dropdown-item text-warning edit-submission-type-btn"
                                                    data-id="{{ $scope->id }}"
                                                    data-name="{{ $scope->name }}"
                                                    data-url="{{ route('scopes.update', $scope->id) }}">
                                                    <i class="ti ti-edit me-2"></i> Edit
                                                </button>
                                            </li>
                                            <li>
                                                <form action="{{ route('scopes.destroy', $scope) }}" method="POST" onsubmit="event.stopPropagation();" class="delete-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn-delete-project dropdown-item text-danger">
                                                        <i class="ti ti-trash me-2"></i> Delete
                                                    </button>
                                                </form>
                                            </li>
                                        </ul>
                                    </div>
                                    @endif
                                </td>  
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if ($scopes->hasPages())
                    <div class="card-footer bg-transparent border-top-0">
                        {{ $scopes->appends(request()->except('page'))->onEachSide(1)->links('pagination::bootstrap-5') }}
                    </div>
                @endif
                <div class="card-footer">
                </div>
            </div>
        </div>
                    
            <!-- Project Type Section -->
            <div class="col-md-6">
                <div class="card h-100 shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0 me-2">Project Type</h3>
                        <form action="{{ route('setup.index') }}" method="GET" class="d-flex gap-2 align-items-center w-50">
                            <input type="text" name="project_type_search" value="{{ request('project_type_search') }}" class="form-control form-control-sm" placeholder="Search project type...">
                            <button type="submit" class="btn btn-sm btn-outline-secondary">Search</button>
                            <a href="{{ route('setup.index') }}" class="btn btn-sm btn-outline-danger">Clear</a>
                        </form>
                        @if (auth()->user()->role == 'admin')
                        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addProjectTypeModal">Add Project Type</button>
                        @endif
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th style="width:30px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($projectTypes as $projectType)
                                <tr>
                                    <td>
                                        <span class="project-type-name text-capitalize" id="project-type-name-{{ $projectType->id }}">{{ $projectType->name }}</span>
                                    </td>
                                    <td>
                                        @if (auth()->user()->role == 'admin')
                                        <!-- Dropdown for Project Type Actions -->
                                        <div class="dropdown text-center">
                                            <button class="btn btn-icon btn-light" type="button"
                                                id="dropdownMenuButton{{ $projectType->id }}"
                                                data-bs-toggle="dropdown"
                                                aria-expanded="false"
                                                onclick="event.stopPropagation();">
                                                <i class="ti ti-dots-vertical"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton{{ $projectType->id }}">
                                                <li>
                                                    <button type="button"
                                                        class="dropdown-item text-warning edit-submission-type-btn"
                                                        data-id="{{ $projectType->id }}"
                                                        data-name="{{ $projectType->name }}"
                                                        data-url="{{ route('project_types.update', $projectType->id) }}">
                                                        <i class="ti ti-edit me-2"></i> Edit
                                                    </button>
                                                </li>
                                                <li>
                                                    <form action="{{ route('project_types.destroy', $projectType) }}" method="POST" onsubmit="event.stopPropagation();" class="delete-form">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn-delete-project dropdown-item text-danger">
                                                            <i class="ti ti-trash me-2"></i> Delete
                                                        </button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </div>
                                        @endif
                                    </td>  
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @if ($projectTypes->hasPages())
                        <div class="card-footer bg-transparent border-top-0">
                            {{ $projectTypes->appends(request()->except('page'))->onEachSide(1)->links('pagination::bootstrap-5') }}
                        </div>
                    @endif
                <div class="card-footer">
                </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card h-100 shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0 me-2">Project Phase</h3>
                        <form action="{{ route('setup.index') }}" method="GET" class="d-flex gap-2 align-items-center w-50">
                            <input type="text" name="project_phase_search" value="{{ request('project_phase_search') }}" class="form-control form-control-sm" placeholder="Search project phase...">
                            <button type="submit" class="btn btn-sm btn-outline-secondary">Search</button>
                            <a href="{{ route('setup.index') }}" class="btn btn-sm btn-outline-danger">Clear</a>
                        </form>
                        @if (auth()->user()->role == 'admin')
                        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addProjectPhaseModal">Add Project Phase</button>
                        @endif
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th style="width:30px;">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($projectPhases as $projectPhase)
                                <tr>
                                    <td>
                                        <span class="project-phase-name text-capitalize" id="project-phase-name-{{ $projectPhase->id }}">{{ $projectPhase->name }}</span>
                                    </td>
                                    <td>
                                        @if (auth()->user()->role == 'admin')
                                        <!-- Dropdown for Project Phase Actions -->
                                        <div class="dropdown text-center">
                                            <button class="btn btn-icon btn-light" type="button"
                                                id="dropdownMenuButton{{ $projectPhase->id }}"
                                                data-bs-toggle="dropdown"
                                                aria-expanded="false"
                                                onclick="event.stopPropagation();">
                                                <i class="ti ti-dots-vertical"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton{{ $projectPhase->id }}">
                                                <li>
                                                    <button type="button"
                                                        class="dropdown-item text-warning edit-submission-type-btn"
                                                        data-id="{{ $projectPhase->id }}"
                                                        data-name="{{ $projectPhase->name }}"
                                                        data-url="{{ route('project_phases.update', $projectPhase->id) }}">
                                                        <i class="ti ti-edit me-2"></i> Edit
                                                    </button>
                                                </li>
                                                <li>
                                                    <form action="{{ route('project_phases.destroy', $projectPhase) }}" method="POST" onsubmit="event.stopPropagation();" class="delete-form">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn-delete-project dropdown-item text-danger">
                                                            <i class="ti ti-trash me-2"></i> Delete
                                                        </button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </div>
                                        @endif
                                    </td>  
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @if ($projectPhases->hasPages())
                        <div class="card-footer bg-transparent border-top-0">
                            {{ $projectPhases->appends(request()->except('page'))->onEachSide(1)->links('pagination::bootstrap-5') }}
                        </div>
                    @endif
                <div class="card-footer">
                </div>
                </div>
            </div>

        {{-- Modal for scope edit --}}
        <div class="modal fade" id="editScopeModal" tabindex="-1" aria-labelledby="editScopeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form id="editScopeForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-content">
                        <div class="modal-header bg-dark text-white">
                            <h5 class="modal-title" id="editScopeModalLabel">Edit Scope</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="edit-scope-name" class="form-label">Scope Name</label>
                                <input type="text" name="name" id="edit-scope-name" class="form-control text-capitalize" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Modal for status edit --}}
        <div class="modal fade" id="editStatusModal" tabindex="-1" aria-labelledby="editStatusModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form id="editStatusForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-content">
                        <div class="modal-header bg-dark text-white">
                            <h5 class="modal-title" id="editStatusModalLabel">Edit Status</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="edit-status-name" class="form-label">Status Name</label>
                                <input type="text" name="name" id="edit-status-name" class="form-control " required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Edit modal submission types --}}
        <div class="modal fade" id="editSubmissionTypeModal" tabindex="-1" aria-labelledby="editSubmissionTypeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form id="editSubmissionTypeForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-content">
                        <div class="modal-header bg-dark text-white">
                            <h5 class="modal-title" id="editSubmissionTypeModalLabel">Edit Submission Type</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="edit-submission-type-name" class="form-label">Submission Type Name</label>
                                <input type="text" name="name" id="edit-submission-type-name" class="form-control" style="text-transform: uppercase;" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        
        {{-- Edit modal project types --}}
        <div class="modal fade" id="editProjectTypeModal" tabindex="-1" aria-labelledby="editProjectTypeModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form id="editProjectTypeForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-content">
                        <div class="modal-header bg-dark text-white">
                            <h5 class="modal-title" id="editProjectTypeModalLabel">Edit Project Type</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="edit-project-type-name" class="form-label">Project Type Name</label>
                                <input type="text" name="name" id="edit-project-type-name" class="form-control" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="modal fade" id="editProjectPhaseModal" tabindex="-1" aria-labelledby="editProjectPhaseModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form id="editProjectPhaseForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-content">
                        <div class="modal-header bg-dark text-white">
                            <h5 class="modal-title" id="editProjectPhaseModalLabel">Edit Project Phase</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="edit-project-phase-name" class="form-label">Project Phase Name</label>
                                <input type="text" name="name" id="edit-project-phase-name" class="form-control" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

<!-- Add Modals -->
@include('setup.modals.add_status')
@include('setup.modals.add_submission_type')
@include('setup.modals.add_scope')
@include('setup.modals.add_project_type')
@include('setup.modals.add_project_phase')

@endsection

@section('script')
<script>
    document.addEventListener("DOMContentLoaded", () => {
        // Handle entries dropdown change
        $(document).on('change', '#entries', function () {
            $('#h-entries').val($(this).val());
            $('#form-search').submit();
        });
        
        // ===== Scope Edit =====
        const editScopeModal = new bootstrap.Modal(document.getElementById('editScopeModal'));
        const editScopeForm = document.getElementById('editScopeForm');
        const editScopeInput = document.getElementById('edit-scope-name');

        document.querySelectorAll('.edit-scope-btn').forEach(button => {
            button.addEventListener('click', () => {
                const name = button.dataset.name;
                const url = button.dataset.url;

                editScopeInput.value = name;
                editScopeForm.setAttribute('action', url);
                editScopeModal.show();
            });
        });

        // ===== Status Edit =====
        const editStatusModal = new bootstrap.Modal(document.getElementById('editStatusModal'));
        const editStatusForm = document.getElementById('editStatusForm');
        const editStatusInput = document.getElementById('edit-status-name');

        document.querySelectorAll('.edit-status-btn').forEach(button => {
            button.addEventListener('click', () => {
                const name = button.dataset.name;
                const url = button.dataset.url;

                editStatusInput.value = name;
                editStatusForm.setAttribute('action', url);
                editStatusModal.show();
            });
        });

        // ===== Submission Type Edit =====
        const editSubmissionTypeModal = new bootstrap.Modal(document.getElementById('editSubmissionTypeModal'));
        const editSubmissionTypeForm = document.getElementById('editSubmissionTypeForm');
        const editSubmissionTypeInput = document.getElementById('edit-submission-type-name');

        document.querySelectorAll('.edit-submission-type-btn').forEach(button => {
            button.addEventListener('click', () => {
                const name = button.dataset.name;
                const url = button.dataset.url;

                editSubmissionTypeInput.value = name;
                editSubmissionTypeForm.setAttribute('action', url);
                editSubmissionTypeModal.show();
            });
        });

        // ===== Project Type Edit =====
        const editProjectTypeModal = new bootstrap.Modal(document.getElementById('editProjectTypeModal'));
        const editProjectTypeForm = document.getElementById('editProjectTypeForm');
        const editProjectTypeInput = document.getElementById('edit-project-type-name');

        document.querySelectorAll('.edit-project-type-btn').forEach(button => {
            button.addEventListener('click', () => {
                const name = button.dataset.name;
                const url = button.dataset.url;

                editProjectTypeInput.value = name;
                editProjectTypeForm.setAttribute('action', url);
                editProjectTypeModal.show();
            });
        });

        // ===== Project Phase Edit =====
        const editProjectPhaseModal = new bootstrap.Modal(document.getElementById('editProjectPhaseModal'));
        const editProjectPhaseForm = document.getElementById('editProjectPhaseForm');
        const editProjectPhaseInput = document.getElementById('edit-project-phase-name');

        document.querySelectorAll('.edit-project-phase-btn').forEach(button => {
            button.addEventListener('click', () => {
                const name = button.dataset.name;
                const url = button.dataset.url;

                editProjectPhaseInput.value = name;
                editProjectPhasePhaseForm.setAttribute('action', url);
                editProjectPhasePhaseModal.show();
            });
        });

        // ===== Auto-hide alerts =====
        ['success-alert', 'error-alert'].forEach(id => {
            const alertEl = document.getElementById(id);
            if (alertEl) {
                setTimeout(() => {
                    alertEl.classList.remove('show');
                    alertEl.classList.add('hide');
                    setTimeout(() => {
                        alertEl.remove();
                    }, 500); // Delay for fade-out animation
                }, 3000); // Show duration
            }
        });
    });
</script>
@endsection