@section("title", "BizMan | Sales Pipeline")

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Sales Pipeline') }}
        </h2>
        <p class="text-gray-500 text-sm">{{ date('l, d M Y') }}</p>
    </x-slot>

    <div>
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="flex max-sm:gap-2 items-center justify-between mb-6">
                <div class="flex flex-col gap-1">
                    <p class="font-semibold text-3xl max-sm:text-2xl text-black">Sales Pipeline</p>
                    <p class="text-gray-600">Kelola deal dan prospek penjualan</p>
                </div>
                <a href="{{ route('deals.create') }}"
                    class="bg-blue-500 whitespace-nowrap hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                    </svg>
                    Tambah Deal
                </a>
            </div>

            @if (session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                    {{ session('error') }}
                </div>
            @endif

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <!-- Lead Column -->
                <div class="flex flex-col">
                    <div class="bg-gray-200 rounded-t-lg p-4">
                        <h3 class="font-bold text-lg text-gray-800">Lead</h3>
                        <p class="text-sm text-gray-600">
                            {{ $totals['lead']['count'] }} deals • Rp {{ number_format($totals['lead']['value'], 0, ',', '.') }}
                        </p>
                    </div>
                    <div class="bg-gray-50 p-4 flex flex-col gap-4 min-h-[500px] rounded-b-lg">
                        @forelse ($pipeline['lead'] as $deal)
                            <div class="bg-white rounded-lg shadow p-4 hover:shadow-md transition">
                                <h4 class="font-semibold text-gray-800 mb-2">{{ $deal->title }}</h4>
                                
                                <div class="flex items-center gap-2 text-sm text-gray-600 mb-1">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                    </svg>
                                    <span>{{ $deal->client_name }}</span>
                                </div>

                                <div class="flex items-center gap-2 text-sm text-gray-600 mb-3">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span class="font-semibold">{{ $deal->formatted_value }}</span>
                                </div>

                                @if($deal->category)
                                <div class="mb-3">
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                        {{ $deal->category }}
                                    </span>
                                </div>
                                @endif

                                <div class="flex gap-2 mb-2">
                                    <form action="{{ route('deals.update-stage', $deal) }}" method="POST" class="flex-1 won-form-{{ $deal->id }}">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="stage" value="won">
                                        <button type="button" onclick="confirmWon({{ $deal->id }}, '{{ addslashes($deal->title) }}')"
                                            class="w-full bg-green-500 hover:bg-green-600 text-white text-sm font-semibold py-2 px-3 rounded flex items-center justify-center gap-1">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                            </svg>
                                            Won
                                        </button>
                                    </form>
                                    <form action="{{ route('deals.update-stage', $deal) }}" method="POST" class="flex-1 lost-form-{{ $deal->id }}">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="stage" value="lost">
                                        <button type="button" onclick="confirmLost({{ $deal->id }}, '{{ addslashes($deal->title) }}')"
                                            class="w-full bg-red-500 hover:bg-red-600 text-white text-sm font-semibold py-2 px-3 rounded flex items-center justify-center gap-1">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                            </svg>
                                            Lost
                                        </button>
                                    </form>
                                </div>
                                
                                <!-- Move Stage Button -->
                                <div class="relative" x-data="{ open: false }">
                                    <button @click="open = !open" type="button"
                                        class="w-full bg-blue-500 hover:bg-blue-600 text-white text-sm font-semibold py-2 px-3 rounded flex items-center justify-center gap-1">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                                        </svg>
                                        Move to...
                                    </button>
                                    <div x-show="open" @click.away="open = false" 
                                         class="absolute bottom-full mb-1 left-0 w-full bg-white border border-gray-300 rounded-md shadow-lg z-10">
                                        @if($deal->stage !== 'proposal')
                                        <form action="{{ route('deals.update-stage', $deal) }}" method="POST" class="move-form-{{ $deal->id }}-proposal">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="stage" value="proposal">
                                            <button type="button" onclick="confirmMove({{ $deal->id }}, '{{ addslashes($deal->title) }}', 'proposal', 'Proposal')"
                                                class="w-full text-left px-4 py-2 hover:bg-yellow-50 text-sm text-gray-700 hover:text-yellow-700">
                                                → Proposal
                                            </button>
                                        </form>
                                        @endif
                                        @if($deal->stage !== 'negotiation')
                                        <form action="{{ route('deals.update-stage', $deal) }}" method="POST" class="move-form-{{ $deal->id }}-negotiation">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="stage" value="negotiation">
                                            <button type="button" onclick="confirmMove({{ $deal->id }}, '{{ addslashes($deal->title) }}', 'negotiation', 'Negotiation')"
                                                class="w-full text-left px-4 py-2 hover:bg-orange-50 text-sm text-gray-700 hover:text-orange-700">
                                                → Negotiation
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center text-gray-400 py-8">
                                <p>No deals in this stage</p>
                            </div>
                        @endforelse
                    </div>
                </div>

                <!-- Proposal Column -->
                <div class="flex flex-col">
                    <div class="bg-yellow-200 rounded-t-lg p-4">
                        <h3 class="font-bold text-lg text-yellow-900">Proposal</h3>
                        <p class="text-sm text-yellow-800">
                            {{ $totals['proposal']['count'] }} deals • Rp {{ number_format($totals['proposal']['value'], 0, ',', '.') }}
                        </p>
                    </div>
                    <div class="bg-yellow-50 p-4 flex flex-col gap-4 min-h-[500px] rounded-b-lg">
                        @forelse ($pipeline['proposal'] as $deal)
                            <div class="bg-white rounded-lg shadow p-4 hover:shadow-md transition">
                                <h4 class="font-semibold text-gray-800 mb-2">{{ $deal->title }}</h4>
                                
                                <div class="flex items-center gap-2 text-sm text-gray-600 mb-1">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                    </svg>
                                    <span>{{ $deal->client_name }}</span>
                                </div>

                                <div class="flex items-center gap-2 text-sm text-gray-600 mb-3">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span class="font-semibold">{{ $deal->formatted_value }}</span>
                                </div>

                                @if($deal->category)
                                <div class="mb-3">
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                        {{ $deal->category }}
                                    </span>
                                </div>
                                @endif

                                <div class="flex gap-2 mb-2">
                                    <form action="{{ route('deals.update-stage', $deal) }}" method="POST" class="flex-1 won-form-{{ $deal->id }}">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="stage" value="won">
                                        <button type="button" onclick="confirmWon({{ $deal->id }}, '{{ addslashes($deal->title) }}')"
                                            class="w-full bg-green-500 hover:bg-green-600 text-white text-sm font-semibold py-2 px-3 rounded flex items-center justify-center gap-1">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                            </svg>
                                            Won
                                        </button>
                                    </form>
                                    <form action="{{ route('deals.update-stage', $deal) }}" method="POST" class="flex-1 lost-form-{{ $deal->id }}">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="stage" value="lost">
                                        <button type="button" onclick="confirmLost({{ $deal->id }}, '{{ addslashes($deal->title) }}')"
                                            class="w-full bg-red-500 hover:bg-red-600 text-white text-sm font-semibold py-2 px-3 rounded flex items-center justify-center gap-1">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                            </svg>
                                            Lost
                                        </button>
                                    </form>
                                </div>
                                
                                <!-- Move Stage Button -->
                                <div class="relative" x-data="{ open: false }">
                                    <button @click="open = !open" type="button"
                                        class="w-full bg-blue-500 hover:bg-blue-600 text-white text-sm font-semibold py-2 px-3 rounded flex items-center justify-center gap-1">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                                        </svg>
                                        Move to...
                                    </button>
                                    <div x-show="open" @click.away="open = false" 
                                         class="absolute bottom-full mb-1 left-0 w-full bg-white border border-gray-300 rounded-md shadow-lg z-10">
                                        @if($deal->stage !== 'lead')
                                        <form action="{{ route('deals.update-stage', $deal) }}" method="POST" class="move-form-{{ $deal->id }}-lead">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="stage" value="lead">
                                            <button type="button" onclick="confirmMove({{ $deal->id }}, '{{ addslashes($deal->title) }}', 'lead', 'Lead')"
                                                class="w-full text-left px-4 py-2 hover:bg-gray-50 text-sm text-gray-700">
                                                → Lead
                                            </button>
                                        </form>
                                        @endif
                                        @if($deal->stage !== 'negotiation')
                                        <form action="{{ route('deals.update-stage', $deal) }}" method="POST" class="move-form-{{ $deal->id }}-negotiation">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="stage" value="negotiation">
                                            <button type="button" onclick="confirmMove({{ $deal->id }}, '{{ addslashes($deal->title) }}', 'negotiation', 'Negotiation')"
                                                class="w-full text-left px-4 py-2 hover:bg-orange-50 text-sm text-gray-700 hover:text-orange-700">
                                                → Negotiation
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center text-gray-400 py-8">
                                <p>No deals in this stage</p>
                            </div>
                        @endforelse
                    </div>
                </div>

                <!-- Negotiation Column -->
                <div class="flex flex-col">
                    <div class="bg-orange-200 rounded-t-lg p-4">
                        <h3 class="font-bold text-lg text-orange-900">Negotiation</h3>
                        <p class="text-sm text-orange-800">
                            {{ $totals['negotiation']['count'] }} deals • Rp {{ number_format($totals['negotiation']['value'], 0, ',', '.') }}
                        </p>
                    </div>
                    <div class="bg-orange-50 p-4 flex flex-col gap-4 min-h-[500px] rounded-b-lg">
                        @forelse ($pipeline['negotiation'] as $deal)
                            <div class="bg-white rounded-lg shadow p-4 hover:shadow-md transition">
                                <h4 class="font-semibold text-gray-800 mb-2">{{ $deal->title }}</h4>
                                
                                <div class="flex items-center gap-2 text-sm text-gray-600 mb-1">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                    </svg>
                                    <span>{{ $deal->client_name }}</span>
                                </div>

                                <div class="flex items-center gap-2 text-sm text-gray-600 mb-3">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span class="font-semibold">{{ $deal->formatted_value }}</span>
                                </div>

                                @if($deal->category)
                                <div class="mb-3">
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">
                                        {{ $deal->category }}
                                    </span>
                                </div>
                                @endif

                                <div class="flex gap-2 mb-2">
                                    <form action="{{ route('deals.update-stage', $deal) }}" method="POST" class="flex-1 won-form-{{ $deal->id }}">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="stage" value="won">
                                        <button type="button" onclick="confirmWon({{ $deal->id }}, '{{ addslashes($deal->title) }}')"
                                            class="w-full bg-green-500 hover:bg-green-600 text-white text-sm font-semibold py-2 px-3 rounded flex items-center justify-center gap-1">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                            </svg>
                                            Won
                                        </button>
                                    </form>
                                    <form action="{{ route('deals.update-stage', $deal) }}" method="POST" class="flex-1 lost-form-{{ $deal->id }}">
                                        @csrf
                                        @method('PATCH')
                                        <input type="hidden" name="stage" value="lost">
                                        <button type="button" onclick="confirmLost({{ $deal->id }}, '{{ addslashes($deal->title) }}')"
                                            class="w-full bg-red-500 hover:bg-red-600 text-white text-sm font-semibold py-2 px-3 rounded flex items-center justify-center gap-1">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                            </svg>
                                            Lost
                                        </button>
                                    </form>
                                </div>
                                
                                <!-- Move Stage Button -->
                                <div class="relative" x-data="{ open: false }">
                                    <button @click="open = !open" type="button"
                                        class="w-full bg-blue-500 hover:bg-blue-600 text-white text-sm font-semibold py-2 px-3 rounded flex items-center justify-center gap-1">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
                                        </svg>
                                        Move to...
                                    </button>
                                    <div x-show="open" @click.away="open = false" 
                                         class="absolute bottom-full mb-1 left-0 w-full bg-white border border-gray-300 rounded-md shadow-lg z-10">
                                        @if($deal->stage !== 'lead')
                                        <form action="{{ route('deals.update-stage', $deal) }}" method="POST" class="move-form-{{ $deal->id }}-lead">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="stage" value="lead">
                                            <button type="button" onclick="confirmMove({{ $deal->id }}, '{{ addslashes($deal->title) }}', 'lead', 'Lead')"
                                                class="w-full text-left px-4 py-2 hover:bg-gray-50 text-sm text-gray-700">
                                                → Lead
                                            </button>
                                        </form>
                                        @endif
                                        @if($deal->stage !== 'proposal')
                                        <form action="{{ route('deals.update-stage', $deal) }}" method="POST" class="move-form-{{ $deal->id }}-proposal">
                                            @csrf
                                            @method('PATCH')
                                            <input type="hidden" name="stage" value="proposal">
                                            <button type="button" onclick="confirmMove({{ $deal->id }}, '{{ addslashes($deal->title) }}', 'proposal', 'Proposal')"
                                                class="w-full text-left px-4 py-2 hover:bg-yellow-50 text-sm text-gray-700 hover:text-yellow-700">
                                                → Proposal
                                            </button>
                                        </form>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center text-gray-400 py-8">
                                <p>No deals in this stage</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            function confirmWon(dealId, dealTitle) {
                Swal.fire({
                    title: 'Deal Won!',
                    html: `Apakah Anda yakin deal <strong>"${dealTitle}"</strong> berhasil dimenangkan?<br><br><small class="text-gray-600">Sistem akan otomatis membuat data Customer dan Quotation.</small>`,
                    icon: 'success',
                    showCancelButton: true,
                    confirmButtonColor: '#10b981',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Ya, Deal Won!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.querySelector('.won-form-' + dealId).submit();
                    }
                });
            }

            function confirmLost(dealId, dealTitle) {
                Swal.fire({
                    title: 'Deal Lost?',
                    html: `Apakah Anda yakin deal <strong>"${dealTitle}"</strong> gagal/hilang?<br><br><small class="text-gray-600">Deal akan dipindahkan ke status Lost.</small>`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Ya, Deal Lost',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.querySelector('.lost-form-' + dealId).submit();
                    }
                });
            }

            function confirmMove(dealId, dealTitle, targetStage, targetStageName) {
                Swal.fire({
                    title: 'Pindahkan Deal?',
                    html: `Apakah Anda yakin ingin memindahkan deal <strong>"${dealTitle}"</strong> ke stage <strong>${targetStageName}</strong>?`,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3b82f6',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Ya, Pindahkan!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        document.querySelector('.move-form-' + dealId + '-' + targetStage).submit();
                    }
                });
            }
        </script>
    @endpush
</x-app-layout>