@extends('layouts.app') {{-- Use your main layout file --}}

{{-- Use the campaign title for the page title --}}
@section('title', $campaign->title)

@section('content')
    {{-- Back Navigation Link --}}
    <div class="mb-6">
        <a href="{{ route('admin.campaigns.index') }}" class="text-sm text-indigo-600 hover:text-indigo-800 hover:underline">
            &larr; Back to Campaigns List
        </a>
    </div>

    {{-- Main Content Container --}}
    <div class="bg-white shadow-md rounded-lg p-6 md:p-8 border border-gray-200">

        {{-- Header Section with Image and Title/Actions --}}
        <div class="md:flex md:gap-x-6 mb-6 pb-6 border-b border-gray-200">
            {{-- Feature Image --}}
            <div class="flex-shrink-0 w-full md:w-48 lg:w-64 mb-4 md:mb-0">
                @if ($campaign->image_path)
                    <img src="{{ asset('storage/' . $campaign->image_path) }}" {{-- Using asset helper --}}
                        alt="{{ $campaign->title }}" class="w-full h-auto rounded-md object-cover shadow">
                @else
                    {{-- Placeholder if no image --}}
                    <div
                        class="w-full h-40 rounded-md bg-gray-100 flex items-center justify-center text-gray-400 shadow-inner">
                        {{-- Placeholder SVG --}}
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor" stroke-width="1">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </div>
                @endif
            </div>

            {{-- Title, Status, Actions --}}
            <div class="flex-grow">
                <h1 class="text-2xl lg:text-3xl font-bold text-gray-800 mb-2">
                    {{ $campaign->title }}
                </h1>

                {{-- Status and Type Badges --}}
                <div class="flex items-center flex-wrap gap-x-4 gap-y-2 mb-4">
                    @if ($campaign->enabled)
                        <span
                            class="inline-flex items-center rounded-full bg-green-100 px-3 py-0.5 text-sm font-medium text-green-800">
                            Enabled
                        </span>
                    @else
                        <span
                            class="inline-flex items-center rounded-full bg-gray-100 px-3 py-0.5 text-sm font-medium text-gray-800">
                            Disabled
                        </span>
                    @endif
                    <span
                        class="inline-flex items-center rounded-full px-3 py-0.5 text-sm font-medium
                        {{ $campaign->type === 'abonly' ? 'bg-blue-100 text-blue-800' : ($campaign->type === 'hybrid' ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800') }}">
                        Type: {{ $campaign->type }}
                    </span>
                </div>

                {{-- Timestamps --}}
                <p class="text-xs text-gray-500 mb-4">
                    Created: {{ $campaign->created_at->format('M d, Y H:i') }}
                    ({{ $campaign->created_at->diffForHumans() }}) <br>
                    Last Updated: {{ $campaign->updated_at->format('M d, Y H:i') }}
                    ({{ $campaign->updated_at->diffForHumans() }})
                </p>

                {{-- Action Buttons --}}
                <div class="flex items-center space-x-3">
                    {{-- Edit Button --}}
                    <a href="{{ route('admin.campaigns.edit', $campaign) }}"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Edit
                    </a>
                    {{-- Delete Button (Form) --}}
                    <form action="{{ route('admin.campaigns.destroy', $campaign) }}" method="POST" class="inline"
                        onsubmit="return confirm('Are you sure you want to delete this campaign and all associated products? This cannot be undone.');">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                            class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                            Delete
                        </button>
                    </form>
                </div>
            </div>
        </div> {{-- End Header Section --}}

        {{-- Description Section --}}
        @if ($campaign->description)
            <div class="mb-6">
                <h2 class="text-xl font-semibold text-gray-700 mb-2">Description</h2>
                {{-- Basic prose styling for paragraphs, lists etc. within description --}}
                <div class="prose prose-sm max-w-none text-gray-600">
                    {!! nl2br(e($campaign->description)) !!} {{-- Use nl2br to convert newlines, escape content --}}
                </div>
            </div>
        @endif

        {{-- Notes Section (Conditional) --}}
        @if ($campaign->notes)
            <div class="mb-6 pt-6 border-t border-gray-200">
                <h2 class="text-xl font-semibold text-gray-700 mb-2">Notes</h2>
                <div class="prose prose-sm max-w-none text-gray-600">
                    {!! nl2br(e($campaign->notes)) !!}
                </div>
            </div>
        @endif

        {{-- Shipping Address Section --}}
        <div class="mb-6 pt-6 border-t border-gray-200">
            {{-- Section Header with Icon --}}
            <div class="flex justify-between items-center mb-3">
                <div class="flex items-center space-x-2">
                    {{-- Map Pin Icon --}}
                    <svg class="h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                    </svg>
                    <h2 class="text-xl font-semibold text-gray-700">Shipping Address</h2>
                </div>
                {{-- Link to edit campaign page --}}
                <a href="{{ route('admin.campaigns.edit', $campaign) }}" class="text-xs text-blue-600 hover:underline">
                    {{ $campaign->shippingAddress ? 'Change Address' : 'Set Address' }}
                </a>
            </div>

            @if ($campaign->shippingAddress)
                {{-- Display the address if it exists --}}
                <div class="text-sm text-gray-700 bg-gray-50 p-4 rounded-md border border-gray-200 shadow-sm">
                    @if ($campaign->shippingAddress->nickname)
                        <p class="font-semibold text-gray-800">{{ $campaign->shippingAddress->nickname }}</p>
                    @endif
                    {{-- Use div instead of <address> to avoid default italics --}}
                    <div class="mt-1 leading-relaxed">
                        {{ $campaign->shippingAddress->address_line_1 }}<br>
                        @if ($campaign->shippingAddress->address_line_2)
                            {{ $campaign->shippingAddress->address_line_2 }}<br>
                        @endif
                        {{ $campaign->shippingAddress->city }}, {{ $campaign->shippingAddress->state }}
                        {{ $campaign->shippingAddress->zip_code }}
                        {{-- Optional: <br>{{ $campaign->shippingAddress->country }} --}}
                    </div>
                </div>
            @else
                {{-- Display warning message if no address is associated --}}
                <div class="border-l-4 border-yellow-400 bg-yellow-50 p-4"> {{-- Yellow warning style --}}
                    <div class="flex">
                        <div class="flex-shrink-0">
                            {{-- Heroicon: exclamation-triangle --}}
                            <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd"
                                    d="M8.485 3.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 3.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z"
                                    clip-rule="evenodd" />
                            </svg>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-yellow-700">
                                No Shipping Address associated with this campaign.
                                <a href="{{ route('admin.campaigns.edit', $campaign) }}"
                                    class="font-medium underline text-yellow-700 hover:text-yellow-600">Set one now?</a>
                            </p>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        {{-- Selected Email Template Section --}}
        <div class="mb-6 pt-6 border-t border-gray-200 dark:border-gray-700">
            <div class="flex justify-between items-center mb-3">
                <div class="flex items-center space-x-2">
                    <svg class="h-5 w-5 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                    </svg>
                    <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200">Receipt Email Template</h2>
                </div>
                <a href="{{ route('admin.campaigns.edit', $campaign) }}" class="text-xs text-blue-600 hover:underline">
                    {{ $campaign->selectedEmailTemplate ? 'Change Template' : 'Set Template' }}
                </a>
            </div>
            @if ($campaign->selectedEmailTemplate)
                <div
                    class="text-sm text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700/50 p-4 rounded-md border border-gray-200 dark:border-gray-600 shadow-sm">
                    <p class="font-semibold text-gray-800 dark:text-gray-100">{{ $campaign->selectedEmailTemplate->name }}
                    </p>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Subject:
                        {{ $campaign->selectedEmailTemplate->subject_template }}</p>
                </div>
            @else
                <p class="text-sm text-gray-500 dark:text-gray-400 italic">Default system email will be used for receipts.
                </p>
            @endif
        </div>


        {{-- Associated Products Section --}}
        <div class="mt-8 pt-6 border-t border-gray-200">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold text-gray-700">Associated Products</h2>
                <a href="{{ route('admin.campaigns.products.edit', $campaign) }}"
                    class="inline-flex items-center px-3 py-1 border border-transparent shadow-sm text-xs font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">Manage
                    Products</a>
            </div>

            {{-- Display currently associated products --}}
            {{-- Ensure $campaign->products is loaded --}}
            @php $campaign->loadMissing('products'); @endphp
            @if ($campaign->products->count() > 0)
                <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8 gap-4">
                    @foreach ($campaign->products as $product)
                        <div class="border rounded-md p-2 text-center text-sm bg-gray-50 hover:shadow-lg transition-shadow">
                            <a href="{{ route('admin.products.show', $product) }}" class="group"
                                title="{{ $product->name }}">
                                <div
                                    class="h-16 w-16 mx-auto rounded bg-white mb-1 flex items-center justify-center overflow-hidden border group-hover:border-indigo-300">
                                    @if ($product->image_url)
                                        <img src="{{ $product->image_url }}" alt="{{ $product->name }}"
                                            class="max-h-full max-w-full object-contain">
                                    @else
                                        {{-- Product Placeholder Icon --}}
                                        <svg class="h-8 w-8 text-gray-300" xmlns="http://www.w3.org/2000/svg"
                                            fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round"
                                                d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                                        </svg>
                                    @endif
                                </div>
                                <span
                                    class="block text-xs text-gray-700 group-hover:text-indigo-600 line-clamp-2 leading-tight">{{ $product->name }}</span>
                            </a>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-sm text-gray-500 italic">No products are currently associated with this campaign.</p>
            @endif
        </div>


    </div> {{-- End Main Content Container --}}
@endsection