@extends('layouts.mobile')

@section('title', 'Become a Worker - Gletra')

@push('styles')
<style>
    .worker-page {
        margin-top: var(--header-height);
        padding-bottom: calc(var(--nav-height) + 24px);
        background: #f1f5f9;
        min-height: 100vh;
    }

    .worker-hero {
        background: linear-gradient(135deg, #15803d 0%, #16a34a 55%, #22c55e 100%);
        padding: 20px 18px 28px;
        color: #fff;
        border-radius: 0 0 28px 28px;
    }

    .worker-hero-title {
        font-size: 24px;
        font-weight: 800;
        margin-bottom: 8px;
    }

    .worker-hero-sub {
        font-size: 13px;
        opacity: .9;
        line-height: 1.5;
    }

    .worker-benefits {
        padding: 14px;
        margin-top: -16px;
        position: relative;
        z-index: 2;
        display: grid;
        gap: 10px;
    }

    .worker-benefit-card {
        background: #fff;
        border-radius: 16px;
        padding: 16px;
        display: flex;
        gap: 14px;
        align-items: flex-start;
        box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
    }

    .worker-benefit-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: #f0fdf4;
        color: #15803d;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        flex-shrink: 0;
    }

    .worker-benefit-title {
        font-size: 14px;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 4px;
    }

    .worker-benefit-text {
        font-size: 12px;
        color: #64748b;
        line-height: 1.5;
        margin: 0;
    }

    .worker-cta-wrap {
        padding: 0 14px 14px;
    }

    .worker-cta-card {
        background: #fff;
        border-radius: 20px;
        padding: 20px 16px;
        box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
    }

    .worker-cta-card h3 {
        font-size: 17px;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 8px;
        text-align: center;
    }

    .worker-cta-card p {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 16px;
        text-align: center;
    }

    .worker-form label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #64748b;
        margin-bottom: 6px;
    }

    .worker-form input {
        width: 100%;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 12px;
        font-size: 14px;
    }

    .btn-worker-primary {
        display: block;
        width: 100%;
        border: none;
        border-radius: 14px;
        padding: 14px;
        font-weight: 800;
        font-size: 14px;
        background: #16a34a;
        color: #fff;
        text-decoration: none;
        text-align: center;
        margin-bottom: 10px;
    }

    .btn-worker-secondary {
        display: block;
        width: 100%;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        padding: 14px;
        font-weight: 700;
        font-size: 14px;
        background: #fff;
        color: #475569;
        text-decoration: none;
        text-align: center;
    }
</style>
@endpush

@section('content')
<header class="app-header">
    <a href="{{ auth()->check() ? route('mobile.account') : route('home') }}" style="color: #1e293b; text-decoration: none; font-size: 20px; display: flex; align-items: center;">
        <i class="bi bi-arrow-left"></i>
    </a>
    <div style="flex: 1; margin-left: 12px; font-weight: 700;">Worker Panel</div>
</header>

<div class="worker-page">
    <div class="worker-hero">
        <div class="worker-hero-title">Work with Gletra</div>
        <div class="worker-hero-sub">Accept local service jobs, track earnings, manage availability, and get paid securely through your worker panel.</div>
    </div>

    <div class="worker-benefits">
        <div class="worker-benefit-card">
            <div class="worker-benefit-icon"><i class="bi bi-briefcase-fill"></i></div>
            <div>
                <div class="worker-benefit-title">Nearby Job Requests</div>
                <p class="worker-benefit-text">Get electrician, plumber, and home service requests near you.</p>
            </div>
        </div>
        <div class="worker-benefit-card">
            <div class="worker-benefit-icon"><i class="bi bi-wallet2"></i></div>
            <div>
                <div class="worker-benefit-title">Wallet & Withdrawals</div>
                <p class="worker-benefit-text">Track completed job earnings and request payouts anytime.</p>
            </div>
        </div>
        <div class="worker-benefit-card">
            <div class="worker-benefit-icon"><i class="bi bi-geo-alt-fill"></i></div>
            <div>
                <div class="worker-benefit-title">Live Job Tracking</div>
                <p class="worker-benefit-text">Share live location with customers while you are on the way.</p>
            </div>
        </div>
    </div>

    <div class="worker-cta-wrap">
        <div class="worker-cta-card">
            @if(session('success'))
                <div class="alert alert-success py-2 small mb-3">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="alert alert-danger py-2 small mb-3">{{ session('error') }}</div>
            @endif

            @auth
                @if($pendingApproval ?? false)
                    <h3>Approval Pending</h3>
                    <p>Your worker registration has been submitted. An admin will review and approve your account before you can access the worker dashboard.</p>
                    <div style="background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;padding:16px;margin-bottom:14px;text-align:center;">
                        <i class="bi bi-hourglass-split" style="font-size:28px;color:#ea580c;"></i>
                        <p style="font-size:13px;color:#9a3412;margin:10px 0 0;line-height:1.5;">Status: <strong>Waiting for admin approval</strong></p>
                    </div>
                    <a href="{{ route('shop') }}" class="btn-worker-primary">Browse Gletra Shop</a>
                    <a href="{{ route('customer.support.tickets') }}" class="btn-worker-secondary">Contact Support</a>
                @else
                    <h3>Join as a Gletra Worker</h3>
                    <p>Register your worker profile. After admin approval, you can open your dashboard and accept jobs.</p>
                    <form method="POST" action="{{ route('mobile.worker.register') }}" class="worker-form">
                        @csrf
                        <label for="display_name">Display name</label>
                        <input id="display_name" name="display_name" value="{{ old('display_name', auth()->user()->name) }}" required>
                        @error('display_name')<p class="text-danger small mb-2">{{ $message }}</p>@enderror

                        <label for="hourly_rate">Hourly rate (₹)</label>
                        <input id="hourly_rate" name="hourly_rate" type="number" min="50" step="1" value="{{ old('hourly_rate', 299) }}">
                        @error('hourly_rate')<p class="text-danger small mb-2">{{ $message }}</p>@enderror

                        <button type="submit" class="btn-worker-primary">Submit for Approval</button>
                    </form>
                    <a href="{{ route('shop') }}" class="btn-worker-secondary">Browse Gletra Shop</a>
                @endif
            @else
                <h3>Create your worker account</h3>
                <p>Register first. After admin approval, you can log in and access your worker dashboard.</p>
                <a href="{{ route('register', ['role' => 'worker', 'redirect' => route('mobile.worker')]) }}" class="btn-worker-primary">Register as Worker</a>
                <a href="{{ route('login', ['redirect' => route('mobile.worker')]) }}" class="btn-worker-secondary">Already registered? Log in</a>
            @endauth
        </div>
    </div>
</div>
@endsection