@extends('admin.layouts.master')

@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
@endpush

@section('body')
    <!-- start page content-->
    <div class="page-content">

        <!-- Breadcrumb -->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Campaign Report</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0 align-items-center">
                        <li class="breadcrumb-item">
                            <a href="javascript:;">
                                <ion-icon name="home-outline"></ion-icon>
                            </a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">campaign Report page</li>
                    </ol>
                </nav>
            </div>
        </div>

        <!-- Title + Button -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h6 class="mb-0 text-uppercase">Campaign Report List</h6>
        </div>

        <!-- Report Filters -->
        <div class="card mb-3">

            <div class="card-body">

                <form id="reportFilterForm">

                    <div class="row g-3">

                        <!-- From Date -->
                        <div class="col-md-2">

                            <label for="from_date" class="form-label">
                                From Date
                            </label>

                            <input type="date" name="from_date" id="from_date" class="form-control">

                        </div>


                        <!-- To Date -->
                        <div class="col-md-2">

                            <label for="to_date" class="form-label">
                                To Date
                            </label>

                            <input type="date" name="to_date" id="to_date" class="form-control">

                        </div>


                        <!-- Sales Rep -->
                        <div class="col-md-2">

                            <label for="assigned_to_user_id" class="form-label">
                                Sales Rep
                            </label>

                            <select name="assigned_to_user_id" id="assigned_to_user_id" class="form-control">

                                <option value="">
                                    All Sales Reps
                                </option>

                                @foreach ($users as $user)
                                    <option value="{{ $user->id }}">
                                        {{ $user->name }}
                                    </option>
                                @endforeach

                            </select>

                        </div>


                        <!-- Lead Source -->
                        <div class="col-md-2">

                            <label for="lead_source_id" class="form-label">
                                Lead Source
                            </label>

                            <select name="lead_source_id" id="lead_source_id" class="form-control">

                                <option value="">
                                    All Sources
                                </option>

                                @foreach ($sources as $source)
                                    <option value="{{ $source->id }}">
                                        {{ $source->name }}
                                    </option>
                                @endforeach

                            </select>

                        </div>


                        <!-- Campaign -->
                        {{-- <div class="col-md-2">

                            <label for="campaign_id" class="form-label">
                                Campaign
                            </label>

                            <select name="campaign_id" id="campaign_id" class="form-control">

                                <option value="">
                                    All Campaigns
                                </option>

                                @foreach ($campaigns as $campaign)
                                    <option value="{{ $campaign->id }}">
                                        {{ $campaign->name }}
                                    </option>
                                @endforeach

                            </select>

                        </div> --}}


                        <!-- Lead Status -->
                        <div class="col-md-2">

                            <label for="status" class="form-label">
                                Lead Status
                            </label>

                            <select name="status" id="status" class="form-control">

                                <option value="">
                                    All Statuses
                                </option>

                                <option value="New">
                                    New
                                </option>

                                <option value="Contacted">
                                    Contacted
                                </option>

                                <option value="MQL">
                                    MQL
                                </option>

                                <option value="SQL">
                                    SQL
                                </option>

                                <option value="Proposal Sent">
                                    Proposal Sent
                                </option>

                                <option value="Negotiation">
                                    Negotiation
                                </option>

                                <option value="Converted">
                                    Converted
                                </option>

                                <option value="Disqualified">
                                    Disqualified
                                </option>

                                <option value="Nurturing">
                                    Nurturing
                                </option>

                            </select>

                        </div>


                        <!-- Opportunity Stage -->
                        <div class="col-md-2">

                            <label for="opportunity_stage" class="form-label">
                                Opportunity Stage
                            </label>

                            <select name="opportunity_stage" id="opportunity_stage" class="form-control">

                                <option value="">
                                    All Stages
                                </option>

                                <option value="Open">
                                    Open
                                </option>

                                <option value="Proposal Sent">
                                    Proposal Sent
                                </option>

                                <option value="Negotiation">
                                    Negotiation
                                </option>

                                <option value="Closed Won">
                                    Closed Won
                                </option>

                                <option value="Closed Lost">
                                    Closed Lost
                                </option>

                            </select>

                        </div>


                        <!-- Buttons -->
                        <div class="col-md-4 d-flex align-items-end gap-2">

                            <button type="button" class="btn btn-primary" id="filterReportBtn">
                                Filter
                            </button>

                            <button type="button" class="btn btn-secondary" id="resetReportBtn">
                                Reset
                            </button>

                        </div>

                    </div>

                </form>

            </div>

        </div>


        <hr>

        <!-- Table -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="reportTable" class="table table-bordered table-striped w-100">

                        <thead class="table-light">

                            <tr>

                                <th>SI.No</th>

                                <th>Lead Name</th>

                                <th>Lead Created Date</th>

                                <th>MQLs</th>

                                <th>SQLs</th>

                                <th>Conversions</th>

                                <th>Conversion Rate</th>

                                <th>Avg. Sales Cycle</th>

                                <th>Revenue Won</th>

                                <th>Revenue Lost</th>

                                <th>Lead Source</th>

                            </tr>

                        </thead>


                        <tbody>

                            @foreach ($reportData as $key => $report)
                                <tr>

                                    <!-- SI.No -->
                                    <td>
                                        {{ $key + 1 }}
                                    </td>


                                    <!-- Lead Name -->
                                    <td>
                                        {{ $report['lead_name'] }}
                                    </td>

                                    <!-- Lead Created Date -->
                                    <td>
                                        {{ $report['lead_created_date'] }}
                                    </td>


                                    <!-- MQLs -->
                                    <td>
                                        {{ $report['mqls'] }}
                                    </td>


                                    <!-- SQLs -->
                                    <td>
                                        {{ $report['sqls'] }}
                                    </td>


                                    <!-- Conversions -->
                                    <td>
                                        {{ $report['conversions'] }}
                                    </td>


                                    <!-- Conversion Rate -->
                                    <td>
                                        {{ number_format($report['conversion_rate'], 2) }}%
                                    </td>


                                    <!-- Average Sales Cycle -->
                                    <td>
                                        {{ $report['average_sales_cycle'] }} days
                                    </td>


                                    <!-- Revenue Won -->
                                    <td>
                                        ₹ {{ number_format($report['revenue_won'], 2) }}
                                    </td>


                                    <!-- Revenue Lost -->
                                    <td>
                                        ₹ {{ number_format($report['revenue_lost'], 2) }}
                                    </td>


                                    <!-- Lead Source -->
                                    <td>
                                        {{ $report['lead_source'] }}
                                    </td>

                                </tr>
                            @endforeach

                        </tbody>

                    </table>
                </div>
            </div>
        </div>

        <!-- View Campaign Modal -->
        <div class="modal fade" id="viewCampaignModal" tabindex="-1" aria-hidden="true">

            <div class="modal-dialog modal-lg modal-dialog-centered">

                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">Campaign Details</h5>

                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                        </button>
                    </div>

                    <div class="modal-body">

                        <table class="table table-bordered">

                            <tbody>

                                <tr>
                                    <th width="30%">Campaign Name</th>
                                    <td id="view_name"></td>
                                </tr>

                                <tr>
                                    <th>Campaign Type</th>
                                    <td id="view_type"></td>
                                </tr>

                                <tr>
                                    <th>Description</th>
                                    <td id="view_description"></td>
                                </tr>

                                <tr>
                                    <th>Start Date</th>
                                    <td id="view_start_date"></td>
                                </tr>

                                <tr>
                                    <th>End Date</th>
                                    <td id="view_end_date"></td>
                                </tr>

                                <tr>
                                    <th>Budget</th>
                                    <td id="view_budget"></td>
                                </tr>

                                <tr>
                                    <th>Owner</th>
                                    <td id="view_owner"></td>
                                </tr>

                                <tr>
                                    <th>Status</th>
                                    <td id="view_status"></td>
                                </tr>

                                <tr>
                                    <th>Created At</th>
                                    <td id="view_created_at"></td>
                                </tr>

                                <tr>
                                    <th>Updated At</th>
                                    <td id="view_updated_at"></td>
                                </tr>

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>
@endsection


<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>
    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end', // ✅ top right
        showConfirmButton: false,
        timer: 2000,
        timerProgressBar: true,
        didOpen: (toast) => {
            toast.onmouseenter = Swal.stopTimer;
            toast.onmouseleave = Swal.resumeTimer;
        }
    });
</script>

<script>
    $(document).ready(function() {

        let reportTable = $('#reportTable').DataTable({

            pageLength: 10,

            lengthChange: true,

            searching: true,

            ordering: true,

            info: true,

            responsive: true,

            // =========================
            // DataTable Layout
            // =========================
            dom: "<'row mb-3 align-items-center'" +
                "<'col-md-2'l>" +
                "<'col-md-8 text-center'B>" +
                "<'col-md-2'f>" +
                ">" +
                "<'row'<'col-md-12'tr>>" +
                "<'row mt-2'<'col-md-5'i><'col-md-7'p>>",

            // =========================
            // Export + PDF
            // =========================
            buttons: [

                {
                    extend: 'excelHtml5',
                    text: 'Export',
                    className: 'btn btn-secondary',
                    title: 'Lead Report',

                    exportOptions: {
                        columns: ':visible'
                    }
                },

                {
                    extend: 'pdfHtml5',
                    text: 'PDF',
                    className: 'btn btn-danger',
                    title: 'Lead Report',
                    orientation: 'landscape',
                    pageSize: 'A4',

                    exportOptions: {
                        columns: ':visible'
                    }
                }

            ],

            columnDefs: [{
                orderable: false,
                targets: [0]
            }],

            language: {
                emptyTable: "No report found"
            }

        });



        // =========================
        // Filter Report
        // =========================

        $('#filterReportBtn').on('click', function() {

            let fromDate = $('#from_date').val();
            let toDate = $('#to_date').val();

            let salesRep = $('#assigned_to_user_id').val();
            let leadSource = $('#lead_source_id').val();
            let status = $('#status').val();
            let opportunityStage = $('#opportunity_stage').val();


            $.ajax({

                url: "{{ route('admin.report.filter') }}",

                type: "GET",

                data: {

                    from_date: fromDate,

                    to_date: toDate,

                    assigned_to_user_id: salesRep,

                    lead_source_id: leadSource,

                    status: status,

                    opportunity_stage: opportunityStage
                },


                beforeSend: function() {

                    $('#filterReportBtn').prop('disabled', true);

                    $('#filterReportBtn').text('Filtering...');
                },


                success: function(response) {

                    console.log('Filter response:', response);


                    if (response.status === true) {

                        // Clear old rows
                        reportTable.clear();


                        // Add filtered rows
                        $.each(response.data, function(index, report) {

                            reportTable.row.add([

                                // SI.No
                                index + 1,

                                // Lead Name
                                report.lead_name ?? '-',

                                // Lead Created Date
                                report.lead_created_date ?? '-',

                                // MQLs
                                report.mqls ?? 0,

                                // SQLs
                                report.sqls ?? 0,

                                // Conversions
                                report.conversions ?? 0,

                                // Conversion Rate
                                (report.conversion_rate ?? 0) + '%',

                                // Average Sales Cycle
                                (report.average_sales_cycle ?? 0) + ' days',

                                // Revenue Won
                                '₹ ' + Number(
                                    report.revenue_won ?? 0
                                ).toLocaleString('en-IN', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }),

                                // Revenue Lost
                                '₹ ' + Number(
                                    report.revenue_lost ?? 0
                                ).toLocaleString('en-IN', {
                                    minimumFractionDigits: 2,
                                    maximumFractionDigits: 2
                                }),

                                // Lead Source
                                report.lead_source ?? '-'

                            ]);

                        });


                        // Redraw table
                        reportTable.draw();


                    } else {

                        Swal.fire({

                            icon: 'error',

                            title: 'Error',

                            text: response.message ??
                                'Unable to filter report.'

                        });

                    }

                },


                error: function(xhr) {

                    console.log('Filter error:', xhr.responseText);

                    Swal.fire({

                        icon: 'error',

                        title: 'Server Error',

                        text: 'Something went wrong while filtering the report.'

                    });

                },


                complete: function() {

                    $('#filterReportBtn').prop('disabled', false);

                    $('#filterReportBtn').text('Filter');

                }

            });

        });


        // =========================
        // Reset Filter
        // =========================

        $('#resetReportBtn').on('click', function() {

            $('#from_date').val('');

            $('#to_date').val('');

            $('#assigned_to_user_id').val('');

            $('#lead_source_id').val('');

            $('#status').val('');

            $('#opportunity_stage').val('');


            // Reload original report
            window.location.reload();

        });

    });
</script>