{{-- resources/views/pipeline/index.blade.php --}}
@extends('layouts.app')
@section('page-title','Sales Pipeline')

@section('content')
<div style="margin-bottom:16px;display:flex;justify-content:flex-end">
    <button class="btn btn-primary" onclick="openModal('createDealModal')"><i class="fas fa-plus"></i> New Deal</button>
</div>

<div class="kanban">
@php
$stageLabels = ['lead'=>'Lead','prospect'=>'Prospect','visit_done'=>'Visit Done','negotiation'=>'Negotiation','booking'=>'Booking','sold'=>'Sold'];
$stageColors = ['lead'=>'#94a3b8','prospect'=>'#3b82f6','visit_done'=>'#8b5cf6','negotiation'=>'#f59e0b','booking'=>'#f97316','sold'=>'#22c55e'];
@endphp
@foreach($stages as $stage)
<div class="kanban-col">
    <div class="kanban-col-header">
        <span class="kanban-col-title" style="color:{{ $stageColors[$stage] }}">{{ $stageLabels[$stage] }}</span>
        <span class="kanban-count">{{ $dealsByStage[$stage]->count() }}</span>
    </div>
    @foreach($dealsByStage[$stage] as $deal)
    <div class="kanban-card">
        <div class="lead-name">{{ $deal->lead?->customer_name ?? '—' }}</div>
        <div class="lead-phone">{{ $deal->lead?->phone ?? '' }}</div>
        @if($deal->property)<div style="font-size:12px;color:#64748b;margin-top:4px"><i class="fas fa-building"></i> {{ $deal->property->title }}</div>@endif
        <div class="deal-value">{{ $deal->formatted_value }}</div>
        <div class="card-footer">
            <span style="font-size:11px;color:#94a3b8">{{ $deal->updated_at->diffForHumans() }}</span>
            <div class="dropdown">
                <button class="btn btn-secondary btn-sm btn-icon" data-dropdown style="padding:3px 7px"><i class="fas fa-ellipsis-h" style="font-size:11px"></i></button>
                <div class="dropdown-menu">
                    <button class="dropdown-item" onclick="changeStage({{ $deal->id }}, '{{ $deal->stage }}')"><i class="fas fa-exchange-alt"></i> Change Stage</button>
                    <button class="dropdown-item" onclick="editDeal({{ $deal->toJson() }})"><i class="fas fa-edit"></i> Edit</button>
                    @if(auth()->user()->isAdmin())
                    <form method="POST" action="{{ route('pipeline.destroy',$deal) }}" onsubmit="return confirm('Delete?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="dropdown-item danger"><i class="fas fa-trash"></i> Delete</button>
                    </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endforeach
</div>

{{-- Create Deal Modal --}}
<div class="modal-overlay" id="createDealModal">
    <div class="modal"><div class="modal-header"><h3>New Deal</h3><button class="modal-close" onclick="closeModal('createDealModal')">×</button></div>
    <form method="POST" action="{{ route('pipeline.store') }}">@csrf
        <div class="modal-body">
            <div class="form-group"><label>Lead *</label>
                <select name="lead_id" class="form-control" required>
                    <option value="">Select lead...</option>
                </select>
            </div>
            <div class="form-group"><label>Stage</label>
                <select name="stage" class="form-control">
                    @foreach($stageLabels as $val => $lbl)<option value="{{ $val }}">{{ $lbl }}</option>@endforeach
                </select>
            </div>
            <div class="form-group"><label>Deal Value (৳)</label><input type="number" name="deal_value" class="form-control"></div>
            <div class="form-group"><label>Property (optional)</label>
                <select name="property_id" class="form-control"><option value="">None</option></select>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeModal('createDealModal')">Cancel</button>
            <button type="submit" class="btn btn-primary">Create Deal</button>
        </div>
    </form></div>
</div>

{{-- Change Stage Modal --}}
<div class="modal-overlay" id="stageModal">
    <div class="modal" style="max-width:360px"><div class="modal-header"><h3>Change Stage</h3><button class="modal-close" onclick="closeModal('stageModal')">×</button></div>
    <form method="POST" id="stageForm">@csrf
        <div class="modal-body">
            <select name="stage" class="form-control" id="stageSelect">
                @foreach($stageLabels as $val => $lbl)<option value="{{ $val }}">{{ $lbl }}</option>@endforeach
            </select>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" onclick="closeModal('stageModal')">Cancel</button>
            <button type="submit" class="btn btn-primary">Update Stage</button>
        </div>
    </form></div>
</div>

@push('scripts')
<script>
function changeStage(id, current) {
    document.getElementById('stageForm').action = '/pipeline/'+id+'/stage';
    document.getElementById('stageSelect').value = current;
    openModal('stageModal');
}
function editDeal(deal) { /* open edit modal similarly */ }

// Load leads and properties for selects
fetch('{{ route("api.leads") }}').then(r=>r.json()).then(leads=>{
    const sel = document.querySelector('[name=lead_id]');
    leads.forEach(l => sel.innerHTML += `<option value="${l.id}">${l.lead_number} – ${l.customer_name}</option>`);
});
fetch('{{ route("api.properties") }}').then(r=>r.json()).then(props=>{
    const sel = document.querySelector('[name=property_id]');
    props.forEach(p => sel.innerHTML += `<option value="${p.id}">${p.property_number} – ${p.title}</option>`);
});
</script>
@endpush
@endsection