@extends('layouts.app')
@section('page-title','Leads')
@section('page-subtitle','Manage and track all your leads')

@section('content')
{{-- Filter Bar --}}
<div class="card" style="margin-bottom:16px">
    <div class="card-body" style="padding:14px 20px">
        <form method="GET" class="filter-bar">
            <div class="search-input">
                <i class="fas fa-search"></i>
                <input type="text" name="search" class="form-control" placeholder="Search name, phone, lead#..." value="{{ request('search') }}" style="width:260px">
            </div>
            <select name="status" class="form-control" style="width:150px">
                <option value="">All Status</option>
                @foreach(['hot','warm','cold','not_interested','closed'] as $s)
                <option value="{{ $s }}" {{ request('status')===$s?'selected':'' }}>{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                @endforeach
            </select>
            <select name="source" class="form-control" style="width:150px">
                <option value="">All Sources</option>
                @foreach(['facebook','website','phone','referral','walk_in'] as $s)
                <option value="{{ $s }}" {{ request('source')===$s?'selected':'' }}>{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn btn-secondary"><i class="fas fa-filter"></i> Filter</button>
            <a href="{{ route('leads.index') }}" class="btn btn-secondary">Clear</a>
            <div style="margin-left:auto;display:flex;gap:8px">
                @if(auth()->user()->isAdmin())
                <button type="button" class="btn btn-secondary" onclick="openModal('importModal')"><i class="fas fa-upload"></i> Import CSV</button>
                @endif
                <button type="button" class="btn btn-primary" onclick="openModal('addLeadModal')"><i class="fas fa-plus"></i> New Lead</button>
            </div>
        </form>
    </div>
</div>

{{-- Leads Table --}}
<div class="card">
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Lead #</th><th>Customer</th><th>Contact</th><th>Area</th>
                    <th>Status</th><th>Source</th><th>Assigned To</th><th>Created</th><th></th>
                </tr>
            </thead>
            <tbody>
            @forelse($leads as $lead)
            <tr>
                <td><a href="{{ route('leads.show',$lead) }}" style="color:#2563eb;font-weight:600;text-decoration:none">{{ $lead->lead_number }}</a></td>
                <td>
                    <div style="font-weight:500">{{ $lead->customer_name }}</div>
                    @if($lead->email)<div style="font-size:12px;color:#64748b">{{ $lead->email }}</div>@endif
                </td>
                <td>
                    <div style="font-size:13px">{{ $lead->phone }}</div>
                    @if($lead->area)<div style="font-size:12px;color:#64748b">{{ $lead->area }}</div>@endif
                </td>
                <td style="color:#64748b;font-size:13px">{{ $lead->area ?? '—' }}</td>
                <td><span class="badge badge-{{ $lead->status }}">{{ ucfirst(str_replace('_',' ',$lead->status)) }}</span></td>
                <td style="font-size:12px;color:#64748b">{{ ucfirst(str_replace('_',' ',$lead->source)) }}</td>
                <td style="font-size:13px">{{ $lead->assignedTo?->full_name ?? '—' }}</td>
                <td style="font-size:12px;color:#64748b;white-space:nowrap">{{ $lead->created_at->format('d M Y') }}</td>
                <td>
                    <div class="dropdown">
                        <button class="btn btn-secondary btn-sm btn-icon" data-dropdown><i class="fas fa-ellipsis-h"></i></button>
                        <div class="dropdown-menu">
                            <a href="{{ route('leads.show',$lead) }}" class="dropdown-item"><i class="fas fa-eye"></i> View</a>
                            <button class="dropdown-item" onclick="editLead({{ $lead->toJson() }})"><i class="fas fa-edit"></i> Edit</button>
                            <button class="dropdown-item" onclick="addFollowUp({{ $lead->id }}, '{{ $lead->customer_name }}')"><i class="fas fa-calendar-plus"></i> Follow-up</button>
                            @if(auth()->user()->isAdmin() || auth()->user()->isManager())
                            <button class="dropdown-item" onclick="assignLead({{ $lead->id }}, '{{ $lead->customer_name }}')"><i class="fas fa-user-plus"></i> Assign</button>
                            @endif
                            <button class="dropdown-item" onclick="changeStatus({{ $lead->id }}, '{{ $lead->status }}')"><i class="fas fa-exchange-alt"></i> Change Status</button>
                            <div class="dropdown-divider"></div>
                            @if(auth()->user()->isAdmin())
                            <form method="POST" action="{{ route('leads.destroy',$lead) }}" onsubmit="return confirm('Delete this lead?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="dropdown-item danger"><i class="fas fa-trash"></i> Delete</button>
                            </form>
                            @endif
                        </div>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="9" style="text-align:center;padding:40px;color:#94a3b8">No leads found. <button onclick="openModal('addLeadModal')" style="background:none;border:none;color:#2563eb;cursor:pointer;font-size:13px">Add your first lead →</button></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div class="pagination">
        {{ $leads->links('vendor.pagination.simple') }}
    </div>
</div>

{{-- Add Lead Modal --}}
<div class="modal-overlay" id="addLeadModal">
    <div class="modal" style="max-width:680px">
        <div class="modal-header">
            <h3>Add New Lead</h3>
            <button class="modal-close" onclick="closeModal('addLeadModal')">×</button>
        </div>
        <form method="POST" action="{{ route('leads.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group"><label>Customer Name *</label><input type="text" name="customer_name" class="form-control" required></div>
                    <div class="form-group"><label>Phone *</label><input type="text" name="phone" class="form-control" required></div>
                </div>
                <div class="form-row">
                    <div class="form-group"><label>Email</label><input type="email" name="email" class="form-control"></div>
                    <div class="form-group"><label>Area</label>
                        <input list="area-list" name="area" class="form-control" placeholder="Type or select area">
                        <datalist id="area-list">@foreach($areas as $a)<option value="{{ $a }}">@endforeach</datalist>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group"><label>Property Type</label>
                        <select name="property_type" class="form-control">
                            <option value="">Select type</option>
                            <option value="land">Land</option>
                            <option value="land_share">Land Share</option>
                            <option value="commercial_plot">Commercial Plot</option>
                        </select>
                    </div>
                    <div class="form-group"><label>Sub Type</label>
                        <select name="property_sub_type" class="form-control">
                            <option value="">Select sub type</option>
                            <option value="ready">Ready</option>
                            <option value="ongoing">Ongoing</option>
                            <option value="installment">Installment</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group"><label>Budget Min (৳)</label><input type="number" name="budget_min" class="form-control"></div>
                    <div class="form-group"><label>Budget Max (৳)</label><input type="number" name="budget_max" class="form-control"></div>
                </div>
                <div class="form-row">
                    <div class="form-group"><label>Source *</label>
                        <select name="source" class="form-control" required>
                            <option value="phone">Phone</option>
                            <option value="facebook">Facebook</option>
                            <option value="website">Website</option>
                            <option value="referral">Referral</option>
                            <option value="walk_in">Walk-in</option>
                        </select>
                    </div>
                    <div class="form-group"><label>Block / Road</label><input type="text" name="block_road" class="form-control"></div>
                </div>
                <div class="form-group"><label>Notes</label><textarea name="notes" class="form-control" rows="3"></textarea></div>
                <div class="form-row" style="border-top:1px solid #f1f5f9;padding-top:16px;margin-top:4px">
                    <div class="form-group"><label>Initial Follow-up Date</label><input type="datetime-local" name="followup_date" class="form-control"></div>
                    <div class="form-group"><label>Follow-up Type</label>
                        <select name="followup_type" class="form-control">
                            <option value="call">Call</option>
                            <option value="visit">Visit</option>
                            <option value="message">Message</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('addLeadModal')">Cancel</button>
                <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i> Add Lead</button>
            </div>
        </form>
    </div>
</div>

{{-- Edit Lead Modal --}}
<div class="modal-overlay" id="editLeadModal">
    <div class="modal" style="max-width:680px">
        <div class="modal-header">
            <h3>Edit Lead</h3>
            <button class="modal-close" onclick="closeModal('editLeadModal')">×</button>
        </div>
        <form method="POST" id="editLeadForm">
            @csrf @method('PUT')
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group"><label>Customer Name *</label><input type="text" name="customer_name" id="edit_customer_name" class="form-control" required></div>
                    <div class="form-group"><label>Phone *</label><input type="text" name="phone" id="edit_phone" class="form-control" required></div>
                </div>
                <div class="form-row">
                    <div class="form-group"><label>Email</label><input type="email" name="email" id="edit_email" class="form-control"></div>
                    <div class="form-group"><label>Area</label><input list="area-list" name="area" id="edit_area" class="form-control"></div>
                </div>
                <div class="form-row">
                    <div class="form-group"><label>Budget Min</label><input type="number" name="budget_min" id="edit_budget_min" class="form-control"></div>
                    <div class="form-group"><label>Budget Max</label><input type="number" name="budget_max" id="edit_budget_max" class="form-control"></div>
                </div>
                <div class="form-group"><label>Notes</label><textarea name="notes" id="edit_notes" class="form-control" rows="3"></textarea></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('editLeadModal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
        </form>
    </div>
</div>

{{-- Change Status Modal --}}
<div class="modal-overlay" id="statusModal">
    <div class="modal" style="max-width:380px">
        <div class="modal-header"><h3>Change Status</h3><button class="modal-close" onclick="closeModal('statusModal')">×</button></div>
        <form method="POST" id="statusForm">@csrf @method('POST')
            <div class="modal-body">
                <div class="form-group"><label>New Status</label>
                    <select name="status" class="form-control" id="statusSelect">
                        <option value="hot">🔥 Hot</option>
                        <option value="warm">🌡 Warm</option>
                        <option value="cold">❄️ Cold</option>
                        <option value="not_interested">👎 Not Interested</option>
                        <option value="closed">✅ Closed</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('statusModal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </form>
    </div>
</div>

{{-- Assign Modal --}}
<div class="modal-overlay" id="assignModal">
    <div class="modal" style="max-width:380px">
        <div class="modal-header"><h3>Assign Salesman</h3><button class="modal-close" onclick="closeModal('assignModal')">×</button></div>
        <form method="POST" id="assignForm">@csrf
            <div class="modal-body">
                <div class="form-group"><label>Select Salesman</label>
                    <select name="assigned_to" class="form-control">
                        @foreach($salesmen as $s)<option value="{{ $s->id }}">{{ $s->full_name }}</option>@endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('assignModal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Assign</button>
            </div>
        </form>
    </div>
</div>

{{-- Follow-up Modal --}}
<div class="modal-overlay" id="followUpModal">
    <div class="modal" style="max-width:420px">
        <div class="modal-header"><h3>Add Follow-Up</h3><button class="modal-close" onclick="closeModal('followUpModal')">×</button></div>
        <form method="POST" action="{{ route('follow-ups.store') }}">@csrf
            <input type="hidden" name="lead_id" id="fu_lead_id">
            <div class="modal-body">
                <div class="form-group"><label>Follow-up Type</label>
                    <select name="followup_type" class="form-control">
                        <option value="call">📞 Call</option>
                        <option value="visit">🏠 Visit</option>
                        <option value="message">💬 Message</option>
                    </select>
                </div>
                <div class="form-group"><label>Scheduled At *</label><input type="datetime-local" name="scheduled_at" class="form-control" required></div>
                <div class="form-group"><label>Notes</label><textarea name="notes" class="form-control" rows="3"></textarea></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('followUpModal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Schedule</button>
            </div>
        </form>
    </div>
</div>

{{-- Import Modal --}}
<div class="modal-overlay" id="importModal">
    <div class="modal" style="max-width:400px">
        <div class="modal-header"><h3>Import Leads (CSV)</h3><button class="modal-close" onclick="closeModal('importModal')">×</button></div>
        <form method="POST" action="{{ route('leads.import') }}" enctype="multipart/form-data">@csrf
            <div class="modal-body">
                <p style="font-size:13px;color:#64748b;margin-bottom:16px">CSV columns: <code>customer_name, phone, email, area, source, status, notes</code></p>
                <div class="form-group"><label>CSV File</label><input type="file" name="file" class="form-control" accept=".csv,.txt" required></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('importModal')">Cancel</button>
                <button type="submit" class="btn btn-primary"><i class="fas fa-upload"></i> Import</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function editLead(lead) {
    document.getElementById('editLeadForm').action = '/leads/' + lead.id;
    document.getElementById('edit_customer_name').value = lead.customer_name || '';
    document.getElementById('edit_phone').value = lead.phone || '';
    document.getElementById('edit_email').value = lead.email || '';
    document.getElementById('edit_area').value = lead.area || '';
    document.getElementById('edit_budget_min').value = lead.budget_min || '';
    document.getElementById('edit_budget_max').value = lead.budget_max || '';
    document.getElementById('edit_notes').value = lead.notes || '';
    openModal('editLeadModal');
}

function changeStatus(leadId, currentStatus) {
    document.getElementById('statusForm').action = '/leads/' + leadId + '/status';
    document.getElementById('statusSelect').value = currentStatus;
    openModal('statusModal');
}

function assignLead(leadId, name) {
    document.getElementById('assignForm').action = '/leads/' + leadId + '/assign';
    openModal('assignModal');
}

function addFollowUp(leadId, name) {
    document.getElementById('fu_lead_id').value = leadId;
    openModal('followUpModal');
}
</script>
@endpush
@endsection