@extends('adminlte::page')

@section('title', $data['title'])

@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
        integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    </aside>
    <style>
        .month_date ul {
            display: flex;
            justify-content: space-between;
            overflow: auto;
            padding: 0;
        }

        .month_date ul li {
            list-style: none;
            margin: 0 5px;
            width: 100%;
            text-align: center;
            background: rgb(23 162 184 / 10%);
            padding: 10px;
            border-radius: 8px;
        }

        .month_date ul li p {
            margin: 0;
            font-weight: 600;
        }

        .month_date ul li.active {
            background: #17a2b8;
            color: #fff;
        }

        .count_dr {
            max-width: 300px;
            margin: 0 auto;
            background: #17a2b8;
            color: #fff;
            display: flex;
            align-items: center;
            padding: 15px 20px;
            border-radius: 8px;
        }

        .count_dr .right {
            width: 70%;
            text-align: center;
            border-left: 1px solid #ffffff;
            font-size: 20px;
            font-weight: 600;
        }

        .count_dr .left {
            width: 30%;
            text-align: center;
            font-size: 30px;
        }

        .count_dr .right h6 {
            color: #fff;
            font-size: 16px;
            margin: 0;
        }

        .text-dark-new {
            color: #000;
        }

        hr {
            margin: 1rem 0;
            color: inherit;
            border: 0;
            border-top: 1px solid #e4e4e4;
            opacity: 0.25;
        }

        .br_btn {
            color: #17a2b8;
            padding: 10px 20px;
            display: inline-block;
            background: transparent;
            border: 1px solid #17a2b8;
            border-radius: 8px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .br_btn:hover {
            color: #fff;
            background: #17a2b8;
        }

        .rx_value {
            display: flex;
            align-items: center;
            justify-content: end;
            padding-bottom: 10px;
        }

        .rx_value span {
            padding: 0 10px;
            font-weight: 600;
        }

        .input_rs_write {
            max-width: 110px;
            margin: 0 auto;
        }

        .input_rs_write input {
            background: transparent;
            border: 0 !important;
            border-bottom: 1px solid #b5b5b5 !important;
            border-radius: 0 !important;
            text-align: center;
        }

        .white_row {
            background: rgb(255 255 255);
            padding: 10px 12px;
            border-radius: 0;
            border: 1px solid #d3d3d3;
            border-bottom: 4px solid #17a2b8;
        }

        .white_row h2,
        .white_row p {
            margin: 0;
        }

        .white_row h2 {
            font-size: 20px;
            color: #17a2b8;
            font-weight: 600;
        }

        .export_file {
            box-shadow: 0 0 1px 0px #979797;
            text-align: center;
            padding: 0 0px 16px 0px;
            background: #fff;
        }

        .export_file p {
            background: #17a2b8;
            color: #fff;
            padding: 10px 10px;
            font-weight: 600;
        }

        .btn__export {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
        }

        .btn__export .btn {
            display: flex;
            align-items: center;
            margin: 0 5px;
        }

        .doctor_info li {
            padding: 8px 10px;
            font-size: 16px;
            background: #f7f7f7;
            margin-bottom: 5px;
            border-left: 2px solid #17a2b8;
        }

        .doctor_info li span {
            font-weight: 600;
            margin-right: 10px;
        }

        .doctor_info h4 {
            text-align: center;
            font-weight: 600;
            font-size: 18px;
            margin: 0 0 20px;
        }

        .dr_rs_detiles {
            max-width: 400px;
            margin: 0 auto;
            padding: 10px;
            border: 1px solid #d6d6d6;
            border-radius: 8px;
            margin-bottom: 10px;
            box-shadow: 0 0 3px #dbdbdb;
        }

        .dr_icon {
            text-align: center;
            padding: 10px 0 15px;
        }

        .dr_icon i {
            font-size: 40px;
            color: #17a2b8;
        }

        .dr_rs_detiles p {
            margin: 0;
            padding: 4px 0;
            font-size: 16px;
        }

        .dr_rs_detiles span {
            color: #17a2b8;
            font-weight: 500;
            padding: 0 10px 0 0;
        }

        .table th {
            background: #000;
            text-align: center;
            color: #fff;
            vertical-align: middle;
        }

        .table {
            vertical-align: middle;
            color: #000;
            text-align: center;
        }

        .brand-logo h4 span {
            font-weight: 400;
        }

        .text-end {
            text-align: right;
            font-weight: 300;
        }

        .dr_rs_detiles {
            max-width: 400px;
            margin: 0 auto;
            padding: 10px;
            border: 1px solid #d6d6d6;
            border-radius: 8px;
            margin-bottom: 10px;
            box-shadow: 0 0 3px #dbdbdb;
        }

        .dr_icon {
            text-align: center;
            padding: 0 0 5px;
        }

        .dr_icon i {
            font-size: 32px;
            color: #17a2b8;
        }

        .dr_rs_detiles p {
            margin: 0;
            padding: 2px 0;
            font-size: 12px;
        }

        .dr_rs_detiles span {
            color: #17a2b8;
            font-weight: 500;
            padding: 0 10px 0 0;
        }
    </style>

    <div class="content">
        <div class=" pt-3">
            <div class="col-12 text-start">
                <h4 class="page-title"><a href="/Homes"><i class="fa-solid text-dark fa-arrow-left-long mr-2"></i></a>Home
                    </h4>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="container-fluid">

                    {{--   @php
                        $selectedMonth = strtolower($response_arr['month'] ?? '');
                        $selectedYear = $response_arr['year'] ?? '';
                    @endphp --}}
                    <div class="row pt-2">
                        <div class="col-12">
                            <div class="month_date">
                                <ul>
                                    {{--  @foreach ($response_arr['monthList'] as $item)
                                        @php
                                            $month = strtolower($item['month']);
                                            $year = $item['year'];
                                            $isActive =
                                                $month === $selectedMonth && $year == $selectedYear ? 'active' : '';
                                        @endphp
                                        <li class="{{ $isActive }}">
                                            <p>{{ ucfirst($month) }}</p>
                                            <span>{{ $year }}</span>
                                        </li>
                                    @endforeach --}}
                                </ul>
                            </div>
                            <div class="dr_rs_detiles">
                                <div class="dr_icon">
                                    <i class="fa-solid fa-user-doctor"></i>
                                </div>
                                <p><span>Name :</span> {{ $response_arr['doctorInfo']['doctorName'] }}</p>
                                {{--                                 <p><span>Specialilty :</span> {{ $response_arr['doctorInfo']['speciallityName'] }}</p>
 --}} <p><span>MSL No. :</span> {{ $response_arr['doctorInfo']['mslNo'] }}
                                </p>
                                <p><span><i class="fa-regular fa-envelope"></i></span>
                                    {{ $response_arr['doctorInfo']['email'] }}</p>
                                <p><span><i class="fa-solid fa-phone"></i></span>
                                    {{ $response_arr['doctorInfo']['contactNo'] }}</p>
                                {{--  <input type="hidden" id="month" name="month" value="{{ $response_arr['month'] }}">
                                <input type="hidden" id="year" name="year" value="{{ $response_arr['year'] }}"> --}}
                                <input type="hidden" id="doctorId" name="doctorId"
                                    value="{{ $response_arr['doctorInfo']['doctorId'] }}">
                            </div>
                            <div class="col-lg-12  col-md-12 col-sm-12 col-12 text-center">
                                {{-- <a href="/dpm-card/{{ $month }}/{{ $year }}/{{ $response_arr['doctorInfo']['doctorId'] }}"
                                    class="br_btn">View DPM Card</a> --}}
{{--                                 <button class="br_btn submitPotential">Next</button>
 --}}                            </div>

                        </div>
                    </div>

                    <div class="row pt-2">
                        <div class="col-12 text-start">
                            {{--                             <h4 class="main_title">{{ ucfirst($selectedMonth) . '-' . $selectedYear . ' Support' }}</h4>
 --}} </div>


                        <div class="col-12">
                            <div class="white_table">
                                <!-- <div class="rx_value">
                                                                                                              <span>Rx</span>
                                                                                                              <div class="toggle">
                                                                                                                <input type="checkbox" class="phase-class">
                                                                                                                <label></label>
                                                                                                              </div>
                                                                                                              <span>Value</span>
                                                                                                            </div> -->
                                <div class="card">
                                    <!-- <div class="card-header">
                                                                                                                  <div class="card-tools">
                                                                                                                    <form method="get" id="frm_search_users" action="">
                                                                                                                      <div class="input-group input-group-sm">
                                                                                                                        <input type="text" name="name" class="form-control float-right" value="" placeholder="Search">

                                                                                                                        <div class="input-group-append">
                                                                                                                          <button type="submit" class="btn btn-default"><i class="fas fa-search"></i></button>
                                                                                                                        </div>
                                                                                                                      </div>
                                                                                                                    </form>
                                                                                                                  </div>
                                                                                                                </div> -->
                                    <!-- /.card-header -->
                                    <div class="d-flex justify-content-end mb-2">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="toggleView">
                                            <label class="form-check-label" for="toggleView">Show Value</label>
                                        </div>
                                    </div>

                                    <div class="card-body table-responsive p-0">
                                        @if (!empty($response_arr['productList']) && !empty($response_arr['supportList']))
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Month</th>
                                                    @foreach ($response_arr['productList'] as $product)
                                                        <th>{{ $product->productName }}</th>
                                                    @endforeach
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($response_arr['supportList'] as $monthKey => $monthData)
                                                    <tr>
                                                        <td>{{ ucfirst($monthKey) }}</td>
                                                        @foreach ($response_arr['productList'] as $index => $product)
                                                            @php
                                                                $supportCount = isset($monthData[$index + 1]) ? (int) $monthData[$index + 1] : 0;
                                                                $productPrice = (float) $product->productPrice;

                                                                $isFirstHalf = in_array(strtolower($monthKey), ['apr', 'may', 'jun', 'jul', 'aug', 'sep']);

                                                                $potentialSource = $isFirstHalf ? $response_arr['potentialList']['first'] ?? [] : $response_arr['potentialList']['second'] ?? [];
                                                                $potentialValue = isset($potentialSource[$index + 1]) ? (float) $potentialSource[$index + 1] : 0;
                                                                $adjustedPotential = $potentialValue / 6;

                                                                $calculatedValue = $productPrice * 2 * 4 * $supportCount * $adjustedPotential;
                                                            @endphp

                                                            <td class="support-cell"
                                                                data-support="{{ $supportCount }}"
                                                                data-value="{{ number_format($calculatedValue, 2) }}">
                                                                {{ $supportCount }}
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    @else
                                        <div style="background-color: #17a2b8" class="alert text-center">No Data Found</div>
                                    @endif


                                    </div>



                                    <!-- /.card-body -->
                                </div>
                                <div class="col-lg-12  col-md-12 col-sm-12 col-12 text-center">

{{--                                     <button class="br_btn submitPotential">Next</button>
 --}}                                </div>

                            </div>
                        </div>

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

            <!-- <div class="row mb-3">
                                                                                              <div class="col-lg-auto  col-md-auto col-sm-auto ms-auto">
                                                                                                <a href="#" class="btn btn-success"><i class="fa fa-download me-2"></i>Export </a>
                                                                                              </div>
                                                                                              <div class="col-lg-auto  col-md-auto col-sm-auto">
                                                                                                  <div class="d-flex align-items-center">
                                                                                                    <div id="reportrange" class="daterange">
                                                                                                      <i class="fa fa-calendar"></i>&nbsp;
                                                                                                      <span>January 11, 2024 - February 9, 2024</span> <i class="fa fa-caret-down"></i>
                                                                                                    </div>
                                                                                                    <a href="#" class="btn btn-primary ms-2"><i class="fa fa-search"></i></a>
                                                                                                    <a href="#" class="btn btn-danger ms-2"><i class="fa fa-times"></i></a>
                                                                                                  </div>
                                                                                                </div>
                                                                                            </div> -->

        </div>

    </div>




@stop
@section('adminlte_js')
    <script src="{{ asset('css/admin/notify.min.js') }}"></script>

    <script src="{{ asset('js/admin/chart.js') }}"></script>
    {{--     <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.rxWeekInput').forEach(input => {
                input.addEventListener('input', function() {
                    const id = this.dataset.id;
                    const price = parseFloat(this.dataset.price);
                    const rx = parseInt(this.value);
                    const totalValueInput = document.querySelector(
                        `.totalValueInput[data-id="${id}"]`);

                    if (!isNaN(rx)) {
                        const total = (rx * price * 2 * 4).toFixed(2);
                        totalValueInput.value = total;
                    } else {
                        totalValueInput.value = '';
                    }
                });
            });
        });
    </script> --}}

    <script>
        document.getElementById('toggleView').addEventListener('change', function() {
            const isChecked = this.checked;
            document.querySelectorAll('.support-cell').forEach(cell => {
                cell.textContent = isChecked ?
                    cell.dataset.value :
                    cell.dataset.support;
            });
        });
    </script>






    <script>
        function updatePotentialData() {
            const doctorId = $('#doctorId').val();
            const month = $('#month').val();
            const year = $('#year').val();

            const supportList = [];
            let hasEmpty = false;

            // Loop over .supportInput instead of .rxWeekInput
            $('.supportInput').each(function() {
                const productId = $(this).data('id');
                const support = parseInt($(this).val());
                if (support === "" || isNaN(support)) {
                    hasEmpty = true;
                }



                const totalValue = parseFloat($(this).data('value') || 0);

                supportList.push({
                    productId: productId,
                    support: support,
                    totalValue: totalValue
                });
            });

            if (hasEmpty) {
                $.notify('Please fill all Support fields before submitting.', "error");
                return false; // stop submission
            }

            $.ajax({
                url: "{{ route('web.support.update') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    doctorId: doctorId,
                    month: month,
                    year: year,
                    supportList: JSON.stringify(supportList)
                },
                success: function(response) {
                    if (response.status === '1') {
                        $.notify(response.message, "success");
                        setTimeout(function() {
                            window.location.href = `/support/${month}/${year}/${doctorId}`;
                        }, 2000);
                    } else {
                        $.notify(response.message, "error");
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error:", error);
                    $.notify('Something went wrong. Please try again later.', "error");
                }
            });
        }


        $(document).ready(function() {
            $('.submitPotential').on('click', function() {
                updatePotentialData();
            });
        });
    </script>

@stop