<?php $__env->startSection('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="<?php echo e(route('dashboard')); ?>" class="text-decoration-none text-muted small">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="<?php echo e(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">Edit</li>
            </ol>
        </nav>
        <h2 class="fw-bold text-dark">Edit Project</h2>
        <p class="text-secondary small mb-0">Update the project summary, stack, links, or preview image while keeping the portfolio tidy and consistent.</p>
    </div>
    <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
        <a href="<?php echo e(route('projects.show', $project->id)); ?>" class="btn btn-light border rounded-3 px-4 py-2">
            <i class="bi bi-eye me-2"></i> Preview Project
        </a>
    </div>
</div>

<?php 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">Some fields still need attention.</strong>
                <span class="small">Please correct the highlighted project details before saving the changes.</span>
            </div>
        </div>
    </div>
<?php 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-pencil-square me-2 text-primary"></i> Edit Project Information
                </h6>
            </div>
            <div class="card-body p-4 pt-2">
                <form action="<?php echo e(route('projects.update', $project->id)); ?>" method="POST" enctype="multipart/form-data" id="projectEditForm">
                    <?php echo csrf_field(); ?>
                    <?php echo method_field('PUT'); ?>

                    <?php echo $__env->make('projects._form', ['project' => $project, 'technologies' => $technologies], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

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

                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                        <a href="<?php echo e(route('projects.show', $project->id)); ?>" class="btn btn-link text-decoration-none text-secondary fw-semibold px-0">
                            <i class="bi bi-x-circle me-1"></i> Cancel Edit
                        </a>
                        <button type="submit" class="btn btn-primary rounded-3 px-5 fw-bold shadow-sm py-2">
                            <i class="bi bi-check-lg me-2"></i> Update Project
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="card border-0 shadow-sm rounded-4 mb-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>Project Snapshot
                </h6>
                <div class="quick-note-row">
                    <span class="quick-note-label">Record ID</span>
                    <span class="quick-note-value">#<?php echo e($project->id); ?></span>
                </div>
                <div class="quick-note-row">
                    <span class="quick-note-label">Created</span>
                    <span class="quick-note-value"><?php echo e($project->created_at ? $project->created_at->format('M d, Y h:i A') : 'Not available'); ?></span>
                </div>
                <div class="quick-note-row">
                    <span class="quick-note-label">Last Updated</span>
                    <span class="quick-note-value"><?php echo e($project->updated_at ? $project->updated_at->diffForHumans() : 'Not updated yet'); ?></span>
                </div>
                <div class="quick-note-row mb-0">
                    <span class="quick-note-label">Linked Tech</span>
                    <span class="quick-note-value"><?php echo e($project->technologies->count()); ?></span>
                </div>
            </div>
        </div>

        <div class="alert bg-primary-subtle text-primary border-0 rounded-4 p-4 shadow-sm">
            <div class="d-flex">
                <i class="bi bi-lightbulb-fill fs-4 me-3"></i>
                <div>
                    <h6 class="fw-bold mb-1">Editing Tip</h6>
                    <p class="small mb-0 opacity-75">Try to keep the description short enough for cards, but strong enough that visitors understand the value quickly.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('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;
    }
    .technology-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 0.85rem;
    }
    .technology-option {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background: #fff;
        transition: all 0.2s ease;
        cursor: pointer;
    }
    .technology-option:hover {
        border-color: #93c5fd;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
        transform: translateY(-2px);
    }
    .technology-option.is-selected {
        border-color: #3b82f6;
        background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
        box-shadow: 0 12px 30px rgba(59, 130, 246, 0.12);
    }
    .technology-input {
        display: none;
    }
    .technology-swatch {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        flex-shrink: 0;
        box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
    }
    .technology-copy {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .technology-name {
        color: #0f172a;
        font-weight: 700;
        line-height: 1.1;
    }
    .technology-meta {
        color: #64748b;
        font-size: 0.8rem;
        margin-top: 0.15rem;
        word-break: break-word;
    }
    .technology-check {
        margin-left: auto;
        color: #3b82f6;
        opacity: 0;
        transform: scale(0.9);
        transition: all 0.2s ease;
    }
    .technology-option.is-selected .technology-check {
        opacity: 1;
        transform: scale(1);
    }
    .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;
    }
    .bg-primary-subtle {
        background-color: #eff6ff !important;
    }
    .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>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const fileInput = document.getElementById('image');
        const fileName = document.getElementById('project-image-name');

        document.querySelectorAll('[data-technology-option]').forEach(function (option) {
            const input = option.querySelector('.technology-input');

            if (!input) {
                return;
            }

            const syncState = function () {
                option.classList.toggle('is-selected', input.checked);
            };

            input.addEventListener('change', syncState);
            syncState();
        });

        if (!fileInput || !fileName) {
            return;
        }

        fileInput.addEventListener('change', function () {
            fileName.textContent = fileInput.files && fileInput.files[0]
                ? 'Selected: ' + fileInput.files[0].name
                : 'Leave this empty to keep the current image.';
        });
    });
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\portfolio\resources\views\projects\edit.blade.php ENDPATH**/ ?>