@extends('member.layouts.app')

@section('title', 'Partner Profile')

@section('content')
    @php
        $partnerName = $partner->company_name ?: $partner->name;
        $businessType = $partner->business_type ? ucfirst($partner->business_type) : 'Partner';
        $logo = $partner->business_logo ? asset('storage/' . $partner->business_logo) : null;
    @endphp

    <div class="space-y-6">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Partner Profile</h1>
                <p class="text-gray-600">Detailed information about {{ $partnerName }}.</p>
            </div>
            <a href="{{ route('member.partners') }}" class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-xl text-gray-700 text-sm font-medium">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>Back to Partners
            </a>
        </div>

        <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            <div class="h-48 bg-gray-200 relative">
                @if ($logo)
                    <img src="{{ $logo }}" alt="{{ $partnerName }}" class="w-full h-full object-cover">
                @endif
                <div class="absolute top-4 right-4 bg-white px-3 py-1 rounded-md text-xs font-bold shadow-sm flex items-center gap-1">
                    <i data-lucide="shield-check" class="w-3 h-3 text-emerald-500"></i>Verified Partner
                </div>
            </div>

            <div class="p-6">
                <div class="flex items-start justify-between gap-4 mb-5">
                    <div>
                        <h2 class="font-bold text-xl text-gray-900">{{ $partnerName }}</h2>
                        <p class="text-sm text-gray-500 mt-1">Category: {{ $businessType }}</p>
                    </div>
                </div>

                <p class="text-sm text-gray-600 mb-6">{{ $partner->business_description ?: 'This partner is part of the SaveSmart network and accepts SaveSmart member cards.' }}</p>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div class="bg-gray-50 rounded-lg p-4 border border-gray-100">
                        <p class="text-xs text-gray-500 uppercase">Address</p>
                        <p class="text-sm font-semibold text-gray-900 mt-1">{{ $partner->business_address ?: 'Not provided' }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4 border border-gray-100">
                        <p class="text-xs text-gray-500 uppercase">Phone</p>
                        <p class="text-sm font-semibold text-gray-900 mt-1">{{ $partner->phone_number ?: 'Not provided' }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4 border border-gray-100">
                        <p class="text-xs text-gray-500 uppercase">Contact Person</p>
                        <p class="text-sm font-semibold text-gray-900 mt-1">{{ $partner->contact_person ?: 'Not provided' }}</p>
                    </div>
                </div>

                <div class="mt-6">
                    <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Branch Locations</h3>
                    <div class="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
                        @forelse ($partner->locations as $location)
                            <div class="rounded-lg border border-gray-100 bg-gray-50 p-4">
                                <div class="flex items-center justify-between gap-2">
                                    <p class="text-sm font-semibold text-gray-900">{{ $location->label ?: 'Branch' }}</p>
                                    @if ($location->is_primary)
                                        <span class="px-2 py-1 rounded-full bg-teal-100 text-teal-700 text-[11px] font-semibold">Primary</span>
                                    @endif
                                </div>
                                <div class="mt-2 grid grid-cols-2 gap-2">
                                    <div>
                                        <p class="text-[11px] text-gray-500 mb-1">Logo</p>
                                        @php
                                            $logoPath = $location->business_logo ?: $partner->business_logo;
                                        @endphp
                                        @if ($logoPath)
                                            <img
                                                src="{{ asset('storage/' . $logoPath) }}"
                                                alt="{{ $location->label ?: 'Branch' }} logo"
                                                class="w-12 h-12 rounded-lg object-cover border border-gray-200"
                                            >
                                        @else
                                            <p class="text-[11px] text-gray-400">No logo</p>
                                        @endif
                                    </div>
                                    <div>
                                        <p class="text-[11px] text-gray-500 mb-1">Store Image</p>
                                        @php
                                            $imagePath = $location->business_image ?: $partner->business_image;
                                        @endphp
                                        @if ($imagePath)
                                            <img
                                                src="{{ asset('storage/' . $imagePath) }}"
                                                alt="{{ $location->label ?: 'Branch' }} store image"
                                                class="w-full h-12 rounded-lg object-cover border border-gray-200"
                                            >
                                        @else
                                            <p class="text-[11px] text-gray-400">No image</p>
                                        @endif
                                    </div>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">{{ $location->address }}</p>
                                <a href="{{ $location->map_location_url }}" target="_blank" rel="noopener noreferrer" class="mt-2 inline-flex items-center gap-1 text-xs font-semibold text-teal-700 hover:text-teal-800">
                                    <i data-lucide="navigation" class="w-3 h-3"></i>Open branch map
                                </a>
                            </div>
                        @empty
                            <p class="text-sm text-gray-500">No branch locations available yet.</p>
                        @endforelse
                    </div>
                </div>

                <div class="mt-6 flex flex-wrap gap-3">
                    @if ($partner->map_location_url)
                        <a href="{{ $partner->map_location_url }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[#0d4a4a] text-white text-sm font-medium">
                            <i data-lucide="navigation" class="w-4 h-4"></i>Open in Google Maps
                        </a>
                    @endif
                    <a href="{{ route('website.map') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-200 bg-white text-gray-700 text-sm font-medium">
                        <i data-lucide="map" class="w-4 h-4"></i>View on Partners Map
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection