@extends('layouts.app')

@section('title', 'Opportunity')

@section('page-specific-style')
<!-- DataTables -->
<link href="{{asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />

<link href="{{asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css')}}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="d-flex justify-content-between align-items-center">
            <h4 class="mb-0">Opportunities</h4>
        </div>
    </div>
    @include('modules.opportunities.index_search')
    {{-- <div class="row mt-4">
        <div class="col-xs-12 col-md">
            <label for="assigned_to">Assignd To</label>
            <select name="assigned_to" id="assigned_to" class="form-select">
                <option value="">Select All</option>
                @forelse ($assignedToUsers as $user)
                    <option value="{{ $user->name }}">{{ $user->name }}</option>
                @empty
                    <option value="">No user found</option>
                @endforelse
            </select>
        </div>
        <div class="col-xs-12 col-md">
            <label for="opportunity-status">Opportunity Status</label>
            <select name="user_status" id="opportunity-status" class="form-select">
                <option value="">Select All</option>
                @forelse ($opportunityStatus as $key => $item)
                    <option value="{{ $item->value }}">{{ $item->value }}</option>
                @empty
                    <option value="">No status found</option>
                @endforelse
            </select>
        </div>

        <div class="col-xs-12 col-md">
            <label for="product">Product</label>
            <select name="product" id="product" class="form-select">
                <option value="">Select All</option>
                @forelse ($products as $key => $item)
                    <option value="{{ $item->name }}">{{ $item->name }}</option>
                @empty
                    <option value="">No status found</option>
                @endforelse
            </select>
        </div>

        <div class="col-xs-12 col-md">
            <label for="carrier">Carrier</label>
            <select name="carrier" id="carrier" class="form-select">
                <option value="">Select All</option>
                @forelse ($carriers as $key => $item)
                    <option value="{{ $item->name }}">{{ $item->name }}</option>
                @empty
                    <option value="">No status found</option>
                @endforelse
            </select>
        </div>

        <div class="col-xs-12 col-md">
            <div class="form-group">
                <label for="created_at">Creation Date</label>
                <input type="text" name="created_at" class="form-control" id="created_at" placeholder="Creation Date">
            </div>
        </div>
    </div> --}}

    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-container">
                        <table id="opportunities-datatable" class="table table-bordered dt-responsive nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Opportunity ID</th>
                                    <th>Name</th>
                                    <th>Product</th>
                                    <th>Carrier</th>
                                    <th>Status</th>
                                    <th>Order By</th>
                                    <th>Lead ID</th>
                                    <th>Agent</th>
                                    <th>Created on</th>
                                    <th>Latest Activity on</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-specific-script')
<script src="{{asset('assets/libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js')}}"></script>

<script src="{{asset('assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('assets/libs/jszip/jszip.min.js')}}"></script>
<script src="{{asset('assets/libs/pdfmake/build/pdfmake.min.js')}}"></script>
<script src="{{asset('assets/libs/pdfmake/build/vfs_fonts.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-buttons/js/buttons.colVis.min.js')}}"></script>

<script src="{{asset('assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js')}}"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script src="{{asset('assets/js/pages/datatables.init.js')}}"></script>

<script>
    $(document).ready(function () {
        $('#created_at').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            },
            startDate: moment().startOf('day'),
            endDate: moment().endOf('day'),
            opens: 'left',
        });

        var opportunityTable = $("#opportunities-datatable").DataTable({
            lengthChange: false,
            order: [],
            searching: true,
            // processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('opportunities.fetchOpportunities') }}",
                data: function (d) {
                    // Add custom filters to the data object
                    d.created_at_filter = $('#created_at').val();
                    d.assigned_to = $('#assigned_to').val();
                    d.opportunity_status = $('#opportunity-status').val();
                    d.full_name_search = $('#lead-search').val();
                },
                beforeSend: function () {
                    $.LoadingOverlay("show", {
                        image: "",
                        text: "Loading...",
                        background: "rgba(0, 0, 0, 0.5)",
                        textColor: "#fff",
                        fontSize: "10px !important"
                    }); // Show loading overlay
                },
                complete: function () {
                    $.LoadingOverlay("hide"); // Hide loading overlay after data is loaded
                }
            },
            columns: [
                { "data": "id" },
                { "data": "name" },
                { "data": "product" },
                { "data": "carrier" },
                { "data": "status" },
                { "data": "order_by" },
                { "data": "lead_id" },
                { "data": "agent" },
                { "data": "created_on" },
                { "data": "latest_activity_on" }
            ],
            order: [[0, 'desc']],
            buttons: [
                "excel",
                {
                    extend: "colvis",
                    text: "List",
                    columns: ':not(:last-child)'
                }
            ]
        });

        opportunityTable.buttons().container().appendTo("#opportunities-datatable_wrapper .col-md-6:eq(0)");

        $('#opportunities-datatable_filter').hide();

        // Custom filter for "Assigned to"
        $('#assigned_to').on('change', function() {
            var assignedTo = this.value;
            // Use DataTables' column search feature (column index 7 for "Assigned to")
            opportunityTable.column(7).search(assignedTo).draw();
        });

        $('#opportunity-status').on('change', function() {
            var status = this.value;
            // Use DataTables' column search feature (column index 3 for "Status")
            opportunityTable.column(2).search(status).draw();
        });

        // Custom filter function to filter by date range
        function CreatedDateRangeFilter(settings, data, dataIndex) {
            var dateToBeFiltered = data[7];

            var tableDate = moment(dateToBeFiltered, 'DD MMM YYYY hh:mmA').format('YYYY-MM-DD');

            var startDate = $('#created_at').data('daterangepicker').startDate.format('YYYY-MM-DD');
            var endDate = $('#created_at').data('daterangepicker').endDate.format('YYYY-MM-DD');

            if (moment(tableDate).isBetween(startDate, endDate, undefined, '[]')) {
                return true; // Show the row
            }
            return false; // Hide the row
        }

        $('#created_at').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));

            $.fn.dataTable.ext.search.push(CreatedDateRangeFilter);

            opportunityTable.draw();
        });

        $('#created_at').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val(''); // Clear the input field

            $.fn.dataTable.ext.search = $.fn.dataTable.ext.search.filter(function(fn) {
                return fn !== CreatedDateRangeFilter; // Only remove the date range filter
            });

            opportunityTable.draw();
        });

        $('#product').on('change', function() {
            var product = this.value;

            opportunityTable.column(2).search(product).draw();
        });

        $('#carrier').on('change', function() {
            var carrier = this.value;

            opportunityTable.column(3).search(carrier).draw();
        });

        $('#lead-search').on('keyup', function() {
            var fullName = this.value;
            // leadTable.search(this.value).draw(); // Use the DataTable's search API
            $.fn.dataTable.ext.search.push(fullName);
            opportunityTable.draw();
        });
    });

    $(document).on('click', '.view-opportunity', function() {
        var url = $(this).data('url');
        localStorage.setItem('activeTab', "#opportunities");

        window.location.href = url;
    });

    $(document).on('click', '.lead-view', function() {
        var url = $(this).data('href');
        localStorage.removeItem('activeTab');

        window.location.href = url;
    });
</script>
@endsection