@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">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="{{ 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>

@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>
@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="{{ route('projects.update', $project->id) }}" method="POST" enctype="multipart/form-data" id="projectEditForm">
                    @csrf
                    @method('PUT')

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

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

                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                        <a href="{{ 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">#{{ $project->id }}</span>
                </div>
                <div class="quick-note-row">
                    <span class="quick-note-label">Created</span>
                    <span class="quick-note-value">{{ $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">{{ $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">{{ $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>
@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;
    }
    .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-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);
    }
    .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;
    }
    .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');

        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'}`;
            }
        }

        if (statusControl) {
            statusControl.addEventListener('click', function () {
                if (statusInput) {
                    statusInput.value = statusInput.value === 'active' ? 'inactive' : 'active';
                    syncProjectStatus();
                }
            });
            syncProjectStatus();
        }

        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>
@endsection