@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">
            <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 tabOne"
                    style="{{ $doctorInfo['profileStatus'] == 'pending' ? 'display: none' : '' }}">

                    <div class="row pt-2">
                        <div class="col-12">
                            <!-- <div class="month_date">
                                                                                              <ul>
                                                                                                <li class="active">
                                                                                                  <p>Jan</p>
                                                                                                  <span>2025</span>
                                                                                                </li>
                                                                                                <li>
                                                                                                  <p>Feb</p>
                                                                                                  <span>2025</span>
                                                                                                </li>
                                                                                                <li>
                                                                                                  <p>Mar</p>
                                                                                                  <span>2025</span>
                                                                                                </li>
                                                                                                <li>
                                                                                                  <p>Api</p>
                                                                                                  <span>2025</span>
                                                                                                </li>
                                                                                                <li>
                                                                                                  <p>May</p>
                                                                                                  <span>2025</span>
                                                                                                </li>
                                                                                                <li>
                                                                                                  <p>June</p>
                                                                                                  <span>2025</span>
                                                                                                </li>
                                                                                                <li>
                                                                                                  <p>Jul</p>
                                                                                                  <span>2025</span>
                                                                                                </li>
                                                                                                <li>
                                                                                                  <p>Aug</p>
                                                                                                  <span>2025</span>
                                                                                                </li>
                                                                                                <li>
                                                                                                  <p>Sep</p>
                                                                                                  <span>2025</span>
                                                                                                </li>
                                                                                                <li>
                                                                                                  <p>Oct</p>
                                                                                                  <span>2025</span>
                                                                                                </li>
                                                                                                <li>
                                                                                                  <p>Nov</p>
                                                                                                  <span>2025</span>
                                                                                                </li>
                                                                                                <li>
                                                                                                  <p>Des</p>
                                                                                                  <span>2025</span>
                                                                                                </li>
                                                                                              </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="{{ $month }}">
                                <input type="hidden" id="year" name="year" value="{{ $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">{{ $title }}</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="card-body table-responsive p-0">
                                        <table class="table table-hover">
                                            <thead>
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Potential (Rx/Week)</th>
                                                    <th>Value/Month</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($productList as $product)
                                                    <tr>
                                                        <td>{{ $product['product'] . ' (' . number_format($product['productPrice'], 2) . ')' }}
                                                        </td>
                                                        <td>
                                                            <div class="input_rs_write">
                                                                <input type="number" class="form-control rxWeekInput"
                                                                    name="rxWeek[{{ $product['id'] }}]"
                                                                    value="{{ isset($product['rxWeek']) && $product['rxWeek'] !== '' ? $product['rxWeek'] : 0 }}"
                                                                    placeholder="Enter Rx/Week"
                                                                    data-id="{{ $product['id'] }}"
                                                                    data-price="{{ $product['productPrice'] }}"
                                                                    step="1" min="0" max="999"
                                                                    oninput="this.value = Math.max(0, Math.min(999, parseInt(this.value || 0)))">
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="input_rs_write">
                                                                <input type="text" class="form-control totalValueInput"
                                                                    name="totalValue[{{ $product['id'] }}]"
                                                                    value="{{ isset($product['totalValue']) && $product['totalValue'] !== '' ? $product['totalValue'] : 0.0 }}"
                                                                    placeholder="Enter Total Value" readonly
                                                                    data-id="{{ $product['id'] }}">
                                                            </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 class="container-fluid tabTwo"
                    style="{{ $doctorInfo['profileStatus'] == 'pending' ? '' : 'display: none' }}">

                    <div class="row pt-2">
                        <div class="col-12">
                            <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>
                                <input type="hidden" id="month" name="month" value="{{ $month }}">
                                <input type="hidden" id="year" name="year" value="{{ $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>
                    </div>

                    <div class="row justify-content-center">
                        <div class="col-6">
                            <div class="white_table">
                                <div class="card">
                                    <div class="card-body table-responsive p-0">
                                        <input type="text" id="email" name="email" class="form-control mb-2"
                                            placeholder="Email">
                                        <input type="text" id="contactNo" name="contactNo" class="form-control mb-2"
                                            placeholder="Contact No">

                                        <div id="chemistWrapper">
                                            <div class="chemist-group d-flex mb-2">
                                                <input type="text" name="chemist[]" class="form-control"
                                                    placeholder="Chemist Name">
                                                <button type="button" class="btn btn-success ms-2 addChemist">+</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="text-center mt-2">
                                    <button class="br_btn submitDoctor">Submit</button>
                                </div>
                            </div>
                        </div>
                    </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 = '';
                    }
                });
            });
        });

        $(document).on('click', '.addChemist', function() {
            let chemistGroup = `
        <div class="chemist-group d-flex mb-2">
            <input type="text" name="chemist[]" class="form-control" placeholder="Chemist Name">
            <button type="button" class="btn btn-danger ms-2 removeChemist">−</button>
        </div>`;
            $('#chemistWrapper').append(chemistGroup);
        });

        $(document).on('click', '.removeChemist', function() {
            $(this).closest('.chemist-group').remove();
        });
    </script>


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

            const potentialList = [];
            $('.rxWeekInput').each(function() {
                const productId = $(this).data('id');
                const rxWeek = $(this).val() || 0;
                const totalValue = $(this).closest('tr').find('.totalValueInput').val() || 0;

                potentialList.push({
                    productId: productId,
                    rxWeek: parseInt(rxWeek),
                    totalValue: parseFloat(totalValue)
                });
            });

            $.ajax({
                url: "{{ route('web.potential.update') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    doctorId: doctorId,
                    month: month,
                    year: year,
                    potentialList: JSON.stringify(potentialList)
                },
                success: function(response) {
                    if (response.status === '1') {
                        $.notify(response.message, "success");
                        setTimeout(function() {
                            window.location.href = `/support/${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");
                }
            });
        }


        function updateDoctorData() {
            const doctorId = $('#doctorId').val();
            const encrypt_id = $('#encrypt_id').val();
            const month = $('#month').val();
            const year = $('#year').val();
            const email = $('#email').val();
            const contactNo = $('#contactNo').val();

            // Collect all chemist input values
            let chemistList = [];
            $('input[name="chemist[]"]').each(function() {
                const chemistName = $(this).val().trim();
                if (chemistName !== '') {
                    chemistList.push(chemistName);
                }
            });

            // Validate at least one chemist
            if (chemistList.length === 0) {
                $.notify('Please enter at least one chemist.', 'error');
                return;
            }

            $.ajax({
                url: "{{ route('web.doctor.update') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    doctorId: doctorId,
                    month: month,
                    year: year,
                    email: email,
                    contactNo: contactNo,
                    chemist: chemistList.join(',') // Send as comma-separated
                },
                success: function(response) {
                    if (response.status === '1') {
                        $.notify(response.message, "success");
                        setTimeout(function() {
                            window.location.href = `/potential/${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();
            });

            $('.submitDoctor').on('click', function() {
                updateDoctorData();
            });
        });
    </script>

@stop