@extends('layouts.app-shell')
@section('bottomnav')
    <a href="{{ route('customer.bookings') }}"><span class="ic">📋</span><span>Subs</span></a>
    <a href="{{ route('customer.schedule') }}"><span class="ic">📅</span><span>Schedule</span></a>
    <a href="{{ route('customer.services.browse') }}"><span class="ic">🛠</span><span>Services</span></a>
    <a href="{{ route('customer.track.form') }}" class="active"><span class="ic">🔍</span><span>Track</span></a>
    <a href="{{ route('customer.profile') }}"><span class="ic">👤</span><span>Profile</span></a>
@endsection
@section('title', 'Track a visit')
@section('sidebar')
    <a href="{{ route('customer.bookings') }}"><span class="ic">📋</span> My subscriptions</a>
    <a href="{{ route('customer.schedule') }}"><span class="ic">📅</span> Schedule</a>
    <a href="{{ route('customer.services.browse') }}"><span class="ic">🛠</span> Browse services</a>
    <a href="{{ route('customer.track.form') }}" class="active"><span class="ic">🔍</span> Track visit</a>
    <a href="{{ route('customer.profile') }}"><span class="ic">👤</span> Profile</a>
    <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('lo').submit()"><span class="ic">⤴</span> Logout</a>
    <form id="lo" method="POST" action="{{ route('logout') }}" style="display:none">@csrf</form>
@endsection
@section('content')

@if(session('success'))
    <div class="alert alert-success" style="margin-bottom: 18px;">{{ session('success') }}</div>
@endif
@if($errors->any())
    <div class="alert alert-danger" style="margin-bottom: 18px;">{{ $errors->first() }}</div>
@endif

<div class="flex-between mb-3">
    <div>
        <h2 style="font-size: 24px; font-weight: 700;">Track a visit</h2>
        <p class="muted" style="font-size: 13px;">Enter your booking code and phone number.</p>
    </div>
</div>

<div class="panel" style="max-width: 540px;">
    <form method="POST" action="{{ route('customer.track.lookup') }}" class="app-form">
        @csrf
        <div class="form-section"><x-icon name="search" :size="14" /><h4>Visit lookup</h4><span class="sub">Find your booking</span></div>
        <div class="field">
            <label>Booking code</label>
            <input type="text" name="booking_code" required placeholder="BFK-XXXXX" value="{{ old('booking_code') }}" />
        </div>
        <div class="field">
            <label>Phone number</label>
            <input type="tel" name="phone" required placeholder="+91 9999999999" value="{{ old('phone', auth()->user()->phone ?? '') }}" />
        </div>
        <button type="submit" class="btn-app btn-primary full"><x-icon name="search" :size="14" /> Find visit</button>
    </form>
</div>

@isset($booking)
    <div class="panel mt-3">
        <div class="panel-head">
            <h3><x-icon name="check" :size="14" style="color: var(--bfk-primary);" /> Booking found</h3>
            <code style="font-size: 11px; background: var(--bfk-bg-soft); padding: 2px 6px; border-radius: 4px;">{{ $booking->booking_code }}</code>
        </div>
        <div class="kpi-row" style="margin-bottom: 16px;">
            <div class="kpi-card kpi-orange"><div class="kpi-ic">🛠</div><div><strong>{{ $booking->service->name ?? '—' }}</strong><span>Service</span></div></div>
            <div class="kpi-card kpi-green"><div class="kpi-ic">👥</div><div><strong>{{ $booking->partner?->display_name ?? '—' }}</strong><span>Partner</span></div></div>
            <div class="kpi-card kpi-blue"><div class="kpi-ic">📍</div><div><strong>{{ $booking->area?->name ?? '—' }}</strong><span>Area</span></div></div>
            <div class="kpi-card kpi-purple"><div class="kpi-ic">💰</div><div><strong>₹{{ number_format($booking->total_rupees, 0) }}</strong><span>Monthly</span></div></div>
        </div>
        <div class="table-wrap">
            <table class="table">
                <thead><tr><th>Date</th><th>Slot</th><th>Status</th><th>Team</th></tr></thead>
                <tbody>
                    @foreach($booking->visits as $v)
                        <tr>
                            <td data-label="Date">{{ $v->scheduled_date->format('d M Y') }}</td>
                            <td data-label="Slot">{{ $v->scheduled_slot }}</td>
                            <td data-label="Status">@if($v->status === 'completed') <span class="pill pill-green">Done</span> @elseif($v->status === 'in_progress') <span class="pill pill-orange">In progress</span> @else <span class="pill pill-gold">Scheduled</span> @endif</td>
                            <td data-label="Team">{{ $v->teamMember?->name ?? '—' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div style="margin-top: 14px;"><a href="{{ route('customer.booking', $booking->booking_code) }}" class="btn-app btn-outline"><x-icon name="eye" :size="14" /> Full details</a></div>
    </div>
@endisset

@endsection