@extends('layouts.app')

@section('title', $customer->name)

@section('content')
<div class="mx-auto max-w-5xl">
    <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-slate-900">{{ $customer->name }}</h1>
            <p class="text-sm text-slate-500">{{ $customer->company }} · {{ $customer->email }} · {{ $customer->phone }}</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('customers.edit', $customer) }}" class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm hover:bg-slate-50">Edit</a>
            @can('delete', $customer)
                <form method="post" action="{{ route('customers.destroy', $customer) }}" onsubmit="return confirm('Delete this customer?');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="rounded-lg border border-red-200 px-3 py-1.5 text-sm text-red-700 hover:bg-red-50">Delete</button>
                </form>
            @endcan
        </div>
    </div>

    @if($customer->notes)
        <div class="mt-6 rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-700">{{ $customer->notes }}</div>
    @endif

    <div class="mt-8 grid gap-8 lg:grid-cols-2">
        <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <h2 class="text-lg font-semibold text-slate-900">Comments</h2>
            <ul class="mt-4 space-y-3 text-sm">
                @foreach ($customer->comments as $comment)
                    <li class="rounded-lg bg-slate-50 px-3 py-2">
                        <p class="text-slate-800">{{ $comment->body }}</p>
                        <p class="mt-1 text-xs text-slate-500">{{ $comment->user->name }} · {{ $comment->created_at->diffForHumans() }}</p>
                    </li>
                @endforeach
            </ul>
            <form method="post" action="{{ route('customers.comments.store', $customer) }}" class="mt-4 space-y-2">
                @csrf
                <textarea name="body" rows="3" required class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="Add a comment"></textarea>
                <button type="submit" class="rounded-lg bg-brand-600 px-3 py-1.5 text-sm font-medium text-white">Post</button>
            </form>
        </div>

        <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
            <h2 class="text-lg font-semibold text-slate-900">Files</h2>
            <ul class="mt-4 space-y-2 text-sm">
                @foreach ($customer->files as $file)
                    <li class="flex items-center justify-between gap-2">
                        <span class="truncate">{{ $file->original_name }}</span>
                        <form method="post" action="{{ route('customers.files.destroy', [$customer, $file]) }}">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-xs text-red-600">Remove</button>
                        </form>
                    </li>
                @endforeach
            </ul>
            <form method="post" action="{{ route('customers.files.store', $customer) }}" enctype="multipart/form-data" class="mt-4">
                @csrf
                <input type="file" name="file" required class="text-sm">
                <button type="submit" class="mt-2 rounded-lg bg-slate-800 px-3 py-1.5 text-sm text-white">Upload</button>
            </form>
        </div>
    </div>

    <div class="mt-8 rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
        <h2 class="text-lg font-semibold text-slate-900">Deals</h2>
        <ul class="mt-4 divide-y divide-slate-100 text-sm">
            @forelse ($customer->deals as $deal)
                <li class="flex justify-between py-2">
                    <a href="{{ route('deals.show', $deal) }}" class="text-brand-600">{{ $deal->title }}</a>
                    <span class="text-slate-500">${{ number_format($deal->value, 2) }} · {{ $deal->stage->name }}</span>
                </li>
            @empty
                <li class="py-4 text-slate-500">No deals yet.</li>
            @endforelse
        </ul>
    </div>
</div>
@endsection