@extends('layouts.app')

@section('header')
    <h2 class="font-semibold text-xl text-black leading-tight">
        @trans('crm.CRM Settings') - @trans('crm.Pipelines & Stages')
    </h2>
@endsection

@section('content')
<div class="space-y-8">
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
        <h3 class="text-lg font-bold mb-4 border-b pb-2">@trans('crm.Create New Pipeline')</h3>
        <form action="{{ route('crm.settings.pipelines.store') }}" method="POST" class="flex gap-4">
            @csrf
            <div class="flex-1">
                <input type="text" name="name" required placeholder="@trans('crm.Pipeline Name (e.g., Dental, Cosmetic)')" class="rounded-md border-gray-300 w-full">
            </div>
            <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded font-bold">@trans('crm.Create Pipeline')</button>
        </form>
    </div>

    @foreach($pipelines as $pipeline)
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-6">
            <div class="flex justify-between items-center mb-6 border-b pb-2">
                <h3 class="text-xl font-bold">{{ $pipeline->name }}</h3>
                <span class="text-xs text-black">UUID: {{ $pipeline->uuid }}</span>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Stages List -->
                <div>
                    <h4 class="font-bold mb-4 text-black">@trans('crm.Stages')</h4>
                    <ul class="space-y-2">
                        @foreach($pipeline->stages as $stage)
                            <li class="flex items-center justify-between p-3 bg-gray-50 rounded border">
                                <div class="flex items-center gap-3">
                                    <div class="w-4 h-4 rounded-full" style="background-color: {{ $stage->color ?? '#3B82F6' }}"></div>
                                    <span class="font-medium">{{ $stage->name }}</span>
                                </div>
                                <div class="flex gap-2">
                                    @if($stage->is_won) <span class="text-[10px] bg-green-100 text-green-800 px-2 py-1 rounded">WON</span> @endif
                                    @if($stage->is_lost) <span class="text-[10px] bg-red-100 text-red-800 px-2 py-1 rounded">LOST</span> @endif
                                    <span class="text-xs text-black">#{{ $stage->sort_order }}</span>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <!-- Add Stage Form -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="font-bold mb-4 text-black">@trans('crm.Add Stage')</h4>
                    <form action="{{ route('crm.settings.pipelines.stages.store', $pipeline->uuid) }}" method="POST" class="space-y-4">
                        @csrf
                        <div>
                            <label class="block text-sm font-medium text-black">@trans('crm.Stage Name')</label>
                            <input type="text" name="name" required class="mt-1 block w-full rounded-md border-gray-300">
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-black">@trans('crm.Order')</label>
                                <input type="number" name="sort_order" value="{{ $pipeline->stages->count() + 1 }}" class="mt-1 block w-full rounded-md border-gray-300">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-black">@trans('crm.Color')</label>
                                <input type="color" name="color" value="#3B82F6" class="mt-1 block w-full h-10 p-1 rounded-md border-gray-300">
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <label class="flex items-center">
                                <input type="checkbox" name="is_won" value="1" class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500">
                                <span class="ml-2 text-sm text-black">@trans('crm.Won Stage')</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="is_lost" value="1" class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500">
                                <span class="ml-2 text-sm text-black">@trans('crm.Lost Stage')</span>
                            </label>
                        </div>
                        <button type="submit" class="w-full bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700">@trans('crm.Add Stage')</button>
                    </form>
                </div>
            </div>
        </div>
    @endforeach
</div>
@endsection