@extends('Users.app')
@section('content')

<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h3 class="col-5 card-title">Monthly Customer Details</h3>
            <div class="col-1 d-flex justify-content-end">
                <img src="http://127.0.0.1:8001/backend/loader/three-dot-loader.gif" style="height: 25px;display:none"
                    class="loaderWeekly">
            </div>
            <div class="col-5 d-flex justify-content-between align-items-center">

                <div class="form-group row ml-2">
                    <label for="weekSelect" class="col-sm-auto col-form-label small-margin">Week:</label>
                    <div class="col-sm-auto">
                        <select id="weekSelect" onchange="monthlyDetails()" class="form-select small-select"
                            aria-label="Default select example">
                            <option value="">
                                Select</option>
                            <option value="1">1st Week
                            </option>
                            <option value="2">2nd Week
                            </option>
                            <option value="3">3rd Week
                            </option>
                            <option value="4">4th Week
                            </option>
                        </select>
                    </div>
                </div>

                <div class="form-group row ml-2">
                    <label for="monthSelect" class="col-sm-auto col-form-label small-margin">Month:</label>
                    <div class="col-sm-auto">
                        <select id="monthSelect" onchange="monthlyDetails()" class="form-select small-select"
                            aria-label="Default select example">
                            <option value="">
                                Select</option>
                            <option value="1">
                                January</option>
                            <option value="2">
                                February</option>
                            <option value="3">
                                March</option>
                            <option value="4">
                                April</option>
                            <option value="5">
                                May</option>
                            <option value="6">
                                June</option>
                            <option value="7">
                                July</option>
                            <option value="8">
                                August</option>
                            <option value="9">
                                September</option>
                            <option value="10">
                                October</option>
                            <option value="11">
                                November</option>
                            <option value="12">
                                December</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row ml-2">
                    <label for="yearSelect" class="col-sm-auto col-form-label small-margin">Year:</label>
                    <div class="col-sm-auto">
                        <select id="yearSelect" onchange="monthlyDetails()" class="form-select small-select"
                            aria-label="Default select example">
                            <option value="" selected="" disabled="">Select Year</option>
                            <option value="2023">
                                2023</option>
                            <option value="2024">
                                2024</option>
                            <option selected="" value="2025">
                                2025</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mx-4 row" id="dayWise">
    </div>
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h3 class="col-5 card-title">Monthly Leads Conversion</h3>
            <div class="col-1 d-flex justify-content-end">
                <img src="http://127.0.0.1:8001/backend/loader/three-dot-loader.gif" style="height: 25px;display:none"
                    class="loaderWeekly">
            </div>
            @php
                use Carbon\Carbon;
            
                $day = now()->day;
                $currentMonth = now()->month;
                $currentYear = now()->year;
                $lastDay = Carbon::create($currentYear, $currentMonth)->endOfMonth()->day;
            
                if ($day <= 7) {
                    $currentWeek = 1;
                } elseif ($day <= 14) {
                    $currentWeek = 2;
                } elseif ($day <= 21) {
                    $currentWeek = 3;
                } else {
                    $currentWeek = 4; // includes 22 to 31
                }
            @endphp
            <div class="col-5 d-flex justify-content-between align-items-center">
                <div class="form-group row ml-2">
                    <label for="leadsweekSelect" class="col-sm-auto col-form-label small-margin">Week:</label>
                    <div class="col-sm-auto">
                        <select id="leadsweekSelect" onchange="monthlyleadsDetails()" class="form-select small-select"
                            aria-label="Default select example">
                            <option value="">Select</option>
                            @for ($i = 1; $i <= 4; $i++)
                                <option value="{{ $i }}">
                                    {{ $i }}{{ ['st','nd','rd','th'][$i - 1] }} Week
                                </option>
                            @endfor
                        </select>
                    </div>
                </div>

                <div class="form-group row ml-2">
                    <label for="leadsmonthSelect" class="col-sm-auto col-form-label small-margin">Month:</label>
                    <div class="col-sm-auto">
                        <select id="leadsmonthSelect" onchange="monthlyleadsDetails()" class="form-select small-select"
                            aria-label="Default select example">
                            <option value="">Select</option>
                                @foreach ([
                                    1 => 'January', 2 => 'February', 3 => 'March',
                                    4 => 'April', 5 => 'May', 6 => 'June',
                                    7 => 'July', 8 => 'August', 9 => 'September',
                                    10 => 'October', 11 => 'November', 12 => 'December'
                                ] as $num => $name)
                                    <option value="{{ $num }}">
                                        {{ $name }}
                                    </option>
                                @endforeach
                        </select>
                    </div>
                </div>

                <div class="form-group row ml-2">
                    <label for="leadsyearSelect" class="col-sm-auto col-form-label small-margin">Year:</label>
                    <div class="col-sm-auto">
                        <select id="leadsyearSelect" onchange="monthlyleadsDetails()" class="form-select small-select"
                            aria-label="Default select example">
                            <option value="" disabled>Select Year</option>
                            @for ($year = 2023; $year <= 2025; $year++)
                                <option value="{{ $year }}" {{ $year == $currentYear ? 'selected' : '' }}>
                                    {{ $year }}
                                </option>
                            @endfor
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mx-4 row" id="totalleads">
    </div>
     <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h3 class="col-5 card-title">Amount Information(USD)</h3>
            <div class="col-1 d-flex justify-content-end">
                <img src="http://127.0.0.1:8001/backend/loader/three-dot-loader.gif" style="height: 25px;display:none"
                    class="loaderWeekly">
            </div>
            <div class="col-5 d-flex justify-content-between align-items-center">

                <div class="form-group row ml-2">
                    <label for="amountweekSelect" class="col-sm-auto col-form-label small-margin">Week:</label>
                    <div class="col-sm-auto">
                        <select id="amountweekSelect" onchange="monthlyamountDetails()" class="form-select small-select"
                            aria-label="Default select example">
                            <option value="">
                                Select</option>
                          <option value="1">1st Week
                            </option>
                            <option value="2">2nd Week
                            </option>
                            <option value="3">3rd Week
                            </option>
                            <option value="4">4th Week
                            </option>
                        
                        </select>
                    </div>
                </div>

                <div class="form-group row ml-2">
                    <label for="amountmonthSelect" class="col-sm-auto col-form-label small-margin">Month:</label>
                    <div class="col-sm-auto">
                        <select id="amountmonthSelect" onchange="monthlyamountDetails()" class="form-select small-select"
                            aria-label="Default select example">
                            <option value="">
                                Select</option>
                           <option value="1">
                                January</option>
                            <option value="2">
                                February</option>
                            <option value="3">
                                March</option>
                            <option value="4">
                                April</option>
                            <option value="5">
                                May</option>
                            <option value="6">
                                June</option>
                            <option value="7">
                                July</option>
                            <option value="8">
                                August</option>
                            <option value="9">
                                September</option>
                            <option value="10">
                                October</option>
                            <option value="11">
                                November</option>
                            <option value="12">
                                December</option> 
                               
                        </select>
                    </div>
                </div>

                <div class="form-group row ml-2">
                    <label for="amountyearSelect" class="col-sm-auto col-form-label small-margin">Year:</label>
                    <div class="col-sm-auto">
                        <select id="amountyearSelect" onchange="monthlyamountDetails()" class="form-select small-select"
                            aria-label="Default select example">
                            <option value="" selected="" disabled="">Select Year</option>
                            <option value="2023">
                                2023</option>
                            <option value="2024">
                                2024</option>
                            <option selected="" value="2025">
                                2025</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="mx-4 row" id="totalamount">
       
    </div> 
</div>
@endsection
{{-- <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel">Payment Detail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="tableExample">
                    <div class="table-responsive scrollbar ">
                    <table class="table table-bordered table-striped fs--1 mb-0">
                    <thead class="bg-200 text-900">
                        <tr>
                            <th>Order Code</th>
                            <th>Topic</th>
                            <th>Total Amount</th>
                            <th>Paid</th>
                            <th>Due</th>
                            <th>Payment Date</th>
                            <th>Payment Status</th>
                        </tr>
                    </thead>
                    <tbody class="list paymenttable">
                    </tbody>
                    </table>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>  --}}
<script>

    function monthlyDetails() {
        let id = 'dayWise';
        if ($('#' + id).hasClass('slick-initialized')) {
            $('#' + id).slick('unslick');
        }

        var week = $('#weekSelect').val();
        var month = $('#monthSelect').val();
        var year = $('#yearSelect').val();
        $.ajax({
                type: "POST",
                url: "{{ route('monthlyDetails') }}", // Define this route in web.php
                data: {
                    week: week,
                    month: month,
                    year: year,
                    _token: "{{ csrf_token() }}" // ✅ CSRF protection
                },
                beforeSend: function() {
                    // if (h === 'yes') {
                        $('#dayWise').html(
                            `<div style="text-align: center; color: rgb(40, 127, 187); font-size: 16px; margin: 167px 0 0 0;">
                        <img src="{{ asset ('falcon-theme/assets/img/loading_refaresh.gif') }}" width="80" height="80" />
                        <br/>Please wait Loading...
                    </div>`
                        );
                    // }
                },
            }).done(function(msg) {
                $('#dayWise').html(msg);
                $('#dayWise').slick({
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    arrows: true,
                    infinite: false,
                    dots: true,
                    responsive: [{
                            breakpoint: 992,
                            settings: {
                                slidesToShow: 2
                            }
                        },
                        {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 1
                            }
                        }
                    ]
                });
               
            });
      
    }
    function monthlyleadsDetails() {
        let id = 'leadsdayWise';
        if ($('#' + id).hasClass('slick-initialized')) {
            $('#' + id).slick('unslick');
        }

        var week = $('#leadsweekSelect').val();
        var month = $('#leadsmonthSelect').val();
        var year = $('#leadsyearSelect').val();
        $.ajax({
                type: "POST",
                url: "{{ route('leadsmonthlyDetail') }}", // Define this route in web.php
                data: {
                    week: week,
                    month: month,
                    year: year,
                    _token: "{{ csrf_token() }}" // ✅ CSRF protection
                },
                beforeSend: function() {
                    // if (h === 'yes') {
                        $('#totalleads').html(
                            `<div style="text-align: center; color: rgb(40, 127, 187); font-size: 16px; margin: 167px 0 0 0;">
                        <img src="{{ asset ('falcon-theme/assets/img/loading_refaresh.gif') }}" width="80" height="80" />
                        <br/>Please wait Loading...
                    </div>`
                        );
                    // }
                },
            }).done(function(msg) {
                $('#totalleads').html(msg);
                $('#leadsdayWise').slick({
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    arrows: true,
                    infinite: false,
                    dots: true,
                    responsive: [{
                            breakpoint: 992,
                            settings: {
                                slidesToShow: 2
                            }
                        },
                        {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 1
                            }
                        }
                    ]
                });
               
            });
      
    }
    function monthlyamountDetails() {
        let id = 'amountdayWise';
        if ($('#' + id).hasClass('slick-initialized')) {
            $('#' + id).slick('unslick');
        }

        var week = $('#amountweekSelect').val();
        var month = $('#amountmonthSelect').val();
        var year = $('#amountyearSelect').val();
        $.ajax({
                type: "POST",
                url: "{{ route('amountmonthlyDetail') }}", // Define this route in web.php
                data: {
                    week: week,
                    month: month,
                    year: year,
                    _token: "{{ csrf_token() }}" // ✅ CSRF protection
                },
                beforeSend: function() {
                    // if (h === 'yes') {
                        $('#totalamount').html(
                            `<div style="text-align: center; color: rgb(40, 127, 187); font-size: 16px; margin: 167px 0 0 0;">
                        <img src="{{ asset ('falcon-theme/assets/img/loading_refaresh.gif') }}" width="80" height="80" />
                        <br/>Please wait Loading...
                    </div>`
                        );
                    // }
                },
            }).done(function(msg) {
                $('#totalamount').html(msg);
                $('#amountdayWise').slick({
                    slidesToShow: 4,
                    slidesToScroll: 4,
                    arrows: true,
                    infinite: false,
                    dots: true,
                    responsive: [{
                            breakpoint: 992,
                            settings: {
                                slidesToShow: 2
                            }
                        },
                        {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 1
                            }
                        }
                    ]
                });
               
            });
      
    }
    function getPaymentDetail(month, status){
        var month = month;
        var year = $('#amountyearSelect').val();
        var status = status;
        $.ajax({
                type: "POST",
                url: "{{ route('getPaymentDetail') }}", // Define this route in web.php
                data: {
                   // week: week,
                    month: month,
                    year: year,
                    status:status,
                    _token: "{{ csrf_token() }}" 
                },
                beforeSend: function() {
                    // if (h === 'yes') {
                        $('#paymenttable').html(
                            `<div style="text-align: center; color: rgb(40, 127, 187); font-size: 16px; margin: 167px 0 0 0;">
                        <img src="{{ asset ('falcon-theme/assets/img/loading_refaresh.gif') }}" width="80" height="80" />
                        <br/>Please wait Loading...
                    </div>`
                        );
                    // }
                },
            }).done(function(msg) {
                $('.paymenttable').html(msg);
               
               
            });
    }
    function getdatePaymentDetail(paydate, status){
        var paydate = paydate;
        var year = $('#amountyearSelect').val();
        var month = $('#amountmonthSelect').val();
        var status = status;
        $.ajax({
                type: "POST",
                url: "{{ route('getDatePaymentDetail') }}", // Define this route in web.php
                data: {
                    date: paydate,
                    month: month,
                    year: year,
                    status:status,
                    _token: "{{ csrf_token() }}" 
                },
                beforeSend: function() {
                    // if (h === 'yes') {
                        $('#paymenttable').html(
                            `<div style="text-align: center; color: rgb(40, 127, 187); font-size: 16px; margin: 167px 0 0 0;">
                        <img src="{{ asset ('falcon-theme/assets/img/loading_refaresh.gif') }}" width="80" height="80" />
                        <br/>Please wait Loading...
                    </div>`
                        );
                    // }
                },
            }).done(function(msg) {
                $('.paymenttable').html(msg);
               
               
            });
    }
</script>