@extends('adminlte::page')

@section('title', $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">
            @php
            $selectedMonth = strtolower($response_arr['month'] ?? '');
            $selectedYear = $response_arr['year'] ?? '';
        @endphp
            <div class="col-12 text-start">
                <h4 class="page-title"><a href="/potential/{{ $selectedMonth }}/{{ $selectedYear }}/{{ Crypt::encrypt($doctorInfo['doctorId']) }}"><i class="fa-solid text-dark fa-arrow-left-long mr-2"></i></a>Fill
                    Potential</h4>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="container-fluid">


                    <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> {{ $doctorInfo['doctorName'] }}</p>
                                <p><span>Specialilty :</span> {{ $doctorInfo['speciallityName'] }}</p>
                                <p><span>MSL No. :</span> {{ $doctorInfo['mslNo'] }}</p>
                                <p><span><i class="fa-regular fa-envelope"></i></span> {{ $doctorInfo['email'] }}</p>
                                <p><span><i class="fa-solid fa-phone"></i></span> {{ $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="{{ $doctorInfo['doctorId'] }}">
                                <input type="hidden" id="encrypt_id" name="encrypt_id"
                                value="{{ Crypt::encrypt($doctorInfo['doctorId']) }}">
                            </div>
                            <div class="col-lg-12  col-md-12 col-sm-12 col-12 text-center">
                                <a href="/dpm-card/{{ $month }}/{{ $year }}/{{ Crypt::encrypt($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">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Potential (Rx/Week)</th>
                                                    <th>Support (Rxn/Week)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($response_arr['supportList'] as $support)
                                                    <tr>
                                                        <td>
                                                            {{ $support['product'] . ' (' . number_format($support['productPrice'], 2) . ')' }}
                                                        </td>
                                                        <td class="potential-td" data-rx="{{ $support['rxValue'] }}"
                                                            data-value="{{ $support['potentialTotal'] }}">
                                                            {{ $support['rxValue'] }}
                                                        </td>
                                                        <td>
                                                            <div class="input_rs_write">
                                                                <input type="number" class="form-control supportInput"
                                                                    name="support[{{ $support['id'] }}]"
                                                                    value="{{ $support['support'] }}"
                                                                    placeholder="Enter Support" min="0"
                                                                    max="999" data-id="{{ $support['id'] }}"
                                                                    data-potentialTotal="{{ $support['potentialTotal'] }}"
                                                                    data-value="{{ $support['totalValue'] }}"
                                                                    oninput="if(this.value !== '') {
                                                                        this.value = Math.max(0, Math.min(999, parseInt(this.value) || 0));
                                                                    }">
                                                            </div>

                                                        </td>

                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </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.addEventListener("DOMContentLoaded", function() {
            const toggle = document.getElementById("toggleView");
            const potentialTds = document.querySelectorAll(".potential-td");

            toggle.addEventListener("change", function() {
                potentialTds.forEach(td => {
                    td.textContent = this.checked ? td.dataset.value : td.dataset.rx;
                });
            });


            const supportInputs = document.querySelectorAll(".supportInput");

            supportInputs.forEach(input => {
                input.addEventListener("input", function() {
                    const supportValue = parseInt(this.value || 0);
                    const potentialTotal = parseFloat(this.dataset.potentialtotal);

                    const totalValue = (supportValue * potentialTotal).toFixed(2);

                    this.setAttribute('data-value', totalValue);
                });
            });
        });
    </script>





    <script>
        function updatePotentialData() {
            const doctorId = $('#doctorId').val();
            const encrypt_id = $('#encrypt_id').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 = `/dpm-card/${month}/${year}/${encrypt_id}`;
                        }, 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