@extends('layouts.app')

@section('title','Leads')
@section('page_title','Leads')

@section('content')

@if(session('success'))
    <div style="background:#dcfce7;color:#166534;padding:10px;margin-bottom:15px;border-radius:6px;">
        {{ session('success') }}
    </div>
@endif

@if(session('import_result'))
    <div style="background:#eff6ff;color:#1d4ed8;padding:12px;margin-bottom:15px;border-radius:6px;">
        <b>Import Completed:</b>
        {{ session('import_result.imported') }} imported,
        {{ session('import_result.skipped') }} skipped.
    </div>
@endif

{{-- Filters --}}
<form method="GET"
      action="{{ route('leads.index') }}"
      style="background:#fff;padding:15px;border-radius:8px;margin-bottom:15px;display:flex;gap:10px;flex-wrap:wrap;align-items:end;">

    <div>
        <label>Search</label><br>
        <input type="text"
               name="search"
               value="{{ request('search') }}"
               placeholder="Company, contact, mobile, email..."
               style="padding:10px;border:1px solid #ccc;border-radius:6px;width:260px;">
    </div>

    <div>
        <label>Status</label><br>
        <select name="status" style="padding:10px;border:1px solid #ccc;border-radius:6px;">
            <option value="">All Status</option>
            @foreach(['new','contacted','interested','not_interested','interested_future','technical_discussion','project_created'] as $status)
                <option value="{{ $status }}" @selected(request('status') == $status)>
                    {{ ucwords(str_replace('_',' ', $status)) }}
                </option>
            @endforeach
        </select>
    </div>

    <div>
        <label>Follow-up</label><br>
        <select name="followup_status" style="padding:10px;border:1px solid #ccc;border-radius:6px;">
            <option value="">All</option>
            <option value="today" @selected(request('followup_status') == 'today')>Today</option>
            <option value="overdue" @selected(request('followup_status') == 'overdue')>Overdue</option>
        </select>
    </div>

    <div>
        <label>Priority</label><br>
        <select name="priority" style="padding:10px;border:1px solid #ccc;border-radius:6px;">
            <option value="">All Priority</option>
            <option value="high" @selected(request('priority') == 'high')>High</option>
            <option value="medium" @selected(request('priority') == 'medium')>Medium</option>
            <option value="low" @selected(request('priority') == 'low')>Low</option>
        </select>
    </div>

    <div>
        <label>Assigned To</label><br>
        <select name="assigned_to" style="padding:10px;border:1px solid #ccc;border-radius:6px;">
            <option value="">All Users</option>
            @foreach($users as $user)
                <option value="{{ $user->id }}" @selected(request('assigned_to') == $user->id)>
                    {{ $user->name }}
                </option>
            @endforeach
        </select>
    </div>

    <button type="submit"
            style="background:#2563eb;color:white;padding:10px 15px;border:0;border-radius:6px;">
        Filter
    </button>

    <a href="{{ route('leads.index') }}"
       style="background:#6b7280;color:white;padding:10px 15px;border-radius:6px;text-decoration:none;">
        Reset
    </a>
</form>

{{-- Top Actions --}}
<div style="background:#fff;padding:15px;border-radius:8px;margin-bottom:15px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;">

    <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
        <a href="{{ route('leads.create') }}"
           style="background:#2563eb;color:#fff;padding:10px 15px;border-radius:6px;text-decoration:none;">
            Add Lead
        </a>

        <a href="{{ route('leads.sampleDownload') }}"
           style="background:#f59e0b;color:white;padding:10px 15px;border-radius:6px;text-decoration:none;">
            Download Sample
        </a>
    </div>

    <form method="POST"
          action="{{ route('leads.import') }}"
          enctype="multipart/form-data"
          style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;">

        @csrf

        <label for="leadImportFile"
               style="background:#2563eb;color:white;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:500;">
            📂 Select Excel
        </label>

        <input type="file"
               id="leadImportFile"
               name="file"
               accept=".xlsx,.xls,.csv"
               required
               style="display:none;">

        <span id="selectedFileName" style="font-size:14px;color:#6b7280;">
            No file selected
        </span>

        <button type="submit"
                style="background:#16a34a;color:white;padding:10px 16px;border:none;border-radius:6px;cursor:pointer;">
            Import Leads
        </button>
    </form>
</div>

{{-- Bulk Actions --}}
<div style="background:#fff;padding:15px;border-radius:8px;margin-bottom:15px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;">

    <form method="POST" action="{{ route('leads.bulkChangeStatus') }}" id="bulkStatusForm">
        @csrf

        <select name="status" required style="padding:9px;border:1px solid #ccc;border-radius:4px;">
            <option value="">Bulk Status</option>
            @foreach(['new','contacted','interested','not_interested','interested_future','technical_discussion','project_created'] as $status)
                <option value="{{ $status }}">
                    {{ ucwords(str_replace('_',' ', $status)) }}
                </option>
            @endforeach
        </select>

        <button type="submit"
                style="background:#16a34a;color:white;padding:10px 15px;border-radius:6px;border:0;">
            Update
        </button>
    </form>

    <form method="POST" action="{{ route('leads.bulkSendEmail') }}" id="bulkEmailForm">
        @csrf

        <button type="submit"
                style="background:#2563eb;color:white;padding:10px 15px;border-radius:6px;border:0;">
            Send Email
        </button>
    </form>

    <form method="POST" action="{{ route('leads.bulkAssign') }}" id="bulkAssignForm">
        @csrf

        <select name="assigned_to" required style="padding:9px;border:1px solid #ccc;border-radius:4px;">
            <option value="">Assign User</option>
            @foreach($users as $user)
                <option value="{{ $user->id }}">
                    {{ $user->name }}
                </option>
            @endforeach
        </select>

        <button type="submit"
                style="background:#7c3aed;color:white;padding:10px 15px;border-radius:6px;border:0;">
            Assign
        </button>
    </form>

    <form method="POST"
          action="{{ route('leads.bulkDelete') }}"
          id="bulkDeleteForm"
          onsubmit="return confirm('Delete selected leads?')">
        @csrf

        <button type="submit"
                style="background:#dc2626;color:white;padding:10px 15px;border-radius:6px;border:0;">
            Delete Selected
        </button>
    </form>
</div>

<table style="width:100%;background:#fff;border-collapse:collapse;">
    <thead>
        <tr style="background:#e5e7eb;">
            <th style="padding:12px;">
                <input type="checkbox" id="selectAll">
            </th>
            <th style="padding:12px;text-align:left;">Company</th>
            <th style="padding:12px;text-align:left;">Contact</th>
            <th style="padding:12px;text-align:left;">Mobile</th>
            <th style="padding:12px;text-align:left;">Email</th>
            <th style="padding:12px;text-align:left;">Priority</th>
            <th style="padding:12px;text-align:left;">Status</th>
            <th style="padding:12px;text-align:left;">Follow-up</th>
            <th style="padding:12px;text-align:left;">Assigned To</th>
            <th style="padding:12px;text-align:left;">Action</th>
        </tr>
    </thead>

    <tbody>
        @forelse($leads as $lead)
            <tr style="border-bottom:1px solid #ddd;">
                <td style="padding:12px;">
                    <input type="checkbox" value="{{ $lead->id }}" class="leadCheckbox">
                </td>

                <td style="padding:12px;">{{ $lead->company_name }}</td>
                <td style="padding:12px;">{{ $lead->contact_person }}</td>
                <td style="padding:12px;">{{ $lead->mobile }}</td>
                <td style="padding:12px;">{{ $lead->email }}</td>
                <td style="padding:12px;">{{ $lead->priority ?? '-' }}</td>

                <td style="padding:12px;">
                    <form method="POST" action="{{ route('leads.changeStatus',$lead->id) }}">
                        @csrf

                        <select name="status"
                                onchange="this.form.submit()"
                                style="padding:6px;border:1px solid #ccc;border-radius:4px;">
                            @foreach(['new','contacted','interested','not_interested','interested_future','technical_discussion','project_created'] as $status)
                                <option value="{{ $status }}" @selected($lead->status == $status)>
                                    {{ ucwords(str_replace('_',' ', $status)) }}
                                </option>
                            @endforeach
                        </select>
                    </form>
                </td>

                <td style="padding:12px;">
                    @if(
                        $lead->next_followup_date &&
                        $lead->next_followup_date < now()->toDateString()
                    )

                        <span style="
                            background:#fee2e2;
                            color:#991b1b;
                            padding:4px 8px;
                            border-radius:4px;
                            font-weight:600;
                        ">
                            {{ $lead->next_followup_date }}
                        </span>

                    @elseif(
                        $lead->next_followup_date ==
                        now()->toDateString()
                    )

                        <span style="
                            background:#fef3c7;
                            color:#92400e;
                            padding:4px 8px;
                            border-radius:4px;
                            font-weight:600;
                        ">
                            {{ $lead->next_followup_date }}
                        </span>

                    @else

                        {{ $lead->next_followup_date ?? '-' }}

                    @endif

                </td>

                <td style="padding:12px;">
                    {{ $lead->assignedUser->name ?? '-' }}
                </td>

                <td style="padding:12px;white-space:nowrap;">
                    <a href="{{ route('leads.show',$lead->id) }}"
                       style="background:#2563eb;color:#fff;padding:6px 10px;border-radius:4px;text-decoration:none;">
                        View
                    </a>

                    <a href="{{ route('leads.edit',$lead->id) }}"
                       style="background:#f59e0b;color:#fff;padding:6px 10px;border-radius:4px;text-decoration:none;">
                        Edit
                    </a>

                    <a href="{{ route('projects.createFromLead',$lead->id) }}"
                       style="background:#16a34a;color:#fff;padding:6px 10px;border-radius:4px;text-decoration:none;">
                        Convert
                    </a>

                    <form action="{{ route('leads.destroy',$lead->id) }}"
                          method="POST"
                          style="display:inline;"
                          onsubmit="return confirm('Delete this lead?')">
                        @csrf
                        @method('DELETE')

                        <button type="submit"
                                style="background:#dc2626;color:white;padding:6px 10px;border-radius:4px;border:0;">
                            Delete
                        </button>
                    </form>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="10" style="padding:15px;text-align:center;color:#6b7280;">
                    No leads found.
                </td>
            </tr>
        @endforelse
    </tbody>
</table>

<div style="margin-top:15px;">
    {{ $leads->links() }}
</div>

<script>
document.getElementById('leadImportFile')?.addEventListener('change', function() {
    document.getElementById('selectedFileName').innerText =
        this.files.length ? this.files[0].name : 'No file selected';
});

document.getElementById('selectAll')?.addEventListener('change', function () {
    document.querySelectorAll('.leadCheckbox').forEach(function (checkbox) {
        checkbox.checked = document.getElementById('selectAll').checked;
    });
});

function attachSelectedLeads(formId)
{
    let form = document.getElementById(formId);

    form.querySelectorAll('input[name="lead_ids[]"]').forEach(e => e.remove());

    let checked = document.querySelectorAll('.leadCheckbox:checked');

    if (checked.length === 0) {
        alert('Please select at least one lead.');
        return false;
    }

    checked.forEach(function(cb){
        let input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'lead_ids[]';
        input.value = cb.value;
        form.appendChild(input);
    });

    return true;
}

['bulkStatusForm','bulkEmailForm','bulkAssignForm','bulkDeleteForm'].forEach(function(formId) {
    document.getElementById(formId)?.addEventListener('submit', function(e) {
        if (!attachSelectedLeads(formId)) {
            e.preventDefault();
        }
    });
});
</script>

@endsection