{{-- resources/views/storefront/seller-application.blade.php --}}
@extends('storefront.layout')

@section('title', trans_key('storefront.pageTitles.sellerApplication').' - '.config('app.name', 'FreshMart'))

@push('styles')
<style>
.fm-seller-page {
    padding: 12px 0 20px;
}

.fm-seller-header {
    margin-bottom: 16px;
}

.fm-seller-header h1 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    color: var(--fm-text);
}

.fm-seller-header p {
    font-size: 14px;
    color: var(--fm-text-secondary);
    margin: 4px 0 0;
}

.fm-seller-card {
    background: var(--fm-card-bg);
    border-radius: var(--fm-radius);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--fm-shadow);
}

.fm-seller-card h2 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--fm-text);
}

.fm-seller-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.fm-seller-grid label {
    display: block;
}

.fm-seller-grid label span {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--fm-text-secondary);
    margin-bottom: 4px;
}

.fm-seller-grid label input,
.fm-seller-grid label select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--fm-border);
    border-radius: var(--fm-radius-sm);
    font-family: inherit;
    font-size: 13px;
    transition: border-color var(--fm-transition);
    background: var(--fm-bg);
}

.fm-seller-grid label input:focus,
.fm-seller-grid label select:focus {
    outline: none;
    border-color: var(--fm-primary);
    background: white;
}

.fm-seller-grid label input[type="file"] {
    padding: 8px;
    background: var(--fm-bg);
}

.fm-seller-full {
    grid-column: 1 / -1;
}

.fm-seller-submit {
    padding: 12px 32px;
    border: none;
    border-radius: var(--fm-radius-full);
    background: var(--fm-primary);
    color: white;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background var(--fm-transition);
    width: 100%;
}

.fm-seller-submit:hover {
    background: var(--fm-primary-dark);
}

.fm-seller-status {
    padding: 16px 20px;
    border-radius: var(--fm-radius);
    background: var(--fm-primary-light);
    color: var(--fm-primary-dark);
    margin-bottom: 16px;
}

.fm-seller-status strong {
    display: block;
    font-size: 16px;
}

.fm-seller-status p {
    margin: 4px 0 0;
    font-size: 13px;
}

.fm-seller-consent {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fm-seller-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--fm-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.fm-seller-consent label {
    font-size: 13px;
    color: var(--fm-text-secondary);
    cursor: pointer;
}

/* Application details view */
.fm-application-details {
    display: grid;
    gap: 8px;
}

.fm-application-details .fm-app-field {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--fm-border);
    font-size: 13px;
}

.fm-application-details .fm-app-field:last-child {
    border-bottom: none;
}

.fm-application-details .fm-app-field .fm-app-label {
    color: var(--fm-text-secondary);
}

.fm-application-details .fm-app-field .fm-app-value {
    font-weight: 600;
    color: var(--fm-text);
}

.fm-seller-badge {
    display: inline-block;
    padding: 2px 14px;
    border-radius: var(--fm-radius-full);
    background: var(--fm-bg);
    color: var(--fm-text-secondary);
    font-size: 12px;
    font-weight: 600;
}

.fm-seller-badge--pending { background: #fef3c7; color: #b45309; }
.fm-seller-badge--verified { background: #d1fae5; color: #065f46; }
.fm-seller-badge--approved { background: #d1fae5; color: #065f46; }
.fm-seller-badge--rejected { background: #fee2e2; color: #991b1b; }
.fm-seller-badge--reviewing { background: #dbeafe; color: #1d4ed8; }
.fm-seller-badge--pending_review { background: #dbeafe; color: #1d4ed8; }

@media (max-width: 480px) {
    .fm-seller-grid {
        grid-template-columns: 1fr;
    }
    .fm-seller-header h1 {
        font-size: 20px;
    }
}
</style>
@endpush

@section('content')
<div class="fm-seller-page">
    <div class="fm-container">
        <div class="fm-seller-header">
            <h1>🏪 Become a Seller</h1>
            <p>Grow with {{ config('app.name', 'FreshMart') }}. Create your seller profile, first store and payout details.</p>
        </div>

        {{-- Flash Status --}}
        @if(session('status'))
            <div class="fm-seller-status">
                <strong>✅ {{ session('status') }}</strong>
            </div>
        @endif

        {{-- Application Status --}}
        @if($application)
            @php
                $applicationStatus = $application->verification_status ?? $application->status ?? 'pending';
                $applicationMeta = is_array($application->onboarding_meta) ? $application->onboarding_meta : [];
                $applicationStoreName = $application->store_name ?? $application->business_name;
                $applicationPhone = $application->phone ?? $application->business_phone ?? $application->contact_phone;
                $applicationType = data_get($applicationMeta, 'business_type', 'food');
                $applicationAddress = trim(collect([
                    $application->address_line_1 ?? $application->address,
                    $application->city,
                ])->filter()->join(', '));
            @endphp
            <div class="fm-seller-card">
                <h2>{{ $application->business_name }}</h2>
                <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;">
                    <span class="fm-seller-badge fm-seller-badge--{{ $applicationStatus }}">
                        {{ str($applicationStatus)->headline() }}
                    </span>
                    <span style="font-size:13px;color:var(--fm-text-secondary);">
                        Applied {{ $application->created_at->diffForHumans() }}
                    </span>
                </div>
                <div class="fm-application-details">
                    <div class="fm-app-field">
                        <span class="fm-app-label">Store name</span>
                        <span class="fm-app-value">{{ $applicationStoreName }}</span>
                    </div>
                    <div class="fm-app-field">
                        <span class="fm-app-label">Business phone</span>
                        <span class="fm-app-value">{{ $applicationPhone }}</span>
                    </div>
                    <div class="fm-app-field">
                        <span class="fm-app-label">Business type</span>
                        <span class="fm-app-value">{{ str($applicationType)->headline() }}</span>
                    </div>
                    <div class="fm-app-field">
                        <span class="fm-app-label">Address</span>
                        <span class="fm-app-value">{{ $applicationAddress ?: 'Submitted' }}</span>
                    </div>
                </div>
                <div style="margin-top:12px;padding-top:12px;border-top:1px solid var(--fm-border);font-size:13px;color:var(--fm-text-secondary);">
                    @if(in_array($applicationStatus, ['verified', 'approved'], true))
                        ✅ Your seller account is approved. Open the seller app to manage your store.
                    @elseif($applicationStatus === 'rejected')
                        ❌ Your application was not approved. Please contact support for more information.
                    @else
                        ⏳ Your application is with the admin review team.
                    @endif
                </div>
            </div>
        @else
            {{-- Application Form --}}
            <form method="POST" action="{{ route('storefront.seller-application.store') }}" enctype="multipart/form-data">
                @csrf

                @if($errors->any())
                    <div style="padding:12px 16px;border-radius:var(--fm-radius);background:#fee2e2;color:#991b1b;margin-bottom:12px;">
                        <strong>Please fix the following errors:</strong>
                        <ul style="margin:4px 0 0;padding-left:20px;font-size:13px;">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                {{-- Business Details --}}
                <div class="fm-seller-card">
                    <h2>Business Details</h2>
                    <div class="fm-seller-grid">
                        <label>
                            <span>Business Name *</span>
                            <input name="business_name" type="text" value="{{ old('business_name') }}" required>
                        </label>
                        <label>
                            <span>Legal Name</span>
                            <input name="legal_name" type="text" value="{{ old('legal_name') }}">
                        </label>
                        <label>
                            <span>Store Name *</span>
                            <input name="store_name" type="text" value="{{ old('store_name') }}" required>
                        </label>
                        <label>
                            <span>GST / Tax Number</span>
                            <input name="tax_number" type="text" value="{{ old('tax_number') }}">
                        </label>
                    </div>
                </div>

                {{-- Contact & Address --}}
                <div class="fm-seller-card">
                    <h2>Contact &amp; Address</h2>
                    <div class="fm-seller-grid">
                        <label>
                            <span>Business Phone *</span>
                            <input name="phone" type="tel" value="{{ old('phone', auth()->user()?->phone) }}" required>
                        </label>
                        <label>
                            <span>Business Email</span>
                            <input name="email" type="email" value="{{ old('email', auth()->user()?->email) }}">
                        </label>
                        <label class="fm-seller-full">
                            <span>Address Line 1 *</span>
                            <input name="address_line_1" type="text" value="{{ old('address_line_1') }}" required>
                        </label>
                        <label class="fm-seller-full">
                            <span>Address Line 2</span>
                            <input name="address_line_2" type="text" value="{{ old('address_line_2') }}">
                        </label>
                        <label>
                            <span>City *</span>
                            <input name="city" type="text" value="{{ old('city') }}" required>
                        </label>
                        <label>
                            <span>State *</span>
                            <input name="state" type="text" value="{{ old('state') }}" required>
                        </label>
                        <label>
                            <span>PIN / Postal Code *</span>
                            <input name="postal_code" type="text" value="{{ old('postal_code') }}" required>
                        </label>
                    </div>
                </div>

                {{-- Payout Details --}}
                <div class="fm-seller-card">
                    <h2>Payout Details</h2>
                    <div class="fm-seller-grid">
                        <label>
                            <span>Account Holder</span>
                            <input name="account_holder_name" type="text" value="{{ old('account_holder_name') }}">
                        </label>
                        <label>
                            <span>Bank Name</span>
                            <input name="bank_name" type="text" value="{{ old('bank_name') }}">
                        </label>
                        <label>
                            <span>Account Number</span>
                            <input name="account_number" type="text" value="{{ old('account_number') }}">
                        </label>
                        <label>
                            <span>IFSC Code</span>
                            <input name="ifsc_code" type="text" value="{{ old('ifsc_code') }}">
                        </label>
                        <label class="fm-seller-full">
                            <span>UPI ID</span>
                            <input name="upi_id" type="text" value="{{ old('upi_id') }}">
                        </label>
                    </div>
                </div>

                {{-- Business Type & Service Area --}}
                <div class="fm-seller-card">
                    <h2>Business Type &amp; Service Area</h2>
                    <div class="fm-seller-grid">
                        <label>
                            <span>Business Type *</span>
                            <select name="business_type" required>
                                <option value="hyperlocal" {{ old('business_type') === 'hyperlocal' ? 'selected' : '' }}>Grocery / Retail</option>
                                <option value="food" {{ old('business_type') === 'food' ? 'selected' : '' }}>Restaurant / Food</option>
                                <option value="pharmacy" {{ old('business_type') === 'pharmacy' ? 'selected' : '' }}>Pharmacy</option>
                                <option value="service" {{ old('business_type') === 'service' ? 'selected' : '' }}>Services</option>
                            </select>
                        </label>
                        <label>
                            <span>Delivery Zone</span>
                            <select name="delivery_zone_id">
                                <option value="">Admin will assign</option>
                                @foreach($zones ?? [] as $zone)
                                    <option value="{{ $zone->id }}" {{ old('delivery_zone_id') == $zone->id ? 'selected' : '' }}>
                                        {{ $zone->name }}
                                    </option>
                                @endforeach
                            </select>
                        </label>
                    </div>
                </div>

                {{-- Verification Documents --}}
                <div class="fm-seller-card">
                    <h2>Verification Documents</h2>
                    <div class="fm-seller-grid">
                        <label>
                            <span>PAN Document</span>
                            <input type="file" name="pan_document" accept=".jpg,.jpeg,.png,.pdf">
                        </label>
                        <label>
                            <span>GST Certificate</span>
                            <input type="file" name="gst_document" accept=".jpg,.jpeg,.png,.pdf">
                        </label>
                        <label>
                            <span>Identity Proof</span>
                            <input type="file" name="identity_document" accept=".jpg,.jpeg,.png,.pdf">
                        </label>
                        <label>
                            <span>Address Proof</span>
                            <input type="file" name="address_document" accept=".jpg,.jpeg,.png,.pdf">
                        </label>
                    </div>
                </div>

                {{-- Consent --}}
                <div class="fm-seller-card">
                    <div class="fm-seller-consent">
                        <input type="checkbox" name="consent" value="1" required id="consentCheck">
                        <label for="consentCheck">
                            I confirm these details are accurate and consent to verification.
                        </label>
                    </div>
                </div>

                <button type="submit" class="fm-seller-submit">Submit for Approval</button>
            </form>
        @endif
    </div>
</div>
@endsection