@php
    $clientTypes = [
        'government' => __('projects.government'),
        'company' => __('projects.company'),
        'ngo' => __('projects.ngo'),
        'individual' => __('projects.individual'),
    ];
    $partnerTypeLabel = function ($t) {
        return match ($t) {
            'land_owner' => __('projects.land_owner'),
            'construction' => __('projects.construction_company'),
            'investor' => __('projects.investor'),
            default => __('common.other'),
        };
    };
    $typeLabel = fn ($t) => $t === 'others' ? __('projects.others') : __('projects.own');
@endphp

<div class="um" x-data x-on:scroll-to-top.window="window.scrollTo({ top: 0, behavior: 'smooth' })">
    <style>
        /* Exact tokens from frontend/src/components/Project.js theme + layout styles */
        .um {
            color: #0f172a;
            box-sizing: border-box;
        }
        .um *, .um *::before, .um *::after { box-sizing: border-box; }
        .um-card {
            background: #ffffff;
            border-radius: 24px;          /* borderRadius.xl */
            padding: 32px;               /* spacing.xl */
            box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* shadows.md */
            border: 1px solid #e2e8f0;
        }
        .um-title {
            margin: 0 0 20px 0;
            font-size: 24px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .um-section {
            background: #fafbfc;
            padding: 32px;               /* spacing.xl */
            border-radius: 16px;          /* borderRadius.lg */
            border: 1px solid #e2e8f0;
            margin-bottom: 32px;          /* spacing.xl */
        }
        .um-section-title {
            font-size: 18px;
            font-weight: 700;
            color: #6366f1;
            margin: 0 0 16px 0;           /* spacing.md */
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .um-section-title.mt {
            margin-top: 24px;
        }
        /* Project / client / budget grids — gap: '28px 36px' */
        .um-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            row-gap: 28px;
            column-gap: 36px;
        }
        .um-grid > * { min-width: 0; }
        /* Partner rows — gap: '16px 24px', minmax(200px, 1fr) */
        .um-grid-sm {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            row-gap: 16px;
            column-gap: 24px;
            margin-bottom: 12px;
            align-items: end;
        }
        .um-grid-sm > * { min-width: 0; }
        .um-label {
            font-size: 13px;
            font-weight: 600;
            color: #475569;
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 0 0 10px 0;
            line-height: 1.2;
            min-height: 16px;
        }
        /* Match react-icons size={14} so columns line up horizontally */
        .um-label i {
            width: 14px;
            height: 14px;
            font-size: 14px;
            line-height: 14px;
            text-align: center;
            flex-shrink: 0;
        }
        .um-input, .um-select, .um-textarea {
            width: 100%;
            max-width: 100%;
            padding: 12px 16px;
            font-size: 14px;
            color: #0f172a;
            border: 1.5px solid #e2e8f0;
            border-radius: 12px;          /* borderRadius.md */
            outline: none;
            font-weight: 500;
            background: #fff;
            margin: 0;
            font-family: inherit;
            line-height: 1.25;
            appearance: none;
            -webkit-appearance: none;
        }
        .um-select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M1.4 0.3L6 4.9 10.6.3 12 1.7 6 7.7 0 1.7z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            padding-inline-end: 40px;
        }
        html[dir="rtl"] .um-select {
            background-position: left 16px center;
        }
        .um-textarea { resize: vertical; min-height: 60px; }
        .um-btn-primary {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: #fff;
            padding: 12px 28px;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        }
        .um-btn-secondary {
            background: #f1f5f9;
            color: #475569;
            padding: 12px 28px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .um-btn-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .um-btn-row.actions {
            margin-top: 32px;            /* spacing.xl */
            gap: 16px;                   /* spacing.md */
            justify-content: flex-start;
            border-top: 1px solid #e2e8f0;
            padding-top: 24px;           /* spacing.lg */
        }
        .um-desc {
            margin-top: 24px;            /* spacing.lg */
        }
        .um-info {
            background: #e0e7ff;
            padding: 12px 16px;
            border-radius: 12px;
            color: #6366f1;
            font-size: 14px;
            margin-top: 16px;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .um-toast {
            position: fixed;
            top: 24px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            padding: 12px 24px;
            border-radius: 12px;
            z-index: 9999;
            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
        }
        .um-toast.success { background: #10b981; }
        .um-toast.error { background: #ef4444; }
        .um-tabs {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 16px;        /* spacing.md */
        }
        .um-tab {
            padding: 10px 20px;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: transparent;
            color: #475569;
            font-weight: 400;
        }
        .um-tab.active {
            background: #6366f1;
            color: #fff;
            font-weight: 600;
        }
        .um-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
            margin-bottom: 12px;
            margin-top: 0;
            padding: 8px 0;
        }
        .um-controls .search-wrap {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 1;
            min-width: 200px;
        }
        .um-controls .per-page {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .um-table-wrap {
            background: #fff;
            border-radius: 24px;          /* borderRadius.xl */
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border: 1px solid #e2e8f0;
            overflow: hidden;
            margin-top: 32px;            /* spacing.xl — was 16px (mismatch) */
        }
        .um-table { width: 100%; border-collapse: collapse; min-width: 600px; }
        .um-table th {
            padding: 12px 16px;
            background: #f8fafc;
            border-bottom: 2px solid #e2e8f0;
            font-weight: 600;
            color: #475569;
            text-align: start;
            font-size: 12px;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .um-table td {
            padding: 12px 16px;
            border-bottom: 1px solid #f1f5f9;
            color: #0f172a;
            vertical-align: middle;
            font-size: 14px;
        }
        .um-table tbody tr:hover { background: #f8fafc; }
        .um-icon-btn {
            border: none;
            border-radius: 6px;
            padding: 6px 10px;
            cursor: pointer;
        }
        .um-icon-btn.edit { background: #e0e7ff; color: #4338ca; }
        .um-icon-btn.del { background: #fee2e2; color: #dc2626; }
        .um-actions {
            display: flex;
            gap: 8px;
            justify-content: center;
        }
        .um-radio-row {
            display: flex;
            gap: 20px;
            margin-bottom: 16px;
        }
        .um-radio {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }
        .um-tables { margin-top: 32px; } /* spacing.xl */
    </style>

    @if ($flashMessage)
        <div class="um-toast {{ $flashType === 'success' ? 'success' : 'error' }}"
             x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)">
            <i class="fa {{ $flashType === 'success' ? 'fa-check-circle' : 'fa-times-circle' }}"></i>
            {{ $flashMessage }}
        </div>
    @endif

    <div class="um-card">
        <h2 class="um-title">
            <i class="fa fa-plus" style="color:#6366f1"></i>
            {{ $isProjectUser ? __('projects.my_project') : __('projects.unified_management') }}
        </h2>

        @unless ($isProjectUser)
        <form wire:submit.prevent="save">
            {{-- PROJECT --}}
            <div class="um-section">
                <h3 class="um-section-title"><i class="fa fa-project-diagram"></i> {{ __('common.project') }}</h3>
                <div class="um-grid">
                    <div>
                        <label class="um-label"><i class="fa fa-file"></i> {{ __('projects.project_code') }}</label>
                        <input type="text" class="um-input" wire:model="project_code">
                    </div>
                    <div>
                        <label class="um-label"><i class="fa fa-project-diagram"></i> {{ __('projects.project_name') }}</label>
                        <input type="text" class="um-input" wire:model="project_name">
                    </div>
                    <div>
                        <label class="um-label"><i class="fa fa-city"></i> {{ __('common.type') }}</label>
                        <select class="um-select" wire:model.live="project_type">
                            <option value="own">{{ __('projects.own') }}</option>
                            <option value="others">{{ __('projects.others') }}</option>
                        </select>
                    </div>
                    <div>
                        <label class="um-label"><i class="fa fa-money-bill-wave"></i> {{ __('projects.currency') }}</label>
                        <select class="um-select" wire:model="currency_id" required>
                            <option value="">{{ __('projects.select_currency') }}</option>
                            @foreach ($currencies as $c)
                                <option value="{{ $c->id }}">
                                    {{ $c->name }} ({{ $c->currency_code ?: $c->symbol }}){{ $c->is_base ? ' — base' : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @if ($project_type === 'others')
                        <div>
                            <label class="um-label"><i class="fa fa-money-bill-wave"></i> {{ __('projects.cost_price') }}</label>
                            <input type="number" step="0.01" min="0" class="um-input" wire:model="cost_price">
                        </div>
                    @endif
                    <div>
                        <label class="um-label"><i class="fa fa-calendar-alt"></i> {{ __('common.start_date') }}</label>
                        <input type="date" class="um-input" wire:model="start_date">
                    </div>
                    <div>
                        <label class="um-label"><i class="fa fa-calendar-alt"></i> {{ __('common.end_date') }}</label>
                        <input type="date" class="um-input" wire:model="end_date">
                    </div>
                    <div>
                        <label class="um-label"><i class="fa fa-map-marker-alt"></i> {{ __('projects.project_address') }}</label>
                        <input type="text" class="um-input" wire:model="address">
                    </div>
                    <div>
                        <label class="um-label"><i class="fa fa-user"></i> {{ __('projects.contact_person') }}</label>
                        <input type="text" class="um-input" wire:model="contact_person">
                    </div>
                    <div>
                        <label class="um-label"><i class="fa fa-phone"></i> {{ __('projects.contact_number') }}</label>
                        <input type="text" class="um-input" wire:model="contact_phone">
                    </div>
                    <div>
                        <label class="um-label"><i class="fa fa-file"></i> {{ __('projects.pcp_number') }}</label>
                        <input type="text" class="um-input" wire:model="pcp_number" placeholder="{{ __('projects.auto_from_code_if_empty') }}">
                    </div>
                    <div>
                        <label class="um-label"><i class="fa fa-money-bill-wave"></i> {{ __('projects.cash_paid') }}</label>
                        <input type="number" step="0.01" class="um-input" wire:model="cash_paid">
                    </div>
                    <div>
                        <label class="um-label"><i class="fa fa-wallet"></i> {{ __('projects.receive_account') }}</label>
                        <select class="um-select" wire:model="receipt_account_id">
                            <option value="">{{ __('projects.select_account') }}</option>
                            @foreach ($accounts as $a)
                                <option value="{{ $a->id }}">{{ $a->account_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="um-label"><i class="fa fa-money-bill-wave"></i> {{ __('common.pending') }}</label>
                        <input type="number" step="0.01" class="um-input" wire:model="pending_amount" placeholder="{{ __('projects.auto_if_empty') }}">
                    </div>
                    <div>
                        <label class="um-label">{{ __('projects.project_image') }}</label>
                        <input type="file" class="um-input" wire:model="image" accept="image/*">
                        @if ($image)
                            <img src="{{ $image->temporaryUrl() }}" alt="" style="margin-top:8px;max-width:120px;border-radius:8px">
                        @elseif ($existing_image)
                            @php
                                $img = $existing_image;
                                if (! str_starts_with($img, 'http')) {
                                    $img = str_starts_with($img, '/storage') || str_starts_with($img, 'storage/')
                                        ? asset(ltrim($img, '/'))
                                        : asset('storage/'.ltrim($img, '/'));
                                }
                            @endphp
                            <img src="{{ $img }}" alt="" style="margin-top:8px;max-width:120px;border-radius:8px">
                        @endif
                    </div>
                </div>
                <div class="um-desc">
                    <label class="um-label"><i class="fa fa-sticky-note"></i> {{ __('common.description') }}</label>
                    <textarea class="um-textarea" rows="2" wire:model="description"></textarea>
                </div>

                <h4 class="um-section-title mt">{{ __('projects.estimated_budget') }}</h4>
                <div class="um-grid">
                    <div>
                        <label class="um-label">{{ __('projects.estimated_budget') }}</label>
                        <input type="number" step="0.01" class="um-input" wire:model.live="estimated_budget">
                    </div>
                    <div>
                        <label class="um-label">{{ __('projects.building_area_sqm') }}</label>
                        <input type="number" step="0.01" class="um-input" wire:model.live="building_area">
                    </div>
                    <div>
                        <label class="um-label">{{ __('projects.price_per_sqm') }}</label>
                        <input type="number" step="0.01" class="um-input" wire:model.live="price_per_sqm">
                    </div>
                    <div>
                        <label class="um-label">{{ __('projects.number_of_floors') }}</label>
                        <input type="number" step="1" min="0" class="um-input" wire:model.live="number_of_floors">
                    </div>
                    <div>
                        <label class="um-label">{{ __('projects.other_expenses') }}</label>
                        <input type="number" step="0.01" class="um-input" wire:model.live="other_expenses">
                    </div>
                </div>
                <div class="um-info">
                    <i class="fa fa-money-bill-wave"></i>
                    Helper subtotal: {{ number_format($helperBudget, 2) }} ·
                    <b>Estimated budget: {{ number_format($estimatedDisplay, 2) }}</b>
                </div>
            </div>

            {{-- PARTNERS --}}
            <div class="um-section">
                <h3 class="um-section-title"><i class="fa fa-handshake"></i> {{ __('projects.link_partner_to_project') }}</h3>
                @foreach ($partnerRows as $i => $row)
                    <div class="um-grid-sm">
                        <div>
                            <label class="um-label"><i class="fa fa-user"></i> {{ __('projects.select_partner') }}</label>
                            <select class="um-select" wire:model="partnerRows.{{ $i }}.partner_id">
                                <option value="">{{ __('projects.select_partner') }}</option>
                                @foreach ($partnerOptions as $p)
                                    <option value="{{ $p->id }}">{{ $p->full_name }}{{ $p->partner_code ? ' ('.$p->partner_code.')' : '' }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="um-label"><i class="fa fa-money-bill-wave"></i> {{ __('projects.profit') }}</label>
                            <input type="number" step="0.01" min="0" max="100" class="um-input" wire:model="partnerRows.{{ $i }}.profit_percent">
                        </div>
                        <div>
                            <label class="um-label"><i class="fa fa-money-bill-wave"></i> {{ __('projects.loss') }}</label>
                            <input type="number" step="0.01" min="0" max="100" class="um-input" wire:model="partnerRows.{{ $i }}.loss_percent">
                        </div>
                        <div>
                            <div class="um-btn-row">
                                <button type="button" class="um-btn-secondary" style="padding:10px 14px" wire:click="removePartnerRow({{ $i }})">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="um-btn-row">
                    <button type="button" class="um-btn-secondary" wire:click="addPartnerRow"><i class="fa fa-plus"></i> {{ __('projects.add_partner') }}</button>
                    <button type="button" class="um-btn-secondary" wire:click="$toggle('showNewPartner')"><i class="fa fa-plus"></i> {{ __('projects.new_partner') }}</button>
                </div>
                @if ($showNewPartner)
                    <div class="um-grid-sm" style="margin-top:16px;row-gap:16px;column-gap:16px;align-items:end">
                        <div>
                            <label class="um-label">{{ __('projects.full_name') }}</label>
                            <input class="um-input" wire:model="new_partner_name">
                        </div>
                        <div>
                            <label class="um-label">{{ __('common.phone') }}</label>
                            <input class="um-input" wire:model="new_partner_phone">
                        </div>
                        <div style="display:flex;align-items:end">
                            <button type="button" class="um-btn-primary" wire:click="createInlinePartner">{{ __('common.save') }}</button>
                        </div>
                    </div>
                @endif
            </div>

            {{-- CLIENT + CONTRACT --}}
            <div class="um-section">
                <h3 class="um-section-title"><i class="fa fa-users"></i> {{ __('projects.client') }}</h3>
                <div class="um-radio-row">
                    <label class="um-radio">
                        <input type="radio" name="hasClient" {{ $hasClient ? 'checked' : '' }} wire:click="$set('hasClient', true)"> {{ __('projects.has_client') }}
                    </label>
                    <label class="um-radio">
                        <input type="radio" name="hasClient" {{ !$hasClient ? 'checked' : '' }} wire:click="$set('hasClient', false)"> {{ __('projects.no_client') }}
                    </label>
                </div>
                @if ($hasClient)
                    <div class="um-grid">
                        <div>
                            <label class="um-label"><i class="fa fa-building"></i> {{ __('projects.client_type') }}</label>
                            <select class="um-select" wire:model="client_type">
                                @foreach ($clientTypes as $val => $label)
                                    <option value="{{ $val }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="um-label"><i class="fa fa-user"></i> {{ __('projects.client_name') }}</label>
                            <input type="text" class="um-input" wire:model="client_name" placeholder="{{ __('projects.enter_client_name') }}">
                        </div>
                        <div>
                            <label class="um-label"><i class="fa fa-phone"></i> {{ __('common.phone') }}</label>
                            <input type="text" class="um-input" wire:model="client_phone" placeholder="{{ __('projects.0700000000') }}">
                        </div>
                        <div>
                            <label class="um-label"><i class="fa fa-map-marker-alt"></i> {{ __('common.address') }}</label>
                            <input type="text" class="um-input" wire:model="client_address" placeholder="{{ __('projects.kabul_afghanistan') }}">
                        </div>
                        <div>
                            <label class="um-label"><i class="fa fa-envelope"></i> {{ __('common.email') }}</label>
                            <input type="email" class="um-input" wire:model="client_email" placeholder="{{ __('projects.example_email_com') }}">
                        </div>
                        <div>
                            <label class="um-label"><i class="fa fa-user"></i> {{ __('projects.referrer') }}</label>
                            <input type="text" class="um-input" wire:model="referrer_name">
                        </div>
                        <div>
                            <label class="um-label"><i class="fa fa-phone"></i> {{ __('projects.referrer_phone') }}</label>
                            <input type="text" class="um-input" wire:model="referrer_phone">
                        </div>
                    </div>

                    <h3 class="um-section-title mt"><i class="fa fa-file-invoice"></i> {{ __('common.contract') }}</h3>
                    <div class="um-grid">
                        <div>
                            <label class="um-label"><i class="fa fa-money-bill-wave"></i> {{ __('projects.contract_amount') }}</label>
                            <input type="number" step="0.01" min="0" class="um-input" wire:model.live="contract_amount" placeholder="{{ __('projects.0_00') }}">
                        </div>
                        <div>
                            <label class="um-label"><i class="fa fa-money-bill-wave"></i> {{ __('projects.advance_amount') }}</label>
                            <input type="number" step="0.01" min="0" class="um-input" wire:model.live="advance_amount" placeholder="{{ __('projects.0_00') }}">
                        </div>
                        <div>
                            <label class="um-label"><i class="fa fa-money-bill-wave"></i> {{ __('projects.remaining_amount') }}</label>
                            <input type="text" class="um-input" readonly value="{{ number_format($remainingAmount, 2) }}" style="background:#f1f5f9">
                        </div>
                        <div>
                            <label class="um-label"><i class="fa fa-money-bill-wave"></i> {{ __('projects.advance_account') }}</label>
                            <select class="um-select" wire:model="advance_account_id">
                                <option value="">{{ __('projects.select_account') }}</option>
                                @foreach ($accounts as $a)
                                    <option value="{{ $a->id }}">{{ $a->account_name }} ({{ $a->account_code }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="um-label"><i class="fa fa-calendar-alt"></i> {{ __('projects.contract_date') }}</label>
                            <input type="date" class="um-input" wire:model="contract_date">
                        </div>
                    </div>
                    <div class="um-desc">
                        <label class="um-label"><i class="fa fa-sticky-note"></i> {{ __('common.notes') }}</label>
                        <textarea class="um-textarea" rows="2" wire:model="contract_notes" placeholder="{{ __('projects.additional_information') }}"></textarea>
                    </div>
                @else
                    <div style="color:#94a3b8;font-style:italic;padding:8px 0">{{ __('projects.no_client') }}</div>
                @endif
            </div>

            {{-- PROJECT LOGIN --}}
            <div class="um-section">
                <h3 class="um-section-title"><i class="fa fa-user"></i> {{ __('projects.project_login') }}</h3>
                <div class="um-grid">
                    <div>
                        <label class="um-label">{{ __('common.username') }}</label>
                        <input type="text" class="um-input" wire:model="username" autocomplete="off">
                    </div>
                    <div>
                        <label class="um-label">{{ __('common.password') }}</label>
                        <input type="password" class="um-input" wire:model="password" autocomplete="new-password">
                    </div>
                    <div>
                        <label class="um-label">{{ __('projects.confirm_password') }}</label>
                        <input type="password" class="um-input" wire:model="confirm_password" autocomplete="new-password">
                    </div>
                </div>
            </div>

            <div class="um-btn-row actions">
                <button type="submit" class="um-btn-primary" wire:loading.attr="disabled">
                    <i class="fa fa-save"></i>
                    <span wire:loading.remove wire:target="save">{{ $editingId ? __('common.edit') : __('common.save') }}</span>
                    <span wire:loading wire:target="save">{{ __('common.saving') }}</span>
                </button>
                <button type="button" class="um-btn-secondary" wire:click="resetForm">
                    <i class="fa fa-times"></i> {{ __('common.cancel') }}
                </button>
            </div>
        </form>
        @endunless

        {{-- TABLES --}}
        <div class="um-tables">
            <div class="um-tabs">
                @foreach (($isProjectUser
                    ? [['projects', 'Projects', 'fa-project-diagram']]
                    : [
                        ['projects', 'Projects', 'fa-project-diagram'],
                        ['partners', 'Partners (master list)', 'fa-handshake'],
                        ['clients', 'Clients', 'fa-users'],
                        ['contracts', 'Contracts', 'fa-file-invoice'],
                        ['projectpartners', 'Project Partners (links)', 'fa-list'],
                    ]) as [$key, $label, $icon])
                    <button type="button" class="um-tab {{ $activeTab === $key ? 'active' : '' }}" wire:click="setTab('{{ $key }}')">
                        <i class="fa {{ $icon }}"></i> {{ $label }}
                    </button>
                @endforeach
            </div>

            <div class="um-controls">
                <div class="search-wrap">
                    <i class="fa fa-search" style="color:#94a3b8"></i>
                    <input type="text" class="um-input" style="padding:6px 12px;font-size:13px;min-width:150px" placeholder="{{ __('common.search_placeholder') }}" wire:model.live.debounce.300ms="search">
                </div>
                <div class="per-page">
                    <span style="font-size:13px;color:#475569">{{ __('projects.items_per_page') }}</span>
                    <select class="um-select" style="padding:4px 8px;font-size:13px;width:78px;padding-inline-end:28px" wire:model.live="itemsPerPage">
                        <option value="3">3</option>
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="100">100</option>
                        <option value="all">{{ __('common.all') }}</option>
                    </select>
                </div>
                <div style="font-size:13px;color:#475569;margin-left:auto">
                    @if ($total > 0) Page {{ $page }} of {{ $totalPages }} @endif
                </div>
                <div class="um-btn-row" style="gap:4px">
                    <button type="button" class="um-btn-secondary" style="padding:4px 10px;font-size:12px" wire:click="prevPage" @disabled($page <= 1)>{{ __('projects.previous') }}</button>
                    <button type="button" class="um-btn-secondary" style="padding:4px 10px;font-size:12px" wire:click="nextPage" @disabled($page >= $totalPages)>{{ __('projects.next') }}</button>
                </div>
                <div class="um-btn-row" style="gap:4px">
                    <button type="button" class="um-btn-secondary" style="padding:4px 10px;font-size:12px;background:#fee2e2;color:#dc2626" onclick="umExportPdf()">
                        <i class="fa fa-file-pdf"></i> {{ __('common.pdf') }}
                    </button>
                    <button type="button" class="um-btn-secondary" style="padding:4px 10px;font-size:12px;background:#d1fae5;color:#065f46" onclick="umExportExcel()">
                        <i class="fa fa-file-excel"></i> {{ __('common.excel') }}
                    </button>
                </div>
            </div>

            <div class="um-table-wrap">
                <div style="overflow-x:auto">
                    <table class="um-table" id="um-export-table">
                        <thead>
                            @if ($activeTab === 'projects')
                                <tr>
                                    <th>{{ __('common.id') }}</th><th>{{ __('common.code') }}</th><th>{{ __('common.name') }}</th><th>{{ __('common.type') }}</th><th>{{ __('common.currency') }}</th>
                                    <th>{{ __('projects.cost_price') }}</th><th>{{ __('common.start') }}</th><th>{{ __('common.end') }}</th><th>{{ __('projects.partners') }}</th>
                                    <th>{{ __('projects.est_budget') }}</th><th style="text-align:center">{{ __('common.actions') }}</th>
                                </tr>
                            @elseif ($activeTab === 'partners')
                                <tr>
                                    <th>{{ __('common.id') }}</th><th>{{ __('common.type') }}</th><th>{{ __('projects.full_name') }}</th><th>{{ __('projects.father') }}</th><th>{{ __('projects.grandfather') }}</th>
                                    <th>{{ __('projects.national_id') }}</th><th>{{ __('common.phone') }}</th><th>{{ __('common.email') }}</th><th>{{ __('common.address') }}</th>
                                    <th>{{ __('common.code') }}</th><th>{{ __('common.contract') }}</th><th style="text-align:center">{{ __('common.actions') }}</th>
                                </tr>
                            @elseif ($activeTab === 'clients')
                                <tr>
                                    <th>{{ __('common.id') }}</th><th>{{ __('common.type') }}</th><th>{{ __('common.name') }}</th><th>{{ __('common.phone') }}</th><th>{{ __('common.address') }}</th><th>{{ __('common.email') }}</th>
                                    <th style="text-align:center">{{ __('common.actions') }}</th>
                                </tr>
                            @elseif ($activeTab === 'contracts')
                                <tr>
                                    <th>{{ __('common.id') }}</th><th>{{ __('common.project') }}</th><th>{{ __('projects.client') }}</th><th>{{ __('common.amount') }}</th><th>{{ __('common.advance') }}</th>
                                    <th>{{ __('projects.remaining_amount') }}</th><th>{{ __('projects.advance_account') }}</th><th>{{ __('common.date') }}</th>
                                    <th style="text-align:center">{{ __('common.actions') }}</th>
                                </tr>
                            @else
                                <tr>
                                    <th>{{ __('common.project') }}</th><th>{{ __('common.partner') }}</th><th>{{ __('projects.profit') }}</th><th>{{ __('projects.loss') }}</th><th>{{ __('projects.created') }}</th>
                                </tr>
                            @endif
                        </thead>
                        <tbody>
                            @forelse ($rows as $row)
                                @if ($activeTab === 'projects')
                                    <tr>
                                        <td>{{ $row->id }}</td>
                                        <td><span style="font-weight:500">{{ $row->project_code }}</span></td>
                                        <td>{{ $row->project_name }}</td>
                                        <td>{{ $typeLabel($row->project_type) }}</td>
                                        <td>{{ $row->currency_code }}</td>
                                        <td>{{ $row->cost_price != null ? number_format((float)$row->cost_price) : '-' }}</td>
                                        <td>{{ $row->start_date ? \Carbon\Carbon::parse($row->start_date)->format('n/j/Y') : '-' }}</td>
                                        <td>{{ $row->end_date ? \Carbon\Carbon::parse($row->end_date)->format('n/j/Y') : '-' }}</td>
                                        <td>{{ $row->partner_names }}</td>
                                        <td>{{ $row->estimated_budget != null ? number_format((float)$row->estimated_budget, 2) : '-' }}</td>
                                        <td style="text-align:center">
                                            @unless ($isProjectUser)
                                                <div class="um-actions">
                                                    <button type="button" class="um-icon-btn edit" wire:click="editProject({{ $row->id }})"><i class="fa fa-edit"></i></button>
                                                    <button type="button" class="um-icon-btn del" wire:click="deleteProject({{ $row->id }})" wire:confirm="{{ __('projects.confirm_delete') }}"><i class="fa fa-trash"></i></button>
                                                </div>
                                            @endunless
                                        </td>
                                    </tr>
                                @elseif ($activeTab === 'partners')
                                    <tr>
                                        <td>{{ $row->id }}</td>
                                        <td>{{ $partnerTypeLabel($row->partner_type) }}</td>
                                        <td><span style="font-weight:500">{{ $row->full_name }}</span></td>
                                        <td>{{ $row->father_name ?: '-' }}</td>
                                        <td>{{ $row->grandfather_name ?: '-' }}</td>
                                        <td>{{ $row->national_id ?: '-' }}</td>
                                        <td>{{ $row->phone }}</td>
                                        <td>{{ $row->email ?: '-' }}</td>
                                        <td>{{ $row->address ?: '-' }}</td>
                                        <td>{{ $row->partner_code ?: '-' }}</td>
                                        <td>
                                            @if ($row->contract_file)
                                                <a href="{{ asset(ltrim($row->contract_file, '/')) }}" target="_blank" style="color:#6366f1">{{ __('common.view') }}</a>
                                            @else - @endif
                                        </td>
                                        <td style="text-align:center">
                                            <button type="button" class="um-icon-btn del" wire:click="deletePartner({{ $row->id }})" wire:confirm="{{ __('projects.confirm_delete') }}"><i class="fa fa-trash"></i></button>
                                        </td>
                                    </tr>
                                @elseif ($activeTab === 'clients')
                                    <tr>
                                        <td>{{ $row->id }}</td>
                                        <td>{{ $clientTypes[$row->client_type] ?? $row->client_type }}</td>
                                        <td><span style="font-weight:500">{{ $row->client_name }}</span></td>
                                        <td>{{ $row->phone ?: '-' }}</td>
                                        <td>{{ $row->address ?: '-' }}</td>
                                        <td>{{ $row->email ?: '-' }}</td>
                                        <td style="text-align:center">
                                            <button type="button" class="um-icon-btn del" wire:click="deleteClient({{ $row->id }})" wire:confirm="{{ __('projects.confirm_delete') }}"><i class="fa fa-trash"></i></button>
                                        </td>
                                    </tr>
                                @elseif ($activeTab === 'contracts')
                                    <tr>
                                        <td>{{ $row->id }}</td>
                                        <td>{{ $row->project_name ?: '-' }}</td>
                                        <td>{{ $row->client_name ?: '-' }}</td>
                                        <td>{{ $row->contract_amount ? number_format((float)$row->contract_amount) : '-' }}</td>
                                        <td>{{ $row->advance_amount ? number_format((float)$row->advance_amount) : '-' }}</td>
                                        <td>{{ number_format((float)($row->contract_amount ?: 0) - (float)($row->advance_amount ?: 0)) }}</td>
                                        <td>{{ $row->advance_account_name ?: '-' }}</td>
                                        <td>{{ $row->contract_date ? \Carbon\Carbon::parse($row->contract_date)->format('n/j/Y') : '-' }}</td>
                                        <td style="text-align:center">
                                            <button type="button" class="um-icon-btn del" wire:click="deleteContract({{ $row->id }})" wire:confirm="{{ __('projects.confirm_delete') }}"><i class="fa fa-trash"></i></button>
                                        </td>
                                    </tr>
                                @else
                                    <tr>
                                        <td>{{ $row->project_name }}</td>
                                        <td>{{ $row->partner_name }}</td>
                                        <td>{{ $row->profit_percent }}%</td>
                                        <td>{{ $row->loss_percent }}%</td>
                                        <td>{{ $row->created_at ? \Carbon\Carbon::parse($row->created_at)->format('n/j/Y') : '-' }}</td>
                                    </tr>
                                @endif
                            @empty
                                <tr>
                                    <td colspan="20" style="padding:40px;text-align:center;color:#94a3b8">{{ __('common.no_records') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>
<script>
function umTableMatrix() {
    const table = document.getElementById('um-export-table');
    if (!table) return { headers: [], rows: [] };
    const headers = [...table.querySelectorAll('thead th')].map(th => th.innerText.trim()).filter(h => h !== 'Actions');
    const rows = [...table.querySelectorAll('tbody tr')].map(tr => {
        const cells = [...tr.querySelectorAll('td')].map(td => td.innerText.trim());
        if (cells.length === 1 && cells[0].includes('No items')) return null;
        return cells.slice(0, headers.length);
    }).filter(Boolean);
    return { headers, rows };
}
function umExportExcel() {
    const { headers, rows } = umTableMatrix();
    if (!rows.length) { alert('No data to export'); return; }
    const data = rows.map(r => Object.fromEntries(headers.map((h, i) => [h, r[i] ?? ''])));
    const ws = XLSX.utils.json_to_sheet(data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, 'projects_export.xlsx');
}
function umExportPdf() {
    const { headers, rows } = umTableMatrix();
    if (!rows.length) { alert('No data to export'); return; }
    const { jsPDF } = window.jspdf;
    const doc = new jsPDF();
    doc.text('PROJECTS LIST', 14, 15);
    doc.autoTable({ head: [headers], body: rows, startY: 20, styles: { fontSize: 8, cellPadding: 2 }, headStyles: { fillColor: [99, 102, 241] } });
    doc.save('projects_export.pdf');
}
</script>