@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" />

    <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: 16px;
        }

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



    <div class="content">
        <div class="container-fluid">
            <div class="card">
                <div class="card-body">
                    <div class="row pt-3">
                        @if (Auth::user()->user_type == 'SM')
                            <div class="col-lg-4 col-md-4 col-sm-6 col-12 m-auto">
                                <div class="mb-3">
                                    <label for="" class="form-label">RBM <span class="text-red">*</span></label>
                                    <select class="select2 js-example-basic-single select-label form-control w-100"
                                        name="rbm_select" id="rbm_select"
                                        onchange="loadUsers(this.value, 'ABM', 'abm_select')">
                                        <option value="">Select RBM</option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->pos_code }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="w-100"></div>

                            <div class="col-lg-4 col-md-4 col-sm-6 col-12 m-auto">
                                <div class="mb-3">
                                    <label for="" class="form-label">ABM <span class="text-red">*</span></label>
                                    <select class="select2 js-example-basic-single select-label form-control w-100"
                                        name="abm_select" id="abm_select"
                                        onchange="loadUsers(this.value, 'BE', 'be_select')">
                                        <option value="">Select ABM</option>
                                    </select>
                                </div>
                            </div>

                            <div class="w-100"></div>

                            <div class="col-lg-4 col-md-4 col-sm-6 col-12 m-auto">
                                <div class="mb-3">
                                    <label for="" class="form-label">BE <span class="text-red">*</span></label>
                                    <select class="select2 js-example-basic-single select-label form-control w-100"
                                        name="be_select" id="be_select">
                                        <option value="">Select BE</option>
                                    </select>
                                </div>
                            </div>
                        @elseif (Auth::user()->user_type == 'RBM')
                            <div class="col-lg-4 col-md-4 col-sm-6 col-12 m-auto">
                                <div class="mb-3">
                                    <label for="" class="form-label">ABM <span class="text-red">*</span></label>
                                    <select class="select2 js-example-basic-single select-label form-control w-100"
                                        name="abm_select_2" id="abm_select_2"
                                        onchange="loadUsers(this.value, 'BE', 'be_select_2')">
                                        <option value="">Select ABM</option>
                                    </select>
                                </div>
                            </div>

                            <div class="w-100"></div>

                            <div class="col-lg-4 col-md-4 col-sm-6 col-12 m-auto">
                                <div class="mb-3">
                                    <label for="" class="form-label">BE <span class="text-red">*</span></label>
                                    <select class="select2 js-example-basic-single select-label form-control w-100"
                                        name="be_select_2" id="be_select_2">
                                        <option value="">Select BE</option>
                                    </select>
                                </div>
                            </div>
                        @elseif (Auth::user()->user_type == 'ABM')
                            <div class="col-lg-4  col-md-4 col-sm-6 col-12 m-auto">
                                <div class="mb-3">
                                    <label for="" class="form-label">BE <span class="text-red">*</span></label>
                                    <select class="select2 js-example-basic-single select-label form-control w-100"
                                        name="be_select_3" id="be_select_3">
                                        <option value="" selected>Select BE</option>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->pos_code }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        @endif




                    </div>
                    <hr>
                    @if (Auth::user()->user_type == 'BE')
                    <div class="supportDiv">

                    @else
                    <div class="supportDiv" style="display: none">

                    @endif
                        <div class="row pt-2 justify-content-center">
                            {{-- @if (Auth::user()->user_type == 'BE')
                                <div class="col-12 text-center">
                                    <h2 class="main_title">Support</h2>
                                </div>
                            @endif --}}
                            <div class="col-12">
                                <div class="month_date">
                                    <div class="col-12">
                                        <label for="" class="form-label text-center w-100">Select Month <span
                                                class="text-red">*</span></label>
                                        <ul id="monthList">
                                            <!-- Months will be inserted here dynamically -->
                                        </ul>
                                    </div>
                                </div>
                                <input type="hidden" id="monthName" name="monthName">
                                <input type="hidden" id="yearName" name="yearName">

                                <div class="count_dr">
                                    <div class="left">
                                        <i class="fa-solid fa-user-doctor"></i>
                                    </div>
                                    <div class="right">
                                        <span id="doctorCount">0/0</span>
                                        <h6>Filled / Total Drs</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mt-3">
{{--                                 @if (Auth::user()->user_type == 'BE')
                                    <div class="col-lg-4  col-md-4 col-sm-6 col-12 m-auto">
                                        <label for="" class="form-label">Click here to update support of pendings
                                            Drs<span class="text-red">*</span></label>
                                        <select class="select2 js-example-basic-single select-label form-control w-100"
                                            name="support_doctors" id="support_doctors" onchange="loadSupport(this.value)">
                                            <option value="" selected>Select Doctor</option>
                                        </select>
                                        <div class="text-end">
                                            <a href="" class="text-dark-new">
                                                <b>Download Pending Doctor</b>
                                            </a>
                                        </div>
                                    </div>
                                @endif --}}
                                <hr>
                                <div class="col-12 text-center">
                                    <h2 class="main_title">Potential</h2>
                                </div>
                                {{--    <div class="month_date">
                                    <ul>
                                        <li>
                                            <p>April - Sep</p>
                                        </li>
                                        <li class="active">
                                            <p>Oct -Mar</p>
                                        </li>
                                    </ul>
                                </div> --}}
                                <div class="col-lg-4  col-md-4 col-sm-6 col-12 m-auto">
                                    <label for="" class="form-label">Click here to update pending Potential for
                                        Drs<span class="text-red">*</span></label>
                                    <select class="select2 js-example-basic-single select-label form-control w-100"
                                        name="potential_doctors" id="potential_doctors"
                                        onchange="loadPotential(this.value)">
                                        <option value="" selected>Select Doctor</option>
                                    </select>
                                    <div class="text-end">
                                        <a href="" class="text-dark-new">
                                            {{-- <b>Download Pending Doctor</b> --}}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>



@stop
@section('adminlte_js')
    <script src="{{ asset('js/admin/chart.js') }}"></script>
    <script>
        function loadPotential(doctor_id) {

            if (doctor_id) {
                let monthName = $('#monthName').val();
                let yearName = $('#yearName').val();

                if (monthName && yearName) {
                    let url = `/potential/${monthName}/${yearName}/${doctor_id}`;
                    window.location.href = url;
                }
            }
        }

        function loadSupport(doctor_id) {
            if (doctor_id) {
                let monthName = $('#monthName').val();
                let yearName = $('#yearName').val();

                if (monthName && yearName) {
                    let url = `/support/${monthName}/${yearName}/${doctor_id}`;
                    window.location.href = url;
                }
            }
        }

        function loadUsers(pos_code, role, targetDropdownId) {
            if (!pos_code) {
                $('#' + targetDropdownId).html('<option value="">Select ' + role + '</option>'); // Reset if empty
                return;
            }

            $('#' + targetDropdownId).html('<option value="">Loading...</option>'); // Show loading state

            $.ajax({
                url: "{{ route('getChildUsers') }}", // Laravel route to get child users
                type: "POST",
                data: {
                    pos_code: pos_code,
                    user_type: role,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    $('#' + targetDropdownId).html('<option value="">Select ' + role + '</option>'); // Reset
                    if (response.length > 0) {
                        $.each(response, function(index, user) {
                            $('#' + targetDropdownId).append('<option value="' + user.pos_code + '">' +
                                user
                                .name + '</option>');
                        });
                    }
                }
            });
        }

        function HomeData(pos_code) {
            $.ajax({
                url: "{{ route('web.home.data') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    pos_code: pos_code
                },
                success: function(response) {
                    if (response.status === 1 && response.result.monthList) {
                        let monthList = response.result.monthList;
                        let monthListHtml = '';

                        monthList.forEach((item, index) => {
                            let isActive = index === 0 ? 'active' : '';
                            monthListHtml += `
                                <li class="${isActive}" onclick="selectMonth(this, '${item.month.toLowerCase()}', '${item.year}')">
                                    <p>${item.month}</p>
                                    <span>${item.year}</span>
                                </li>
                            `;
                        });
                        if (monthList.length > 0) {
                            let firstMonth = monthList[0].month.toLowerCase();
                            let firstYear = monthList[0].year;

                            // Set the hidden input values
                            $('#monthName').val(firstMonth);
                            $('#yearName').val(firstYear);
                        }

                        $('#monthList').html(monthListHtml);


                        if (response.result.dpmList) {
                            let total = response.result.dpmList.totalDoctorCount || 0;
                            let remaining = response.result.dpmList.remainingDoctorCount || 0;
                            let filled = total - remaining;

                            $('#doctorCount').text(`${filled}/${total}`);

                            if (response.result.dpmList.remainingDoctorList) {
                                let remainingDoctors = response.result.dpmList.remainingDoctorList;
                                let doctorOptions =
                                    '<option value="" selected>Select Doctor</option>';

                                remainingDoctors.forEach(function(doctor) {
                                    doctorOptions += `
            <option value="${doctor.encrypt_id}">${doctor.doctorName}</option>
        `;
                                });

                                $('#support_doctors').html(doctorOptions);
                                $('#potential_doctors').html(doctorOptions);

                            }



                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error:", error);
                }
            });
        }

        function monthData(month, year, selectValue) {
            $.ajax({
                url: "{{ route('web.month.data') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    month: month,
                    year: year,
                    selectValue: selectValue,
                },
                success: function(response) {
                    if (response.status === 1 && response.result) {
                        if (response.result) {
                            let total = response.result.totalDoctorCount || 0;
                            let remaining = response.result.remainingDoctorCount || 0;
                            let filled = total - remaining;

                            $('#doctorCount').text(`${filled}/${total}`);

                            if (response.result.remainingDoctorList) {
                                let remainingDoctors = response.result.remainingDoctorList;
                                let doctorOptions =
                                    '<option value="" selected>Select Doctor</option>';

                                remainingDoctors.forEach(function(doctor) {
                                    doctorOptions += `
            <option value="${doctor.encrypt_id}">${doctor.doctorName}</option>
        `;
                                });

                                $('#support_doctors').html(doctorOptions);
                                $('#potential_doctors').html(doctorOptions);

                            }



                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Error:", error);
                }
            });
        }

        $(document).ready(function() {
            @if (Auth::user()->user_type == 'BE')
                HomeData();
            @endif

            $('#be_select_3, #be_select_2, #be_select').on('change', function() {
                if ($(this).val()) {
                    $('.supportDiv').show();
                    HomeData($(this).val());
                } else {
                    $('.supportDiv').hide();
                }
            });
        });

        function selectMonth(element, month, year) {
            document.querySelectorAll('#monthList li').forEach(li => li.classList.remove('active'));
            element.classList.add('active');


            let selectValue = null;
            if ($('#be_select_3').val()) {
                selectValue = $('#be_select_3').val();
            } else if ($('#be_select_2').val()) {
                selectValue = $('#be_select_2').val();
            } else if ($('#be_select').val()) {
                selectValue = $('#be_select').val();
            }

            $('#monthName').val(month);
            $('#yearName').val(year);

            monthData(month, year, selectValue);
        }
    </script>

@stop