@extends('layouts.admin')

@section('header')
    Venue Details
@endsection

@section('content')
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 text-gray-900">
            <div class="flex justify-between items-start mb-6">
                <div>
                    <h3 class="text-2xl font-bold text-gray-900">{{ $venue->name }}</h3>
                    @if(auth()->user()->role === 'admin')
                        <p class="mt-1 text-sm text-gray-600">{{ $venue->club->name }}</p>
                    @endif
                </div>
                <div class="flex gap-3">
                    @if(auth()->user()->role === 'admin' || (auth()->user()->role === 'club_manager' && auth()->user()->club_id === $venue->club_id))
                        <a href="{{ route('venues.edit', $venue) }}" class="inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 focus:bg-blue-700 active:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition ease-in-out duration-150">
                            Edit Venue
                        </a>
                        <form method="POST" action="{{ route('venues.destroy', $venue) }}" onsubmit="return confirm('⚠️ WARNING: Are you sure you want to delete this venue? This action cannot be undone.');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-700 focus:bg-red-700 active:bg-red-900 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150">
                                Delete Venue
                            </button>
                        </form>
                    @endif
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Address Section -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="text-sm font-semibold text-gray-700 uppercase mb-3">Address</h4>
                    <div class="space-y-2">
                        <p class="text-sm text-gray-900">{{ $venue->address_line_1 }}</p>
                        @if($venue->address_line_2)
                            <p class="text-sm text-gray-900">{{ $venue->address_line_2 }}</p>
                        @endif
                        <p class="text-sm text-gray-900">{{ $venue->town_city }}</p>
                        <p class="text-sm text-gray-900 font-semibold">{{ $venue->postcode }}</p>
                    </div>
                </div>

                <!-- Contact Section -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="text-sm font-semibold text-gray-700 uppercase mb-3">Contact Information</h4>
                    <div class="space-y-2">
                        <div>
                            <p class="text-xs text-gray-500">Contact Name</p>
                            <p class="text-sm text-gray-900">{{ $venue->contact_name }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Email</p>
                            <p class="text-sm text-gray-900">
                                <a href="mailto:{{ $venue->contact_email }}" class="text-indigo-600 hover:text-indigo-900">{{ $venue->contact_email }}</a>
                            </p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Phone</p>
                            <p class="text-sm text-gray-900">
                                <a href="tel:{{ $venue->contact_phone }}" class="text-indigo-600 hover:text-indigo-900">{{ $venue->contact_phone }}</a>
                            </p>
                        </div>
                        @if($venue->website)
                            <div>
                                <p class="text-xs text-gray-500">Website</p>
                                <p class="text-sm text-gray-900">
                                    <a href="{{ $venue->website }}" target="_blank" class="text-indigo-600 hover:text-indigo-900">{{ $venue->website }}</a>
                                </p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            @if($venue->notes)
                <div class="mt-6 bg-gray-50 p-4 rounded-lg">
                    <h4 class="text-sm font-semibold text-gray-700 uppercase mb-3">Notes</h4>
                    <p class="text-sm text-gray-900 whitespace-pre-line">{{ $venue->notes }}</p>
                </div>
            @endif

            <div class="mt-6 pt-6 border-t border-gray-200">
                <a href="{{ route('venues.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-300 border border-transparent rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest hover:bg-gray-400 focus:bg-gray-400 active:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    Back to Venues
                </a>
            </div>
        </div>
    </div>
@endsection