@extends('layouts.app')

@section('content')
<div class="row mb-4">
    <div class="col-lg-8">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-decoration-none text-muted small">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('projects.index') }}" class="text-decoration-none text-muted small">Projects</a></li>
                <li class="breadcrumb-item active text-primary small fw-semibold" aria-current="page">Create</li>
            </ol>
        </nav>
        <h2 class="fw-bold text-dark">Create New Project</h2>
        <p class="text-secondary small mb-0">Add a polished project card with links, tech stack, status, and a strong visual preview.</p>
    </div>
    <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
        <a href="{{ route('projects.index') }}" class="btn btn-light border rounded-3 px-4 py-2">
            <i class="bi bi-arrow-left me-2"></i> Back to Projects
        </a>
    </div>
</div>

@if($errors->any())
    <div class="alert alert-danger border-0 rounded-4 shadow-sm mb-4">
        <div class="d-flex align-items-start">
            <i class="bi bi-exclamation-triangle-fill fs-5 me-3"></i>
            <div>
                <strong class="d-block mb-1">Please review the form.</strong>
                <span class="small">Some project details are missing or invalid. Update the highlighted fields and try again.</span>
            </div>
        </div>
    </div>
@endif

<div class="row g-4">
    <div class="col-xl-8">
        <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
            <div class="card-header bg-white border-0 py-3 px-4 mt-2">
                <h6 class="m-0 fw-bold text-dark">
                    <i class="bi bi-layers-fill me-2 text-primary"></i> Project Details
                </h6>
            </div>
            <div class="card-body p-4 pt-2">
                <form action="{{ route('projects.store') }}" method="POST" enctype="multipart/form-data" id="projectCreateForm">
                    @csrf

                    @include('projects._form', [
                        'project' => null,
                        'technologies' => $technologies,
                        'showTechnologyQuickAdd' => true,
                        'allowTechnologyDelete' => true,
                    ])

                    <hr class="my-4 opacity-50">

                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                        <a href="{{ route('projects.index') }}" class="btn btn-link text-decoration-none text-secondary fw-semibold px-0">
                            <i class="bi bi-arrow-left me-1"></i> Back to List
                        </a>
                        <div class="d-flex flex-wrap gap-2">
                            <button type="button" class="btn btn-light rounded-3 px-4 fw-semibold text-secondary" id="resetProjectBtn">
                                <span class="reset-btn-default">Reset</span>
                                <span class="reset-btn-loading d-none">
                                    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                    Resetting...
                                </span>
                            </button>
                            <button type="submit" class="btn btn-primary rounded-3 px-5 fw-bold shadow-sm">
                                <i class="bi bi-check2-circle me-2"></i> Save Project
                            </button>
                        </div>
                    </div>
                </form>
                <div class="reset-status-message d-none mt-3" id="resetStatusMessage">
                    <div class="d-inline-flex align-items-center bg-light border rounded-3 px-3 py-2 text-secondary small fw-semibold">
                        <span class="spinner-border spinner-border-sm me-2 text-primary" role="status" aria-hidden="true"></span>
                        Resetting all the fields...
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card border-0 project-tips-card text-white rounded-4 shadow-lg p-3">
            <div class="card-body">
                <h5 class="fw-bold mb-3">What Makes A Good Project Card</h5>
                <div class="d-flex mb-3">
                    <i class="bi bi-stars me-3 fs-5"></i>
                    <p class="small mb-0">Use a project name that feels clear and memorable at a quick glance.</p>
                </div>
                <div class="d-flex mb-3">
                    <i class="bi bi-link-45deg me-3 fs-5"></i>
                    <p class="small mb-0">Add GitHub and live demo links when available so visitors can explore instantly.</p>
                </div>
                <div class="d-flex">
                    <i class="bi bi-grid-3x3-gap-fill me-3 fs-5"></i>
                    <p class="small mb-0">Choose the right technologies to keep your portfolio stack organized and credible.</p>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 mt-4">
            <div class="card-body p-4">
                <h6 class="fw-bold text-dark mb-3">
                    <i class="bi bi-info-circle-fill text-primary me-2"></i>Publishing Note
                </h6>
                <p class="text-secondary small mb-3">Active projects are the ones you want to present as ready for showcasing. Inactive projects stay saved but clearly marked.</p>
                <div class="quick-note-row">
                    <span class="quick-note-label">Recommended image</span>
                    <span class="quick-note-value">Landscape preview</span>
                </div>
                <div class="quick-note-row">
                    <span class="quick-note-label">Stack selection</span>
                    <span class="quick-note-value">At least 1 tag</span>
                </div>
                <div class="quick-note-row mb-0">
                    <span class="quick-note-label">Best copy style</span>
                    <span class="quick-note-value">Short and specific</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addTechnologyModal" tabindex="-1" aria-labelledby="addTechnologyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
            <form id="addTechnologyForm" action="{{ route('technologies.store') }}" method="POST" novalidate>
                @csrf
                <div class="modal-header border-0 px-4 pt-4 pb-2">
                    <div>
                        <h5 class="modal-title fw-bold text-dark" id="addTechnologyModalLabel">Add Technology</h5>
                        <p class="text-secondary small mb-0">Create a new technology tag without leaving the project form.</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-4 pb-3">
                    <div class="alert alert-danger rounded-4 border-0 d-none mb-3" id="technologyModalErrorBox"></div>

                    <div class="mb-3">
                        <label for="technology_name" class="form-label fw-semibold text-dark">Technology Name</label>
                        <input type="text" class="form-control bg-light border-0 py-3" id="technology_name" name="name" placeholder="e.g. Laravel" required>
                        <div class="invalid-feedback d-block small mt-2" data-field-error="name"></div>
                    </div>

                    <div class="mb-3">
                        <label for="technology_icon" class="form-label fw-semibold text-dark">Icon Class <span class="text-secondary fw-normal">(Optional)</span></label>
                        <input type="text" class="form-control bg-light border-0 py-3" id="technology_icon" name="icon" placeholder="e.g. bi bi-boxes">
                        <div class="invalid-feedback d-block small mt-2" data-field-error="icon"></div>
                    </div>

                    <div class="mb-0">
                        <label for="technology_color" class="form-label fw-semibold text-dark">Color Code <span class="text-secondary fw-normal">(Optional)</span></label>
                        <input type="text" class="form-control bg-light border-0 py-3" id="technology_color" name="color" placeholder="#3b82f6">
                        <div class="form-text small">Use hex color like <code>#3b82f6</code>.</div>
                        <div class="invalid-feedback d-block small mt-2" data-field-error="color"></div>
                    </div>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-2">
                    <button type="button" class="btn btn-light border rounded-3 px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary rounded-3 px-4" id="saveTechnologyBtn">
                        <span class="save-technology-default">
                            <i class="bi bi-plus-circle me-1"></i> Save
                        </span>
                        <span class="save-technology-loading d-none">
                            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                            Saving...
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteTechnologyModal" tabindex="-1" aria-labelledby="deleteTechnologyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
            <div class="modal-header border-0 px-4 pt-4 pb-2">
                <div>
                    <h5 class="modal-title fw-bold text-dark" id="deleteTechnologyModalLabel">Delete Technology</h5>
                    <p class="text-secondary small mb-0">Remove this technology tag from the project stack options.</p>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body px-4 pb-3">
                <div class="delete-technology-card">
                    <span class="delete-technology-icon">
                        <i class="bi bi-trash3"></i>
                    </span>
                    <div>
                        <p class="fw-bold text-dark mb-1" id="deleteTechnologyName">Technology</p>
                        <p class="text-secondary small mb-0">This will permanently delete the tag if it is not used by any project.</p>
                    </div>
                </div>
                <div class="alert alert-danger rounded-4 border-0 d-none mt-3 mb-0" id="deleteTechnologyErrorBox"></div>
            </div>
            <div class="modal-footer border-0 px-4 pb-4 pt-2">
                <button type="button" class="btn btn-light border rounded-3 px-4" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger rounded-3 px-4" id="confirmDeleteTechnologyBtn">
                    <span class="delete-technology-default">
                        <i class="bi bi-trash3 me-1"></i> Delete
                    </span>
                    <span class="delete-technology-loading d-none">
                        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                        Deleting...
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

<div class="position-fixed top-0 end-0 p-3" style="z-index: 1080;">
    <div id="technologySuccessToast" class="toast align-items-center text-bg-dark border-0 shadow-lg rounded-4" role="status" aria-live="polite" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body d-flex align-items-center gap-2">
                <i class="bi bi-check-circle-fill text-success"></i>
                <span id="technologySuccessToastMessage">Technology created successfully.</span>
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
    .upload-container {
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
    }
    .upload-container:hover {
        background-color: #f8fafc !important;
        border-color: #3b82f6 !important;
    }
    .upload-container input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }
    .project-tips-card {
        background: linear-gradient(145deg, #0f172a 0%, #1d4ed8 48%, #2563eb 100%);
    }
    .technology-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 0.85rem;
    }
    .technology-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1.5rem 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background: #fff;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        cursor: pointer;
        position: relative;
        text-align: center;
    }
    .technology-option:hover {
        border-color: #e2e8f0;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
        transform: translateY(-2px);
    }
    .technology-option.is-selected {
        border-color: var(--tech-color, #3b82f6);
        background: #fff;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    }
    .technology-card-wrap {
        position: relative;
    }
    .technology-delete-btn {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        border: 0;
        border-radius: 999px;
        color: #ef4444;
        background: #fee2e2;
        box-shadow: 0 8px 20px rgba(239, 68, 68, 0.16);
        transition: all 0.2s ease;
    }
    .technology-delete-btn:hover {
        color: #fff;
        background: #ef4444;
        transform: translateY(-1px);
    }
    .technology-delete-btn.is-disabled,
    .technology-delete-btn:disabled {
        color: #94a3b8;
        background: #f1f5f9;
        box-shadow: none;
        cursor: not-allowed;
    }
    .technology-delete-btn.is-disabled:hover,
    .technology-delete-btn:disabled:hover {
        color: #94a3b8;
        background: #f1f5f9;
        transform: none;
    }
    .technology-input {
        display: none;
    }
    
    .technology-icon-container {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        box-shadow: 
            0 8px 24px rgba(0, 0, 0, 0.04),
            inset 0 1px 1px rgba(255, 255, 255, 0.8);
        position: relative;
        z-index: 1;
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        margin-bottom: 0.25rem;
    }

    .technology-icon-container::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        background: var(--tech-color, #3b82f6);
        opacity: 0.05;
        z-index: -1;
        filter: blur(12px);
        transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .technology-icon-container i {
        font-size: 24px;
        color: var(--tech-color, #3b82f6);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .technology-option:hover .technology-icon-container,
    .technology-option.is-selected .technology-icon-container {
        transform: translateY(-6px);
        box-shadow: 
            0 12px 32px rgba(0, 0, 0, 0.08),
            inset 0 1px 1px rgba(255, 255, 255, 0.9);
    }

    .technology-option:hover .technology-icon-container::after,
    .technology-option.is-selected .technology-icon-container::after {
        opacity: 0.2;
    }

    .technology-name {
        color: #0f172a;
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 0.5px;
        line-height: 1.2;
        transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .technology-option:hover .technology-name,
    .technology-option.is-selected .technology-name {
        color: var(--tech-color, #3b82f6);
    }
    .technology-add-btn {
        white-space: nowrap;
    }
    .delete-technology-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid #fee2e2;
        border-radius: 18px;
        background: #fff7f7;
    }
    .delete-technology-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 999px;
        color: #ef4444;
        background: #fee2e2;
        flex-shrink: 0;
    }
    .current-image-card {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.85rem 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background: #f8fafc;
    }
    .current-image-thumb {
        width: 88px;
        height: 72px;
        border-radius: 14px;
        object-fit: cover;
        border: 1px solid #cbd5e1;
        flex-shrink: 0;
    }
    .current-image-label {
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #2563eb;
        margin-bottom: 0.25rem;
    }
    .quick-note-row {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding-bottom: 0.85rem;
        margin-bottom: 0.85rem;
        border-bottom: 1px solid #e2e8f0;
    }
    .quick-note-label {
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .quick-note-value {
        color: #0f172a;
        font-weight: 600;
        text-align: right;
    }
    .project-status-control .input-group-text,
    .project-status-select {
        transition: all 0.2s ease;
    }
    .project-status-control .input-group-text {
        background: #f8fafc;
        color: #64748b;
    }
    .project-status-select {
        font-weight: 700;
    }
    .project-status-control.is-active .input-group-text,
    .project-status-control.is-active .project-status-select {
        color: #15803d;
        background: #dcfce7;
    }
    .project-status-control.is-inactive .input-group-text,
    .project-status-control.is-inactive .project-status-select {
        color: #b91c1c;
        background: #fee2e2;
    }
    .project-status-control.is-active:focus-within {
        box-shadow: 0 0 0 0.22rem rgba(34, 197, 94, 0.18);
        border-radius: 0.8rem;
    }
    .project-status-control.is-inactive:focus-within {
        box-shadow: 0 0 0 0.22rem rgba(239, 68, 68, 0.18);
        border-radius: 0.8rem;
    }    .input-group-text {
        border: none !important;
    }
    .border-dashed {
        border-style: dashed !important;
    }
    .breadcrumb-item + .breadcrumb-item::before {
        content: "\2022";
        color: #cbd5e1;
    }
    @media (max-width: 767.98px) {
        .technology-grid {
            grid-template-columns: 1fr;
        }
        .quick-note-row {
            flex-direction: column;
        }
        .quick-note-value {
            text-align: left;
        }
    }
</style>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const fileInput = document.getElementById('image');
        const fileName = document.getElementById('project-image-name');
        const statusControl = document.querySelector('[data-project-status-control]');
        const statusInput = document.getElementById('status');
        const form = document.getElementById('projectCreateForm');
        const resetButton = document.getElementById('resetProjectBtn');
        const resetStatusMessage = document.getElementById('resetStatusMessage');
        const addTechnologyModalElement = document.getElementById('addTechnologyModal');
        const addTechnologyForm = document.getElementById('addTechnologyForm');
        const saveTechnologyBtn = document.getElementById('saveTechnologyBtn');
        const technologyModalErrorBox = document.getElementById('technologyModalErrorBox');
        const deleteTechnologyModalElement = document.getElementById('deleteTechnologyModal');
        const deleteTechnologyName = document.getElementById('deleteTechnologyName');
        const deleteTechnologyErrorBox = document.getElementById('deleteTechnologyErrorBox');
        const confirmDeleteTechnologyBtn = document.getElementById('confirmDeleteTechnologyBtn');
        const toastElement = document.getElementById('technologySuccessToast');
        const toastMessage = document.getElementById('technologySuccessToastMessage');

        const addTechnologyModal = addTechnologyModalElement ? bootstrap.Modal.getOrCreateInstance(addTechnologyModalElement) : null;
        const deleteTechnologyModal = deleteTechnologyModalElement ? bootstrap.Modal.getOrCreateInstance(deleteTechnologyModalElement) : null;
        const successToast = toastElement ? bootstrap.Toast.getOrCreateInstance(toastElement, { delay: 3000 }) : null;
        let pendingTechnologyDelete = null;

        function syncProjectStatus() {
            if (!statusControl || !statusInput) {
                return;
            }

            const isActive = statusInput.value === 'active';
            
            statusControl.classList.toggle('is-active', isActive);
            statusControl.classList.toggle('is-inactive', !isActive);

            const statusText = statusControl.querySelector('.status-text');
            if (statusText) {
                statusText.textContent = isActive ? 'Active' : 'Inactive';
            }

            const icon = statusControl.querySelector('.project-status-icon');
            if (icon) {
                icon.className = `bi project-status-icon ${isActive ? 'bi-toggle-on' : 'bi-toggle-off'}`;
            }
        }

        function getTechnologyOptionsContainer() {
            return document.getElementById('technologyOptionsContainer');
        }

        function getCsrfToken() {
            return addTechnologyForm ? addTechnologyForm.querySelector('input[name="_token"]').value : '';
        }

        function toggleTechnologyOptionState(input) {
            if (!input || !input.classList.contains('technology-input')) {
                return;
            }

            const option = input.closest('[data-technology-option]');

            if (!option) {
                return;
            }

            option.classList.toggle('is-selected', input.checked);
        }

        function clearTechnologyValidation() {
            if (!addTechnologyForm) {
                return;
            }

            addTechnologyForm.querySelectorAll('.form-control').forEach(function (field) {
                field.classList.remove('is-invalid');
            });

            addTechnologyForm.querySelectorAll('[data-field-error]').forEach(function (errorField) {
                errorField.textContent = '';
            });

            if (technologyModalErrorBox) {
                technologyModalErrorBox.classList.add('d-none');
                technologyModalErrorBox.textContent = '';
            }
        }

        function setTechnologySaveState(isLoading) {
            if (!saveTechnologyBtn) {
                return;
            }

            const defaultLabel = saveTechnologyBtn.querySelector('.save-technology-default');
            const loadingLabel = saveTechnologyBtn.querySelector('.save-technology-loading');

            saveTechnologyBtn.disabled = isLoading;

            if (defaultLabel) {
                defaultLabel.classList.toggle('d-none', isLoading);
            }

            if (loadingLabel) {
                loadingLabel.classList.toggle('d-none', !isLoading);
            }
        }

        function setTechnologyDeleteState(isLoading) {
            if (!confirmDeleteTechnologyBtn) {
                return;
            }

            const defaultLabel = confirmDeleteTechnologyBtn.querySelector('.delete-technology-default');
            const loadingLabel = confirmDeleteTechnologyBtn.querySelector('.delete-technology-loading');

            confirmDeleteTechnologyBtn.disabled = isLoading;

            if (defaultLabel) {
                defaultLabel.classList.toggle('d-none', isLoading);
            }

            if (loadingLabel) {
                loadingLabel.classList.toggle('d-none', !isLoading);
            }
        }

        function getSelectedTechnologyIds() {
            if (!form) {
                return [];
            }

            return Array.from(form.querySelectorAll('input[name="technologies[]"]:checked')).map(function (input) {
                return input.value;
            });
        }

        function refreshTechnologyOptions(html) {
            const currentTechnologyOptionsContainer = getTechnologyOptionsContainer();

            if (currentTechnologyOptionsContainer && html) {
                currentTechnologyOptionsContainer.outerHTML = html;
            }
        }

        function showTechnologyToast(message) {
            if (toastMessage) {
                toastMessage.textContent = message;
            }

            if (successToast) {
                successToast.show();
            }
        }

        if (statusControl) {
            statusControl.addEventListener('click', function () {
                if (statusInput) {
                    statusInput.value = statusInput.value === 'active' ? 'inactive' : 'active';
                    syncProjectStatus();
                }
            });
            syncProjectStatus();
        }
        document.addEventListener('change', function (event) {
            if (event.target.matches('.technology-input')) {
                toggleTechnologyOptionState(event.target);
            }
        });

        document.addEventListener('click', function (event) {
            const deleteButton = event.target.closest('[data-technology-delete]');

            if (!deleteButton) {
                return;
            }

            event.preventDefault();
            event.stopPropagation();

            pendingTechnologyDelete = {
                name: deleteButton.dataset.technologyName || 'this technology',
                url: deleteButton.dataset.deleteUrl,
            };

            if (deleteTechnologyName) {
                deleteTechnologyName.textContent = pendingTechnologyDelete.name;
            }

            if (deleteTechnologyErrorBox) {
                deleteTechnologyErrorBox.classList.add('d-none');
                deleteTechnologyErrorBox.textContent = '';
            }

            setTechnologyDeleteState(false);

            if (deleteTechnologyModal) {
                deleteTechnologyModal.show();
            }
        });

        document.querySelectorAll('.technology-input').forEach(function (input) {
            toggleTechnologyOptionState(input);
        });

        if (fileInput && fileName) {
            fileInput.addEventListener('change', function () {
                fileName.textContent = fileInput.files && fileInput.files[0]
                    ? 'Selected: ' + fileInput.files[0].name
                    : 'JPG, PNG, or WEBP up to 2MB.';
            });
        }

        if (addTechnologyModalElement) {
            addTechnologyModalElement.addEventListener('hidden.bs.modal', function () {
                if (addTechnologyForm) {
                    addTechnologyForm.reset();
                }

                clearTechnologyValidation();
                setTechnologySaveState(false);
            });
        }

        if (deleteTechnologyModalElement) {
            deleteTechnologyModalElement.addEventListener('hidden.bs.modal', function () {
                pendingTechnologyDelete = null;
                setTechnologyDeleteState(false);

                if (deleteTechnologyErrorBox) {
                    deleteTechnologyErrorBox.classList.add('d-none');
                    deleteTechnologyErrorBox.textContent = '';
                }
            });
        }

        if (confirmDeleteTechnologyBtn) {
            confirmDeleteTechnologyBtn.addEventListener('click', function () {
                if (!pendingTechnologyDelete || !pendingTechnologyDelete.url || !addTechnologyForm) {
                    return;
                }

                setTechnologyDeleteState(true);

                const requestData = new FormData();
                requestData.append('_method', 'DELETE');
                getSelectedTechnologyIds().forEach(function (id) {
                    requestData.append('selected_technologies[]', id);
                });

                fetch(pendingTechnologyDelete.url, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': getCsrfToken(),
                    },
                    body: requestData,
                })
                    .then(function (response) {
                        return response.json().then(function (data) {
                            return {
                                ok: response.ok,
                                data: data,
                            };
                        });
                    })
                    .then(function (result) {
                        if (!result.ok) {
                            throw new Error(result.data.message || 'Unable to delete technology right now.');
                        }

                        refreshTechnologyOptions(result.data.technologyOptionsHtml);

                        if (deleteTechnologyModal) {
                            deleteTechnologyModal.hide();
                        }

                        showTechnologyToast(result.data.message || 'Technology deleted successfully.');
                    })
                    .catch(function (error) {
                        if (deleteTechnologyErrorBox) {
                            deleteTechnologyErrorBox.textContent = error.message || 'Something went wrong while deleting the technology.';
                            deleteTechnologyErrorBox.classList.remove('d-none');
                        }
                    })
                    .finally(function () {
                        setTechnologyDeleteState(false);
                    });
            });
        }

        if (addTechnologyForm) {
            addTechnologyForm.addEventListener('submit', function (event) {
                event.preventDefault();
                clearTechnologyValidation();
                setTechnologySaveState(true);

                const requestData = new FormData(addTechnologyForm);
                getSelectedTechnologyIds().forEach(function (id) {
                    requestData.append('selected_technologies[]', id);
                });

                fetch(addTechnologyForm.action, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': getCsrfToken(),
                    },
                    body: requestData,
                })
                    .then(function (response) {
                        return response.json().then(function (data) {
                            return {
                                ok: response.ok,
                                status: response.status,
                                data: data,
                            };
                        });
                    })
                    .then(function (result) {
                        if (!result.ok) {
                            if (result.status === 422 && result.data.errors) {
                                Object.keys(result.data.errors).forEach(function (field) {
                                    const input = addTechnologyForm.querySelector('[name="' + field + '"]');
                                    const error = addTechnologyForm.querySelector('[data-field-error="' + field + '"]');

                                    if (input) {
                                        input.classList.add('is-invalid');
                                    }

                                    if (error) {
                                        error.textContent = result.data.errors[field][0];
                                    }
                                });

                                if (technologyModalErrorBox) {
                                    technologyModalErrorBox.textContent = 'Please correct the highlighted fields and try again.';
                                    technologyModalErrorBox.classList.remove('d-none');
                                }

                                return;
                            }

                            throw new Error(result.data.message || 'Unable to save technology right now.');
                        }

                        refreshTechnologyOptions(result.data.technologyOptionsHtml);

                        if (addTechnologyModal) {
                            addTechnologyModal.hide();
                        }

                        showTechnologyToast(result.data.message || 'Technology created successfully.');
                    })
                    .catch(function (error) {
                        if (technologyModalErrorBox) {
                            technologyModalErrorBox.textContent = error.message || 'Something went wrong while creating the technology.';
                            technologyModalErrorBox.classList.remove('d-none');
                        }
                    })
                    .finally(function () {
                        setTechnologySaveState(false);
                    });
            });
        }

        if (!form || !resetButton || !resetStatusMessage) {
            return;
        }

        resetButton.addEventListener('click', function () {
            if (resetButton.disabled) {
                return;
            }

            const defaultLabel = resetButton.querySelector('.reset-btn-default');
            const loadingLabel = resetButton.querySelector('.reset-btn-loading');

            resetButton.disabled = true;
            defaultLabel.classList.add('d-none');
            loadingLabel.classList.remove('d-none');
            resetStatusMessage.classList.remove('d-none');

            window.setTimeout(function () {
                form.reset();
                syncProjectStatus();

                if (fileName) {
                    fileName.textContent = 'JPG, PNG, or WEBP up to 2MB.';
                }

                document.querySelectorAll('.technology-input').forEach(function (input) {
                    input.checked = false;
                    toggleTechnologyOptionState(input);
                });

                resetButton.disabled = false;
                loadingLabel.classList.add('d-none');
                defaultLabel.classList.remove('d-none');
                resetStatusMessage.classList.add('d-none');
            }, 900);
        });
    });
</script>
@endsection