@extends('layouts.app')

@section('title', 'Channel Manager')
@section('nav_channels', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Channel Manager')
@section('page_subtitle', 'Booking source performance & rate mapping')

@section('content')

@if(session('success'))
<div class="mb-5 flex items-center gap-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl px-5 py-3.5">
    <svg class="w-4 h-4 text-teal-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <p class="text-teal-700 text-sm font-medium">{{ session('success') }}</p>
</div>
@endif

{{-- ===== SUMMARY TILES ===== --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Active Channels</p>
        <p class="text-gray-900 font-bold text-2xl mt-1">{{ $summary['total_sources'] }}</p>
        <p class="text-gray-400 text-xs mt-1">booking sources</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Total Bookings</p>
        <p class="text-gray-900 font-bold text-2xl mt-1">{{ number_format($summary['total_bookings']) }}</p>
        <p class="text-gray-400 text-xs mt-1">confirmed reservations</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Total Revenue</p>
        <p class="text-teal-700 font-bold text-2xl mt-1">₱{{ number_format($summary['total_revenue'], 0) }}</p>
        <p class="text-gray-400 text-xs mt-1">across all channels</p>
    </div>
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-4">
        <p class="text-gray-400 text-xs">Top Channel</p>
        <p class="text-gray-900 font-bold text-lg mt-1 truncate">{{ $summary['top_source'] }}</p>
        <p class="text-gray-400 text-xs mt-1">by booking count</p>
    </div>
</div>

<div class="grid grid-cols-1 xl:grid-cols-5 gap-5">

    {{-- ===== LEFT: PERFORMANCE TABLE (3/5) ===== --}}
    <div class="xl:col-span-3">
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100">
                <h2 class="text-sm font-semibold text-gray-700">Source Performance</h2>
                <p class="text-xs text-gray-400 mt-0.5">All-time bookings excluding cancelled & no-show</p>
            </div>
            @if($stats->isEmpty())
            <p class="px-5 py-10 text-center text-gray-300 text-sm">No reservation data yet.</p>
            @else
            <div class="overflow-x-auto">
            <table class="w-full text-sm min-w-[540px]">
                <thead>
                    <tr class="border-b border-gray-100">
                        <th class="px-5 py-3 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Channel</th>
                        <th class="px-4 py-3 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Bookings</th>
                        <th class="px-4 py-3 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Revenue</th>
                        <th class="px-4 py-3 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Avg Stay</th>
                        <th class="px-5 py-3 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider w-28">Share</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($stats as $row)
                    @php
                        $share = $totalConfirmed > 0 ? round($row->confirmed_count / $totalConfirmed * 100, 1) : 0;
                        $cfg   = $configs->get($row->source);
                    @endphp
                    <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/50 transition-colors">
                        <td class="px-5 py-3.5">
                            <div class="flex items-center gap-2">
                                @php
                                $icons = [
                                    'Booking.com'    => '🔵',
                                    'Agoda'          => '🟠',
                                    'Airbnb'         => '🔴',
                                    'Expedia'        => '🟡',
                                    'Walk-in'        => '🚶',
                                    'Direct (Phone)' => '📞',
                                    'Website'        => '🌐',
                                    'Travel Agent'   => '✈️',
                                    'Corporate'      => '🏢',
                                ];
                                @endphp
                                <span class="text-base leading-none">{{ $icons[$row->source] ?? '📋' }}</span>
                                <div>
                                    <p class="text-gray-800 font-medium">{{ $row->source }}</p>
                                    @if($cfg?->ratePlan)
                                    <p class="text-gray-400 text-[10px]">{{ $cfg->ratePlan->code }} — {{ $cfg->ratePlan->modifierLabel() }}</p>
                                    @else
                                    <p class="text-gray-300 text-[10px]">Rack rate</p>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3.5 text-right">
                            <p class="text-gray-800 font-semibold">{{ number_format($row->confirmed_count) }}</p>
                            @if($row->total_reservations != $row->confirmed_count)
                            <p class="text-gray-300 text-[10px]">{{ $row->total_reservations }} total</p>
                            @endif
                        </td>
                        <td class="px-4 py-3.5 text-right">
                            <p class="text-gray-800 font-semibold">₱{{ number_format($row->confirmed_revenue, 0) }}</p>
                            @if($row->confirmed_count > 0)
                            <p class="text-gray-400 text-[10px]">₱{{ number_format($row->confirmed_revenue / max(1,$row->confirmed_count), 0) }} avg</p>
                            @endif
                        </td>
                        <td class="px-4 py-3.5 text-right text-gray-600">
                            {{ number_format($row->avg_nights, 1) }}n
                        </td>
                        <td class="px-5 py-3.5">
                            <div class="flex items-center gap-2">
                                <div class="flex-1 bg-gray-100 rounded-full h-1.5">
                                    <div class="bg-teal-500 h-1.5 rounded-full" style="width: {{ $share }}%"></div>
                                </div>
                                <span class="text-gray-500 text-xs w-9 text-right">{{ $share }}%</span>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            </div>
            @endif
        </div>
    </div>

    {{-- ===== RIGHT: RATE MAPPING (2/5) ===== --}}
    <div class="xl:col-span-2 space-y-3">

        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100">
                <h2 class="text-sm font-semibold text-gray-700">Rate Mapping</h2>
                <p class="text-xs text-gray-400 mt-0.5">Default rate plan applied per channel when creating reservations</p>
            </div>

            <div class="divide-y divide-gray-50">
                @foreach($allSources as $source)
                @php $cfg = $configs->get($source); @endphp
                <div class="px-5 py-3" x-data="{ open: false }">
                    <div class="flex items-center justify-between gap-3">
                        <div class="flex items-center gap-2 min-w-0">
                            @php
                            $icons = ['Booking.com'=>'🔵','Agoda'=>'🟠','Airbnb'=>'🔴','Expedia'=>'🟡','Walk-in'=>'🚶','Direct (Phone)'=>'📞','Website'=>'🌐','Travel Agent'=>'✈️','Corporate'=>'🏢'];
                            @endphp
                            <span class="text-sm leading-none flex-shrink-0">{{ $icons[$source] ?? '📋' }}</span>
                            <p class="text-gray-700 text-sm font-medium truncate">{{ $source }}</p>
                        </div>
                        <div class="flex items-center gap-2 flex-shrink-0">
                            @if($cfg?->ratePlan)
                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-blue-50 text-blue-700 border-[0.5px] border-blue-200">
                                {{ $cfg->ratePlan->code }}
                            </span>
                            @else
                            <span class="text-gray-300 text-[10px]">Rack</span>
                            @endif
                            <button type="button" @click="open = !open"
                                    class="text-gray-400 hover:text-teal-600 transition-colors p-0.5">
                                <svg class="w-3.5 h-3.5 transition-transform" :class="open ? 'rotate-180' : ''"
                                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div x-show="open" x-cloak class="mt-3">
                        <form method="POST" action="{{ route('channel-manager.mapping') }}">
                            @csrf
                            <input type="hidden" name="source" value="{{ $source }}">
                            <input type="hidden" name="active" value="1">

                            <div class="mb-2">
                                <label class="block text-[10px] font-semibold text-gray-400 mb-1">Rate Plan</label>
                                <select name="rate_plan_id"
                                        class="w-full text-xs border-[0.5px] border-gray-200 rounded-lg px-2.5 py-1.5 text-gray-700 bg-white
                                               focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                                    <option value="">— Rack Rate (no plan) —</option>
                                    @foreach($ratePlans as $plan)
                                    <option value="{{ $plan->id }}"
                                            @selected(($cfg?->rate_plan_id) == $plan->id)>
                                        {{ $plan->name }} ({{ $plan->code }}) — {{ $plan->modifierLabel() }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="block text-[10px] font-semibold text-gray-400 mb-1">Notes</label>
                                <input type="text" name="notes" maxlength="200"
                                       value="{{ $cfg?->notes }}"
                                       placeholder="Commission rate, contract terms, etc."
                                       class="w-full text-xs border-[0.5px] border-gray-200 rounded-lg px-2.5 py-1.5 text-gray-700
                                              focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            </div>

                            <button type="submit"
                                    class="w-full py-1.5 text-xs font-semibold bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors">
                                Save
                            </button>
                        </form>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        {{-- New channel --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden" x-data="{ open: false }">
            <button type="button" @click="open = !open"
                    class="w-full px-5 py-3.5 flex items-center justify-between text-left hover:bg-gray-50 transition-colors">
                <span class="text-sm font-medium text-gray-500">+ Add Channel</span>
                <svg class="w-3.5 h-3.5 text-gray-400 transition-transform" :class="open ? 'rotate-180' : ''"
                     fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div x-show="open" x-cloak class="px-5 pb-4 border-t border-gray-100">
                <form method="POST" action="{{ route('channel-manager.mapping') }}" class="space-y-2 pt-3">
                    @csrf
                    <input type="hidden" name="active" value="1">
                    <div>
                        <label class="block text-[10px] font-semibold text-gray-400 mb-1">Channel Name</label>
                        <input type="text" name="source" required maxlength="60"
                               placeholder="e.g. TripAdvisor, Facebook"
                               class="w-full text-xs border-[0.5px] border-gray-200 rounded-lg px-2.5 py-1.5 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <div>
                        <label class="block text-[10px] font-semibold text-gray-400 mb-1">Rate Plan</label>
                        <select name="rate_plan_id"
                                class="w-full text-xs border-[0.5px] border-gray-200 rounded-lg px-2.5 py-1.5 text-gray-700 bg-white
                                       focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                            <option value="">— Rack Rate —</option>
                            @foreach($ratePlans as $plan)
                            <option value="{{ $plan->id }}">{{ $plan->name }} ({{ $plan->code }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-[10px] font-semibold text-gray-400 mb-1">Notes</label>
                        <input type="text" name="notes" maxlength="200"
                               placeholder="Optional notes"
                               class="w-full text-xs border-[0.5px] border-gray-200 rounded-lg px-2.5 py-1.5 text-gray-700
                                      focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                    </div>
                    <button type="submit"
                            class="w-full py-1.5 text-xs font-semibold bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors">
                        Add Channel
                    </button>
                </form>
            </div>
        </div>

    </div>
</div>

@endsection