@extends('layout.app')

@section('content')

    <ol class="breadcrumb bc-3">
        <li><a href="#"><i class="fa-home"></i>Home</a></li>
        <li><a href="#">Leads</a></li>
        <li class="active"><strong>All Leads</strong></li>
    </ol>

    <br/>
    <h3>Leads</h3>
    <br/>

    {{-- Filters --}}
    <form method="GET" action="{{ route('lead') }}" id="filter-form">
        <div class="row" style="margin-bottom:15px;">
            <div class="col-md-3">
                <label>From Date</label>
                <input type="date" name="from" class="form-control"
                       value="{{ request('from') }}">
            </div>
            <div class="col-md-3">
                <label>To Date</label>
                <input type="date" name="to" class="form-control"
                       value="{{ request('to') }}">
            </div>
            <div class="col-md-3">
                <label>Status</label>
                <select name="status" class="form-control">
                    <option value="">-- All --</option>
                    <option value="Searching" {{ request('status') == 'Searching'  ? 'selected' : '' }}>Searching
                    </option>
                    <option value="Contacted" {{ request('status') == 'Contacted'  ? 'selected' : '' }}>Contacted
                    </option>
                    <option value="Converted" {{ request('status') == 'Converted'  ? 'selected' : '' }}>Converted
                    </option>
                </select>
            </div>
            <div class="col-md-3" style="padding-top:25px;">
                <button type="submit" class="btn btn-primary">Filter</button>
                <a href="{{ route('lead') }}" class="btn btn-default">Reset</a>
            </div>
        </div>
    </form>

    {{-- Export Buttons --}}
    <div style="margin-bottom:10px;">
        <a href="{{ route('lead.export', array_merge(request()->all(), ['type' => 'csv'])) }}"
           class="btn btn-success btn-sm">
            <i class="fa fa-download"></i> Export CSV
        </a>
        <a href="{{ route('lead.export', array_merge(request()->all(), ['type' => 'pdf'])) }}"
           class="btn btn-danger btn-sm">
            <i class="fa fa-file-pdf-o"></i> Export PDF
        </a>
        <span class="text-muted" style="margin-left:10px;">
        Total: <strong>{{ $leads->count() }}</strong> leads
    </span>
    </div>

    {{-- Table --}}
    <table class="table table-bordered datatable" id="leads-table">
        <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Requirement</th>
            <th>Area</th>
            <th>Budget</th>
            <th>Status</th>
            <th>Date</th>
        </tr>
        </thead>
        <tbody>
        @forelse($leads as $i => $lead)
            <tr>
                <td>{{ $i + 1 }}</td>
                <td>{{ $lead->name }}</td>
                <td>{{ $lead->phone }}</td>
                <td>{{ $lead->requirement ?? '—' }}</td>
                <td>{{ $lead->area ?? '—' }}</td>
                <td>{{ $lead->budget ?? '—' }}</td>
                <td>
                <span class="label
                    {{ $lead->status == 'Searching'  ? 'label-warning'  : '' }}
                {{ $lead->status == 'Contacted'  ? 'label-info'     : '' }}
                {{ $lead->status == 'Converted'  ? 'label-success'  : '' }}
                    ">
                    {{ $lead->status }}
                </span>
                </td>
                <td>{{ $lead->date }}</td>
            </tr>
        @empty
            <tr>
                <td colspan="8" class="text-center text-muted">No leads found.</td>
            </tr>
        @endforelse
        </tbody>
    </table>

@endsection

@push('scripts')
    <link rel="stylesheet" href="{{asset('assets/js/datatables/datatables.css')}}">
    <script src="{{asset('assets/js/datatables/datatables.js')}}"></script>
    <script>
        jQuery(document).ready(function ($) {
            $('#leads-table').DataTable({
                paging: true,
                searching: true,
                ordering: true,
                order: [[7, 'desc']],
                columnDefs: [
                    {targets: '_all', defaultContent: '—'}
                ],
                drawCallback: function () {
                    // re-apply label colors after redraw
                }
            });
        });
    </script>
@endpush