@extends('layouts.sash')

@section('title', 'Walk-In Details')

@section('content')
<div class="row mt-4">
<div class="col-xl-8">
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-4">
        <div class="flex justify-between items-start gap-4">
            <div>
                <p class="text-xs font-medium text-slate-500">Token</p>
                <p class="text-lg font-semibold text-slate-800">{{ $walkIn->token_no }}</p>
                <p class="mt-2 text-sm text-slate-700">
                    {{ $walkIn->customer?->display_name ?? $walkIn->customer_name ?? 'Walk-in' }}
                    @if($walkIn->mobile)
                        <span class="block text-xs text-slate-500">{{ $walkIn->mobile }}</span>
                    @endif
                </p>
            </div>
            <div class="text-right">
                <p class="text-xs font-medium text-slate-500">Branch</p>
                <p class="text-sm text-slate-800">{{ $walkIn->branch?->name ?? '—' }}</p>
                <p class="mt-2">
                    <span class="px-2 py-1 text-xs font-medium rounded-full
                        @switch($walkIn->status)
                            @case('waiting') bg-amber-100 text-amber-800 @break
                            @case('in_service') bg-blue-100 text-blue-800 @break
                            @case('completed') bg-green-100 text-green-800 @break
                            @case('cancelled') bg-slate-100 text-slate-700 @break
                            @case('converted') bg-emerald-100 text-emerald-800 @break
                            @default bg-slate-100 text-slate-800
                        @endswitch
                    ">{{ ucfirst(str_replace('_', ' ', $walkIn->status)) }}</span>
                </p>
            </div>
        </div>

        <dl class="mt-4 space-y-2 text-sm">
            <div>
                <dt class="font-medium text-slate-600">Requested services</dt>
                <dd class="text-slate-800">{{ $walkIn->requested_service_summary ?? '—' }}</dd>
            </div>
            <div>
                <dt class="font-medium text-slate-600">Preferred staff</dt>
                <dd class="text-slate-800">{{ $walkIn->preferredStaff?->full_name ?? 'Any available' }}</dd>
            </div>
            <div>
                <dt class="font-medium text-slate-600">Estimated wait</dt>
                <dd class="text-slate-800">{{ $walkIn->estimated_wait_minutes !== null ? $walkIn->estimated_wait_minutes . ' min' : '—' }}</dd>
            </div>
            <div>
                <dt class="font-medium text-slate-600">Notes</dt>
                <dd class="text-slate-800 whitespace-pre-line">{{ $walkIn->notes ?? '—' }}</dd>
            </div>
        </dl>

        <div class="mt-4 flex gap-3">
            <a href="{{ route('walk-ins.edit', $walkIn) }}" class="px-4 py-2 bg-slate-800 text-white text-sm font-medium rounded-lg hover:bg-slate-700">Edit</a>
            <a href="{{ route('walk-ins.index') }}" class="px-4 py-2 bg-slate-200 rounded-lg text-sm">Back to queue</a>
        </div>
    </div>

    @if($walkIn->status !== 'converted')
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <h2 class="text-lg font-semibold text-slate-800 mb-3">Convert to Appointment</h2>
        @if(!$walkIn->customer_id)
            <p class="text-sm text-red-600 mb-3">Link this walk-in to an existing customer before converting.</p>
        @else
            <form method="post" action="{{ route('walk-ins.convert', $walkIn) }}" class="space-y-4">
                @csrf
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Appointment date *</label>
                        <input type="date" name="appointment_date" value="{{ old('appointment_date', now()->toDateString()) }}" required class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Start time *</label>
                        <input type="time" name="start_time" value="{{ old('start_time') }}" required class="mt-1 block w-full rounded-lg border-slate-300 shadow-sm text-sm">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">Services *</label>
                    @php
                        $branchServices = \App\Models\Service::where('status', 'active')
                            ->when($walkIn->branch_id, fn ($q) => $q->where('branch_id', $walkIn->branch_id)->orWhereNull('branch_id'))
                            ->orderBy('name')
                            ->get();
                        $selected = old('service_ids', []);
                    @endphp
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-56 overflow-y-auto border border-slate-200 rounded-lg p-3">
                        @foreach($branchServices as $service)
                        <label class="flex items-center gap-2 text-sm text-slate-700">
                            <input type="checkbox" name="service_ids[]" value="{{ $service->id }}" class="rounded border-slate-300"
                                {{ in_array($service->id, $selected) ? 'checked' : '' }}>
                            <span>{{ $service->name }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>
                <div class="flex gap-3 pt-2">
                    <button type="submit" class="px-4 py-2 bg-emerald-600 text-white text-sm font-medium rounded-lg hover:bg-emerald-700">
                        Convert to appointment
                    </button>
                </div>
            </form>
        @endif
    </div>
    @else
    <div class="bg-emerald-50 border border-emerald-100 rounded-xl p-4 text-sm text-emerald-800">
        This walk-in has been converted to an appointment.
        @if($walkIn->convertedAppointment)
            <a href="{{ route('appointments.show', $walkIn->convertedAppointment) }}" class="underline font-medium ml-1">View appointment</a>
        @endif
    </div>
    @endif
</div>
</div>
@endsection