@extends('layouts.partner')

@section('content')

@php
    $statusRaw = trim((string) ($reseller->status ?? 'Pending Activation'));
    $statusLower = strtolower($statusRaw);
    $companyInitial = strtoupper(substr((string) ($reseller->company_name ?? 'R'), 0, 1));
    $markupText = ($reseller->default_markup_percent !== null && $reseller->default_markup_percent !== '')
        ? $reseller->default_markup_percent . '%'
        : '—';
@endphp

<div style="display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:20px; align-items:start;">

    <div>
        <div style="background:#fff; border:1px solid #e6ebf2; border-radius:16px; padding:24px;">

            <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; gap:16px;">
                <div>
                    <h2 style="margin:0; font-size:26px; font-weight:800; color:#101828;">
                        {{ $reseller->company_name }}
                    </h2>
                    <p style="margin:6px 0 0; color:#667085;">
                        Reseller profile overview and commercial setup
                    </p>
                </div>

                <div style="display:flex; gap:10px; flex-wrap:wrap;">
                    <a href="{{ route('resellers.index') }}"
                       style="background:#fff; border:1px solid #d0d5dd; color:#344054; padding:10px 14px; border-radius:8px; text-decoration:none; font-weight:600;">
                        Back
                    </a>

                    <button type="button"
                            style="background:#175cd3; color:#fff; border:none; padding:10px 14px; border-radius:8px; font-weight:600;">
                        Edit
                    </button>
                </div>
            </div>

            <div style="background:linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%); border:1px solid #dbe7ff; border-radius:18px; padding:20px; margin-bottom:20px;">
                <div style="display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:18px;">
                    <div style="display:flex; gap:16px; align-items:flex-start;">
                        <div style="width:60px; height:60px; border-radius:18px; background:linear-gradient(135deg, #2563eb, #60a5fa); color:#fff; font-size:22px; font-weight:800; display:flex; align-items:center; justify-content:center;">
                            {{ $companyInitial }}
                        </div>

                        <div>
                            <h3 style="margin:0; font-size:22px; font-weight:800; color:#101828;">
                                {{ $reseller->company_name }}
                            </h3>

                            <p style="margin:6px 0 0; font-size:13px; color:#667085; line-height:1.5;">
                                {{ $reseller->company_name }} reseller profile in the Artify360 Partner Management Portal.
                            </p>

                            <div style="display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;">
                                <span style="background:{{ $statusLower === 'active' ? '#ecfdf3' : '#fffaeb' }}; color:{{ $statusLower === 'active' ? '#067647' : '#b54708' }}; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700;">
                                    {{ ucfirst($statusRaw) }}
                                </span>

                                <span style="background:#eef2f7; color:#475467; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700;">
                                    Agreement Pending
                                </span>

                                <span style="background:#eef2f7; color:#475467; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700;">
                                    Territory: {{ $reseller->country ?: 'Not Set' }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px;">
                    <div style="background:rgba(255,255,255,.8); border:1px solid #e5edf9; border-radius:14px; padding:14px;">
                        <span style="display:block; font-size:12px; color:#667085; font-weight:600; margin-bottom:8px;">Total Leads</span>
                        <strong style="display:block; font-size:20px; font-weight:800; color:#101828;">0</strong>
                    </div>

                    <div style="background:rgba(255,255,255,.8); border:1px solid #e5edf9; border-radius:14px; padding:14px;">
                        <span style="display:block; font-size:12px; color:#667085; font-weight:600; margin-bottom:8px;">Proposals Generated</span>
                        <strong style="display:block; font-size:20px; font-weight:800; color:#101828;">0</strong>
                    </div>

                    <div style="background:rgba(255,255,255,.8); border:1px solid #e5edf9; border-radius:14px; padding:14px;">
                        <span style="display:block; font-size:12px; color:#667085; font-weight:600; margin-bottom:8px;">Closed Won</span>
                        <strong style="display:block; font-size:20px; font-weight:800; color:#101828;">0</strong>
                    </div>

                    <div style="background:rgba(255,255,255,.8); border:1px solid #e5edf9; border-radius:14px; padding:14px;">
                        <span style="display:block; font-size:12px; color:#667085; font-weight:600; margin-bottom:8px;">Current Markup</span>
                        <strong style="display:block; font-size:20px; font-weight:800; color:#101828;">{{ $markupText }}</strong>
                    </div>
                </div>
            </div>

            <div style="background:#fff; border:1px solid #e6ebf2; border-radius:14px; padding:20px;">
                <h3 style="margin:0 0 6px; font-size:18px; font-weight:700; color:#101828;">Profile Information</h3>
                <p style="margin:0 0 18px; font-size:13px; color:#667085;">Registered company and primary contact details</p>

                <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
                    <div>
                        <strong>Company</strong><br>
                        {{ $reseller->company_name ?: '—' }}
                    </div>

                    <div>
                        <strong>Code</strong><br>
                        {{ $reseller->reseller_code ?: '—' }}
                    </div>

                    <div>
                        <strong>Contact Person</strong><br>
                        {{ $reseller->contact_person ?: '—' }}
                    </div>

                    <div>
                        <strong>Email</strong><br>
                        {{ $reseller->email ?: '—' }}
                    </div>

                    <div>
                        <strong>Country</strong><br>
                        {{ $reseller->country ?: '—' }}
                    </div>

                    <div>
                        <strong>Markup %</strong><br>
                        {{ $reseller->default_markup_percent ?: '—' }}
                    </div>

                    <div>
                        <strong>Phone</strong><br>
                        {{ $reseller->phone ?: '—' }}
                    </div>

                    <div>
                        <strong>WhatsApp</strong><br>
                        {{ $reseller->whatsapp ?: '—' }}
                    </div>

                    <div style="grid-column:1 / -1;">
                        <strong>Address</strong><br>
                        {{ $reseller->address ?: '—' }}{{ $reseller->city ? ', '.$reseller->city : '' }}
                    </div>
                </div>

<div style="background:#fff; border:1px solid #e6ebf2; border-radius:14px; padding:20px; margin-top:20px;">
    <h3 style="margin:0 0 6px; font-size:18px; font-weight:700; color:#101828;">Commercial & Territory Setup</h3>
    <p style="margin:0 0 18px; font-size:13px; color:#667085;">Territory rights, pricing model, and commercial rules</p>

    <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
        <div>
            <strong>Territory Type</strong><br>
            Placeholder Until Field Added
        </div>

        <div>
            <strong>Primary Territory</strong><br>
            {{ $reseller->country ?: '—' }}
        </div>

        <div>
            <strong>Base Currency</strong><br>
            USD Base (Global Rule)
        </div>

        <div>
            <strong>Default Markup</strong><br>
            {{ $markupText }}
        </div>

        <div>
            <strong>Commercial Model</strong><br>
            Base + Markup
        </div>

        <div>
            <strong>Proposal Override Rule</strong><br>
            Placeholder Until Rule Added
        </div>

        <div style="grid-column:1 / -1;">
            <strong>Territory Tags</strong><br>
            <div style="display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;">
                <span style="background:#f2f4f7; color:#344054; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;">
                    {{ $reseller->country ?: 'No Territory Set' }}
                </span>
                <span style="background:#f2f4f7; color:#344054; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;">
                    More Territory Fields Later
                </span>
            </div>
        </div>
    </div>
</div>

                <div style="margin-top:20px;">
                    <a href="{{ route('resellers.index') }}"
                       style="display:inline-block; background:#667085; color:#fff; padding:10px 14px; border-radius:8px; text-decoration:none;">
                        Back to List
                    </a>
                </div>
            </div>

        </div>
    </div>

    <div style="display:flex; flex-direction:column; gap:16px;">
        <div style="background:#fff; border:1px solid #e6ebf2; border-radius:14px; padding:16px;">
            <h3 style="margin:0 0 10px; font-size:16px;">Admin Summary</h3>

            <div style="font-size:13px; color:#667085; line-height:1.8;">
                <p style="margin:0 0 8px;">Status: <strong>{{ ucfirst($reseller->status) }}</strong></p>
                <p style="margin:0 0 8px;">Agreement: Pending</p>
                <p style="margin:0 0 8px;">Created: {{ $reseller->created_at }}</p>
                <p style="margin:0;">Updated: {{ $reseller->updated_at }}</p>
            </div>
        </div>

        <div style="background:#fff; border:1px solid #e6ebf2; border-radius:14px; padding:16px;">
            <h3 style="margin:0 0 10px; font-size:16px;">Quick Actions</h3>

            <div style="display:flex; flex-direction:column; gap:10px;">
                <button type="button" style="padding:10px; border-radius:8px; border:1px solid #d0d5dd; background:#175cd3; color:#fff; font-weight:600;">
                    Generate Agreement
                </button>
                <button type="button" style="padding:10px; border-radius:8px; border:1px solid #d0d5dd; background:#fff;">
                    Upload Agreement
                </button>
                <button type="button" style="padding:10px; border-radius:8px; border:1px solid #d0d5dd; background:#fff;">
                    Edit Setup
                </button>
            </div>
        </div>
    </div>

</div>

@endsection

<div style='background:#fff; border:1px solid #e6ebf2; border-radius:14px; padding:20px; margin-top:20px;'>
<h3 style='margin:0 0 6px; font-size:18px; font-weight:700;'>Recent Activity</h3>
<p style='margin:0 0 18px; font-size:13px; color:#667085;'>Latest actions for this reseller</p>
<div style='display:flex; flex-direction:column; gap:12px;'>
<div>Reseller Created — {{ $reseller->created_at }}</div>
<div>Status Updated — {{ $reseller->updated_at }}</div>
<div>Agreement Pending</div>
</div></div>