@extends('layouts.app')

@section('page_title', 'Projects')
@section('page_subtitle', 'Manage client projects, timelines, and search filters')

@push('head')
<style type="text/tailwindcss">
    @layer components {
        /* ── Bulk action bar ───────────────────────────── */
        #bulk-bar {
            @apply fixed bottom-0 left-0 right-0 z-40 flex items-center gap-3 px-6 py-4;
            background: var(--color-ink);
            transform: translateY(100%);
            transition: transform 240ms cubic-bezier(.4,0,.2,1);
            box-shadow: 0 -4px 24px rgba(16,24,38,.22);
        }
        #bulk-bar.is-visible { transform: translateY(0); }
        #bulk-bar-count {
            @apply text-sm font-semibold shrink-0;
            color: rgba(255,255,255,.85);
        }
        #bulk-bar .bulk-divider {
            @apply h-6 w-px shrink-0;
            background: rgba(255,255,255,.14);
        }
        .bulk-btn {
            @apply inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium border cursor-pointer;
            background: rgba(255,255,255,.08);
            border-color: rgba(255,255,255,.14);
            color: #fff;
            transition: background 140ms ease;
        }
        .bulk-btn:hover { background: rgba(255,255,255,.16); }
        .bulk-btn-danger {
            background: rgba(179,38,30,.25);
            border-color: rgba(179,38,30,.4);
            color: #fca5a5;
        }
        .bulk-btn-danger:hover { background: rgba(179,38,30,.4); }
        #bulk-bar-cancel {
            @apply ml-auto inline-flex items-center gap-1.5 text-sm cursor-pointer;
            color: rgba(255,255,255,.55);
            background: transparent;
            border: none;
            transition: color 120ms ease;
        }
        #bulk-bar-cancel:hover { color: #fff; }

        /* ── Checkboxes ────────────────────────────────── */
        .project-cb {
            @apply w-4 h-4 rounded cursor-pointer;
            accent-color: var(--color-brand);
        }
        tr.is-selected { background: var(--color-brand-soft); }

        /* ── Action Dropdown ───────────────────────────── */
        .dropdown-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            margin-top: 4px;
            background: var(--color-surface);
            border: 1px solid var(--color-border);
            border-radius: 8px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
            z-index: 100;
            min-width: 160px;
            overflow: hidden;
            text-align: left;
        }
        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            font-size: 0.85rem;
            color: var(--color-text);
            text-decoration: none;
            transition: background 120ms ease;
            cursor: pointer;
            border: none;
            background: none;
            width: 100%;
        }
        .dropdown-item:hover {
            background: var(--color-surface-alt) !important;
        }
        .dropdown-item-danger {
            color: var(--color-danger);
        }
        .dropdown-item-danger:hover {
            background: var(--color-danger-soft) !important;
            color: var(--color-danger) !important;
        }
    }
</style>
@endpush

@section('page_actions')
    <a class="btn btn-primary" href="{{ route('projects.create') }}">Create Project</a>
@endsection

@section('content')

    <div class="card card-pad" style="margin-bottom: 18px;">
        <form method="GET" action="{{ route('projects.index') }}" style="display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;">
            <label style="width: 130px;">
                <span>Search Projects</span>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search…">
            </label>
            <label style="width: 130px;">
                <span>Status</span>
                <select name="status" style="appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%2364748B\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'%3E%3Cpolyline points=\'6 9 12 15 18 9\'/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 28px;">
                    <option value="">All Statuses</option>
                    <option value="active" {{ request('status') === 'active' ? 'selected' : '' }}>Active</option>
                    <option value="on_hold" {{ request('status') === 'on_hold' ? 'selected' : '' }}>On Hold</option>
                    <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Completed</option>
                    <option value="archived" {{ request('status') === 'archived' ? 'selected' : '' }}>Archived</option>
                </select>
            </label>
            <div class="toolbar">
                <button class="btn btn-primary" type="submit">Filter</button>
                <a class="btn" href="{{ route('projects.index') }}">Reset</a>
            </div>
        </form>
    </div>

    <div class="section-head">
        <div>
            <h2>Project List</h2>
            <p>{{ $projects->total() }} records found</p>
        </div>
    </div>

    <form method="POST" id="bulk-action-form" action="{{ route('projects.bulk-delete') }}">
        @csrf
        <div class="card table-wrap">
            <table>
                <thead>
                <tr>
                    <th style="width:44px;">
                        <input type="checkbox" class="project-cb" id="select-all" title="Select all on this page">
                    </th>
                    <th>Name</th>
                    <th>Code</th>
                    <th>Products & Pack Size</th>
                    <th>Client</th>
                    <th>Status</th>
                    <th>Orders</th>
                    <th>Timeline</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                @forelse ($projects as $project)
                    <tr data-id="{{ $project->id }}">
                        <td>
                            <input type="checkbox" class="project-cb row-cb" name="ids[]" value="{{ $project->id }}">
                        </td>
                        <td>
                            <strong>{{ $project->name }}</strong>
                            <div class="muted" style="font-size:0.8rem; margin-top:2px;">{{ Str::limit($project->description, 60) ?: 'No description' }}</div>
                        </td>
                        <td style="font-family:'IBM Plex Mono',monospace; font-size:0.85rem;">{{ $project->code }}</td>
                        <td>
                            @if($project->product_name)
                                <div>{{ $project->product_name }}</div>
                                <div class="muted" style="font-size:0.8rem; margin-top:2px;">{{ $project->box_pack_size }} units per box</div>
                            @else
                                <div class="muted">—</div>
                            @endif
                        </td>
                        <td>
                            <div>{{ $project->client_name }}</div>
                            <div class="muted" style="font-size:0.8rem; margin-top:2px;">{{ $project->client_phone ?: 'No phone' }}</div>
                        </td>
                        <td>
                            <span class="badge badge-info">{{ str_replace('_', ' ', $project->status) }}</span>
                        </td>
                        <td>{{ $project->orders_count ?? $project->orders()->count() }}</td>
                        <td>
                            <div class="muted" style="font-size:0.8rem;">{{ optional($project->start_date)->format('d M Y') ?: 'Not started' }}</div>
                            <div class="muted" style="font-size:0.8rem; margin-top:2px;">{{ optional($project->end_date)->format('d M Y') ?: 'No end date' }}</div>
                        </td>
                        <td style="text-align:right;">
                            <div class="options-dropdown" style="position:relative; display:inline-block;">
                                <button type="button" class="btn btn-icon options-trigger" style="padding: 6px 12px; font-weight: bold; border-radius: 6px; cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); line-height: 1;" onclick="toggleOptionsDropdown(event, {{ $project->id }})">
                                    •••
                                </button>
                                <div id="options-menu-{{ $project->id }}" class="dropdown-menu">
                                    <a class="dropdown-item" href="{{ route('projects.show', $project) }}">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                                        View Details
                                    </a>
                                    <button type="button" class="dropdown-item dropdown-item-danger" onclick="deleteProject({{ $project->id }}, '{{ addslashes($project->name) }}')">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                                        Delete Project
                                    </button>
                                </div>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9">
                            <div class="empty">No projects available yet.</div>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </form>

    <div style="margin-top: 16px;">
        {{ $projects->links() }}
    </div>

    {{-- Hidden standalone delete form --}}
    <form method="POST" id="delete-single-form" style="display:none;">
        @csrf
        @method('DELETE')
    </form>

    {{-- Sliding bulk actions bar --}}
    <div id="bulk-bar">
        <span id="bulk-bar-count">0 projects selected</span>
        <div class="bulk-divider"></div>
        <button type="button" class="bulk-btn bulk-btn-danger" onclick="submitBulkDelete()">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
            Delete Selected
        </button>
        <button type="button" id="bulk-bar-cancel" onclick="clearSelection()">Cancel</button>
    </div>
@endsection

@push('scripts')
<script>
(function() {
    const selectAll = document.getElementById('select-all');
    const rowCheckboxes = document.querySelectorAll('.row-cb');
    const bulkBar = document.getElementById('bulk-bar');
    const bulkBarCount = document.getElementById('bulk-bar-count');
    const bulkForm = document.getElementById('bulk-action-form');
    const deleteForm = document.getElementById('delete-single-form');

    // ── Toggle Options Dropdown ──────────────────────────────────────
    window.toggleOptionsDropdown = function(event, id) {
        event.stopPropagation();
        document.querySelectorAll('.dropdown-menu').forEach(menu => {
            if (menu.id !== 'options-menu-' + id) {
                menu.style.display = 'none';
            }
        });
        const menu = document.getElementById('options-menu-' + id);
        if (menu.style.display === 'none' || !menu.style.display) {
            menu.style.display = 'block';
        } else {
            menu.style.display = 'none';
        }
    };

    document.addEventListener('click', function() {
        document.querySelectorAll('.dropdown-menu').forEach(menu => {
            menu.style.display = 'none';
        });
    });

    // ── Single Project Delete via custom confirm ──────────────────────
    window.deleteProject = function(id, projectName) {
        window.customConfirm({
            title: 'Delete Project',
            message: 'Delete project "' + projectName + '"? This will also affect related orders and cannot be undone.',
            isDanger: true
        }, function() {
            const url = '{{ url("/projects") }}/' + id;
            deleteForm.action = url;
            deleteForm.submit();
        });
    };

    // ── Selection Logic ──────────────────────────────────────────────
    function getChecked() {
        return Array.from(document.querySelectorAll('.row-cb:checked'));
    }

    function updateBar() {
        const checked = getChecked();
        const count = checked.length;
        
        // Highlight rows
        document.querySelectorAll('.row-cb').forEach(cb => {
            const row = cb.closest('tr');
            if (cb.checked) {
                row.classList.add('is-selected');
            } else {
                row.classList.remove('is-selected');
            }
        });

        if (count > 0) {
            bulkBarCount.textContent = count + ' project' + (count > 1 ? 's' : '') + ' selected';
            bulkBar.classList.add('is-visible');
        } else {
            bulkBar.classList.remove('is-visible');
        }
    }

    if (selectAll) {
        selectAll.addEventListener('change', function() {
            document.querySelectorAll('.row-cb').forEach(cb => cb.checked = selectAll.checked);
            updateBar();
        });
    }

    rowCheckboxes.forEach(cb => {
        cb.addEventListener('change', updateBar);
    });

    // ── Bulk Actions ─────────────────────────────────────────────────
    window.submitBulkDelete = function() {
        const checked = getChecked();
        if (checked.length === 0) return;

        window.customConfirm({
            title: 'Delete Selected Projects',
            message: 'Are you sure you want to delete the ' + checked.length + ' selected project(s)? This action cannot be undone.',
            isDanger: true
        }, function() {
            bulkForm.submit();
        });
    };

    window.clearSelection = function () {
        document.querySelectorAll('.row-cb').forEach(cb => cb.checked = false);
        if (selectAll) selectAll.checked = false;
        updateBar();
    };

    // Add bottom padding when bulk bar visible so content isn't hidden
    const observer = new MutationObserver(() => {
        document.body.style.paddingBottom = bulkBar.classList.contains('is-visible') ? '80px' : '';
    });
    observer.observe(bulkBar, { attributes: true, attributeFilter: ['class'] });
})();
</script>
@endpush