@extends('admin.layouts.app')
@section('title')
<title>{{ __('pages.dashboard.title') }} &mdash; {{ config('app.name', 'Laravel') }}</title>
@endsection
@section('header-content')
<h1>{{__("pages.dashboard.title")}}</h1>
@endsection
@section('content')
<div class="row">
    <div class="col-lg-12 col-md-12 col-12">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-12">
                <div class="card">
                    <div class="card-header" style="padding: 10px 0 0 25px; min-height:10px;">
                        <h5 class="card-title">Deal Statistics</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <select class="form-control" name="select-year">
                                    <option value="last_12_months">Last 12 Months</option>
                                    <option value="this_year">This Fiscal</option>
                                    <option value="last_year">Previous Fiscal Year</option>
                                </select>
                            </div>
                            <div class="col-6">
                                <input type="text" name="daterange" id="yearlydaterange" class="form-control" value="{{ $start }} - {{ $end }}" />
                            </div>
                        </div>
                        <div class="chart-container mt-3" style="height: 275px;">
                            <canvas id="myBarChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 col-md-6 col-12">
                <div class="card">
                    <div class="card-header" style="padding: 10px 0 0 25px; min-height:10px;">
                        <h5 class="card-title">Weekly Deal Distribution</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-4">
                                <select class="form-control" name="select-daterange">
                                    <option value="last_month">Last Month</option>
                                    <option value="this_month">This Month</option>
                                    <option value="this_year">This Year</option>
                                    <option value="last_year">Last Year</option>
                                </select>
                            </div>
                            <div class="col-6">
                                <input type="text" name="daterange" id="weeklydaterange" class="form-control" value="{{ $startLastMonth }} - {{ $endLastMonth }}" />
                            </div>
                        </div>
                        <div class="chart-container mt-3" style="height: 275px;">
                            <canvas id="weeklyDealsChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header" style="padding: 10px 0 0 25px; min-height:10px;">
                <h5 class="card-title">Slots Summary</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-4">
                        <select class="form-control" name="select-duration">
                            <option value="last_month">Last Month</option>
                            <option value="this_month">This Month</option>
                            <option value="this_year">This Year</option>
                            <option value="last_year">Last Year</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <input type="text" name="daterange" id="slotdaterange" class="form-control" value="{{ $startLastMonth }} - {{ $endLastMonth }}" />
                    </div>
                </div>
                <div class="table-responsive mt-1">
                    <table class="table table-striped" id="slots_summary_table">
                        <thead>
                            <tr>
                                <th>Time Slot</th>
                                <th>Total Deals</th>
                                <th>Assignee</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($slotsSummary as $summary)
                            <tr>
                                <td>{{ $summary->slot }}</td>
                                <td>{{ $summary->count }}</td>
                                <td>{{ $summary->assignee }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header" style="padding: 10px 0 0 25px; min-height:10px;">
                <h5 class="card-title">Country-wise Deals Summary</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-4">
                        <select class="form-control" name="select-period">
                            <option value="last_month">Last Month</option>
                            <option value="this_month">This Month</option>
                            <option value="this_year">This Year</option>
                            <option value="last_year">Last Year</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <input type="text" name="daterange" id="countrydaterange" class="form-control" value="{{ $startLastMonth }} - {{ $endLastMonth }}" />
                    </div>
                </div>
                <div class="table-responsive mt-1">

                    <table class="table table-striped" id="country_summary_table">
                        <thead>
                            <tr>
                                <th>Country</th>
                                <th>Total Deals</th>
                                <th>Assignee</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($countrySummary as $summary)
                            <tr>
                                <td>{{ $summary->country }}</td>
                                <td>{{ $summary->deal_count }}</td>
                                <td>{{ $summary->assignee }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@section('model')
<div class="modal fade" id="barModal" tabindex="-1" aria-labelledby="ownerModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="min-width: 800px">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ownerModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped" id="owner_deals_list" style="width:100%;">
                        <thead>
                            <tr>
                                <th>Deal Name</th>
                                <th>Country</th>
                                <th>Deal Date</th>
                                <th>Time Slot</th>
                                <th>Days</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script type="text/javascript">
    $(document).ready(function() {
        const ctx = document.getElementById('myBarChart').getContext('2d');
        const chartData = @json($chartData);
        const weeklyChartData = @json($weeklyChartData);
        const dateRangePicker = $('input[name="daterange"]').daterangepicker({
            opens: 'left',
            locale: {
                format: 'DD/MM/YYYY',
                applyLabel: 'Apply',
                cancelLabel: 'Cancel'
            }
        });

        let slotTable = $('#slots_summary_table').DataTable({
            "ordering": true,
            "pageLength": 10,
            "searching": true,
            "info": true,
            "responsive": true,
            "paging": true,
        });

        let countryTable = $('#country_summary_table').DataTable({
            "ordering": true,
            "pageLength": 10,
            "searching": true,
            "info": true,
            "responsive": true,
            "paging": true
        });

        // Chart options
        const options = {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    enabled: true
                },
            },
            barThickness: 8,
            scales: {
                x: {
                    stacked: false
                },
                y: {
                    beginAtZero: true
                }
            },
            onClick: async (event, elements) => {
                if (elements.length > 0) {
                    const {
                        datasetIndex,
                        index
                    } = elements[0];
                    const dealOwnerDetail = myBarChart.data.datasets[datasetIndex];
                    const monthName = myBarChart.data.labels[index];
                    const dateRange = $('#yearlydaterange').val();

                    const tableData = await getDealDetails(dealOwnerDetail.owner_id, monthName, dateRange);
                    populateTable(tableData);
                    showDealModal(dealOwnerDetail.label);
                    $('#owner_deals_list').DataTable({
                        'destroy': true,
                        "order": false,
                        "searching": false,
                        "lengthChange": false,
                        "pageLength": 5,
                    });
                }
            }
        };

        // Initialize Chart
        const myBarChart = new Chart(ctx, {
            type: 'bar',
            data: chartData,
            options: options
        });

        // Date range update on apply
        $('#yearlydaterange').on('apply.daterangepicker', function(ev, picker) {
            updateChart(picker.startDate.format('DD/MM/YYYY'), picker.endDate.format('DD/MM/YYYY'));
        });

        // Year selection event listener
        $('select[name="select-year"]').on('change', function() {
            updateDateRange($(this).val());
        });

        $('select[name="select-daterange"]').on('change', function() {
            const selectedValue = $(this).val();
            let startDate, endDate;
            const currentDate = new Date();
            
            // Calculate date range based on selection
            switch (selectedValue) {
                case 'this_month':
                    startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
                    endDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
                    break;
                case 'last_month':
                    startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
                    endDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0);
                    break;
                case 'this_year':
                    startDate = new Date(currentDate.getFullYear(), 0, 1);
                    endDate = new Date(currentDate.getFullYear(), 11, 31);
                    break;
                case 'last_year':
                    startDate = new Date(currentDate.getFullYear() - 1, 0, 1);
                    endDate = new Date(currentDate.getFullYear() - 1, 11, 31);
                    break;
            }

            // Format dates for display
            const formattedStartDate = formatDate(startDate);
            const formattedEndDate = formatDate(endDate);

            // Update daterange input
            $('#weeklydaterange').val(`${formattedStartDate} - ${formattedEndDate}`);

            // Update weekly chart
            updateWeeklyChart(formattedStartDate, formattedEndDate);
        });

        // Add event listener for weekly daterange picker
        $('#weeklydaterange').on('apply.daterangepicker', function(ev, picker) {
            updateWeeklyChart(
                picker.startDate.format('DD/MM/YYYY'),
                picker.endDate.format('DD/MM/YYYY')
            );
        });

        // Initialize daterangepicker for weekly deals
        $('#weeklydaterange').daterangepicker({
            opens: 'left',
            locale: {
                format: 'DD/MM/YYYY',
                applyLabel: 'Apply',
                cancelLabel: 'Cancel'
            }
        });


        $('#slotdaterange').on('apply.daterangepicker', function(ev, picker) {
            updateSlotSummary(
                picker.startDate.format('DD/MM/YYYY'),
                picker.endDate.format('DD/MM/YYYY')
            );
        });

        $('#countrydaterange').on('apply.daterangepicker', function(ev, picker) {
            updateCountrySummary(
                picker.startDate.format('DD/MM/YYYY'),
                picker.endDate.format('DD/MM/YYYY')
            );
        });

        // Update chart with selected date range
        const updateChart = (startDt, endDt) => {
            $.ajax({
                url: "{{route('admin.dashboard.filter-graph-data')}}",
                type: "POST",
                data: {
                    start_date: startDt,
                    end_date: endDt,
                    _token: '{{ csrf_token() }}'
                },
                success: function(data) {
                    myBarChart.data = data;
                    myBarChart.update();
                }
            });
        };

        // Update date range based on year selection
        const updateDateRange = (selectedYear) => {
            const currentDate = new Date();
            let startDate, endDate;

            switch (selectedYear) {
                case 'this_year':
                    startDate = new Date(currentDate.getFullYear(), 0, 1);
                    endDate = new Date(currentDate.getFullYear(), 11, 31);
                    break;
                case 'last_year':
                    const lastYear = currentDate.getFullYear() - 1;
                    startDate = new Date(lastYear, 0, 1);
                    endDate = new Date(lastYear, 11, 31);
                    break;
                    // case 'last_12_months':
                    //     startDate = new Date();
                    //     startDate.setMonth(currentDate.getMonth() - 12);
                    //     endDate = currentDate;
                    //     break;
                default:
                    startDate = new Date(currentDate.getFullYear() - 1, currentDate.getMonth() + 1, 1);
                    endDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
            }

            const formattedStartDate = formatDate(startDate);
            const formattedEndDate = formatDate(endDate);

            // Update daterange picker and chart
            dateRangePicker.data('daterangepicker').setStartDate(formattedStartDate);
            dateRangePicker.data('daterangepicker').setEndDate(formattedEndDate);
            $('input[name="daterange"]').val(`${formattedStartDate} - ${formattedEndDate}`);

            updateChart(formattedStartDate, formattedEndDate);
        };

        $('select[name="select-duration"]').on('change', function() {
            const selectedValue = $(this).val();
            let startDate, endDate;
            const currentDate = new Date();

            // Calculate date range based on selection
            switch (selectedValue) {
                case 'this_month':
                    startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
                    endDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
                    break;
                case 'last_month':
                    startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
                    endDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0);
                    break;
                case 'this_year':
                    startDate = new Date(currentDate.getFullYear(), 0, 1);
                    endDate = new Date(currentDate.getFullYear(), 11, 31);
                    break;
                case 'last_year':
                    startDate = new Date(currentDate.getFullYear() - 1, 0, 1);
                    endDate = new Date(currentDate.getFullYear() - 1, 11, 31);
                    break;
            }

            // Format dates for display
            const formattedStartDate = formatDate(startDate);
            const formattedEndDate = formatDate(endDate);

            // Update both daterange inputs
            $('#slotdaterange').val(`${formattedStartDate} - ${formattedEndDate}`);

            // Update both summaries
            updateSlotSummary(formattedStartDate, formattedEndDate);
        });


        // Add the same functionality for the period selector
        $('select[name="select-period"]').on('change', function() {
            const selectedValue = $(this).val();
            let startDate, endDate;
            const currentDate = new Date();

            // Calculate date range based on selection
            switch (selectedValue) {
                case 'this_month':
                    startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
                    endDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
                    break;
                case 'last_month':
                    startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
                    endDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0);
                    break;
                case 'this_year':
                    startDate = new Date(currentDate.getFullYear(), 0, 1);
                    endDate = new Date(currentDate.getFullYear(), 11, 31);
                    break;
                case 'last_year':
                    startDate = new Date(currentDate.getFullYear() - 1, 0, 1);
                    endDate = new Date(currentDate.getFullYear() - 1, 11, 31);
                    break;
            }

            // Format dates for display
            const formattedStartDate = formatDate(startDate);
            const formattedEndDate = formatDate(endDate);

            // Update daterange input
            $('#countrydaterange').val(`${formattedStartDate} - ${formattedEndDate}`);

            // Update country summary
            updateCountrySummary(formattedStartDate, formattedEndDate);
        });

        function updateCountrySummary(startDate, endDate) {
            $.ajax({
                url: "{{ route('admin.dashboard.country-summary') }}",
                method: 'POST',
                data: {
                    start_date: startDate,
                    end_date: endDate,
                    _token: "{{ csrf_token() }}"
                },

                success: function(response) {
                    if (response.status) {
                        countryTable.clear();

                        response.data.forEach(function(row) {
                            countryTable.row.add([
                                row.country,
                                row.deal_count,
                                row.assignee
                            ]);
                        });
                        countryTable.draw();
                    } else {
                        // Handle error
                        console.error('Error:', response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching country summary:', error);
                },

            });
        }

        function updateSlotSummary(startDate, endDate) {
            $.ajax({
                url: "{{ route('admin.dashboard.slots-summary') }}",
                method: 'POST',
                data: {
                    start_date: startDate,
                    end_date: endDate,
                    _token: "{{ csrf_token() }}"
                },

                success: function(response) {
                    if (response.status) {
                        slotTable.clear();
                        response.data.forEach(function(row) {
                            slotTable.row.add([
                                row.slot,
                                row.count,
                                row.assignee
                            ]);
                        });
                        slotTable.draw();
                    } else {
                        // Handle error
                        console.error('Error:', response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching country summary:', error);
                },

            });
        }


        const updateMonthlyChart = (month, year) => {
            let startDate = formatDate(new Date(year, month - 1, 1));
            let endDate = formatDate(new Date(year, month, 0));

            updateWeeklyChart(startDate, endDate);
        }

        // Format date to DD/MM/YYYY
        const formatDate = (date) => date.toLocaleDateString('en-GB');

        // Fetch deal details
        const getDealDetails = (ownerId, month, dateRange) => {
            return $.ajax({
                url: "{{route('admin.dashboard.deals-data-by-owner')}}",
                type: "POST",
                data: {
                    ownerId,
                    month,
                    dateRange,
                    _token: '{{ csrf_token() }}'
                },
            });
        };

        // Populate table with fetched data
        const populateTable = (dealData) => {
            const rows = dealData?.map(deal => `
                <tr>
                    <td>${deal.deal_name}</td>
                    <td>${deal.country}</td>
                    <td>${moment(deal?.created_at).format('DD/MM/YYYY')}</td>
                    <td>${deal.timing_slot ?? ''}</td>
                    <td>${deal.day ?? ''}</td>
                </tr>`).join('') || '<tr><td colspan="5" class="text-center">No deals available.</td></tr>';

            $('#owner_deals_list tbody').html(rows);
        };

        // Show modal with deal details
        const showDealModal = (ownerLabel) => {
            $("#ownerModalLabel").text(`${ownerLabel === 'Total Deals' ? ownerLabel : `Deals of ${ownerLabel}`}`);
            $("#barModal").modal("show");
        };

        // Destroy DataTable when modal is closed
        $('#barModal').on('hidden.bs.modal', function() {
            if ($.fn.dataTable.isDataTable('#owner_deals_list')) {
                $('#owner_deals_list').DataTable().clear().destroy();
            }
        });


        const ctx1 = document.getElementById('weeklyDealsChart').getContext('2d');

        // Week Chart options
        const chartOptions = {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    enabled: true
                },
            },
            barThickness: 8,
            scales: {
                x: {
                    stacked: false
                },
                y: {
                    beginAtZero: true
                }
            },
        };

        // Initialize Chart
        let weeklyChart = new Chart(ctx1, {
            type: 'bar',
            data: {
                labels: weeklyChartData.labels,
                datasets: [{
                    label: 'Number of Deals',
                    data: weeklyChartData.data,
                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: chartOptions
        });

        // Handle date filter changes
        $('.date-filter').on('change', function() {
            let startDate = $('#start_date').val();
            let endDate = $('#end_date').val();

            if (startDate && endDate) {
                $.ajax({
                    url: "{{ route('admin.dashboard.slots-summary') }}",
                    method: 'POST',
                    data: {
                        start_date: startDate,
                        end_date: endDate,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        slotsTable.clear();
                        response.data.forEach(function(item) {
                            slotsTable.row.add([
                                item.slot,
                                item.assignee,
                                item.count
                            ]);
                        });
                        slotsTable.draw();
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching slots summary:', error);
                    }
                });
            }
        });
        // Function to fetch and update chart data
        function updateWeeklyChart(startDt, endDt) {
            $.ajax({
                url: "{{ route('admin.weekly-deals-data') }}",
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    start_date: startDt,
                    end_date: endDt
                },
                dataType: 'json',
                success: function(response) {
                    console.log(response)
                    if (weeklyChart) {
                        weeklyChart.destroy();
                    }

                    weeklyChart = new Chart(ctx1, {
                        type: 'bar',
                        data: {
                            labels: response.labels,
                            datasets: [{
                                label: 'Number of Deals',
                                data: response.data,
                                backgroundColor: 'rgba(54, 162, 235, 0.5)',
                                borderColor: 'rgba(54, 162, 235, 1)',
                                borderWidth: 1
                            }]
                        },
                        options: {
                            responsive: true,
                            plugins: {
                                legend: {
                                    position: 'bottom'
                                },
                                tooltip: {
                                    enabled: true
                                },
                            },
                            barThickness: 8,
                            scales: {
                                x: {
                                    stacked: false
                                },
                                y: {
                                    beginAtZero: true
                                }
                            },
                        }
                    });
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching weekly deals data:', error);
                }
            });
        }

    });
</script>
@endsection