@include('layout.matchHeader')

<link href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" rel="stylesheet">
<link href="https://cdn.datatables.net/fixedheader/4.0.1/css/fixedHeader.dataTables.css" rel="stylesheet">


<style>
</style>
<div class="wrapper" id="wrapper">
    <div class="container-fluid">

        <div class="row">
            <div class="col-auto text-end mt-3">
                <div class="back_arrow">
                    <a href="{{ route('manageMatch') }}"><i class="fa-solid fa-arrow-left-long me-2"></i> Back</a>
                </div>
            </div>

        </div>
    </div>
    <section class="action_data">
        <div class="container-fluid">
            <div class="row mb-3">
                <div class="col-12">
                    <div class="white_shadow_rs">
                        <div class="row">
                            <div class="col-12 col-md-12 col-lg-auto my-auto">
                                <h4 class="text-primary text-center">{{ $match_data->match_name }}</h4>
                            </div>
                            <div class="col-12 col-md-auto col-lg-auto my-auto">
                                <h4 class="text-center">
                                    {{ date('d M Y H:i:s', strtotime($match_data->match_start_time)) }}</h4>
                            </div>
                            <div class="col-12 col-md-auto col-lg-6 m-auto">
                                <div class="logo_match bg_remove">
                                    <div class="left">
                                        {{ $match_data->team_name1 }}
                                        <img src="{{ asset('front/assets/images/logo/' . $match_data->team_logo1) }}">
                                    </div>
                                    <div class="middle">
                                        <img src="{{ asset('front/assets/images/vs.png') }}" class="vs">
                                    </div>
                                    <div class="right">
                                        <img src="{{ asset('front/assets/images/logo/' . $match_data->team_logo2) }}">
                                        {{ $match_data->team_name2 }}
                                    </div>
                                </div>
                            </div>

                            @if ($match_data->winning_team != '' && $match_data->is_draw != 'yes')
                                <div class="col-12 col-md-12 col-lg-auto my-auto">

                                    <h5 style="color:#3b3b3b;"><span style="color:#38328A;">Man of the Match:</span>
                                        {{ $match_data['man_of_the_match_names'] }}</h5>
                                </div>
                            @elseif($match_data->is_draw != 'no')
                                <div class="col-12 col-md-12 col-lg-auto my-auto">

                                    <h5 style="color:#3b3b3b;"><span style="color:#38328A;">Match Draw</span>
                                        {{-- {{ $match_data['emp_name'] }}</h5> --}}
                                </div>
                            @else
                                <div class="col-12 col-md-12 col-lg-auto my-auto">
                                    <div id="countdown" class="countdown">
                                        <ul>
                                            <li><span id="days">99</span> days</li>
                                            <li><span id="hours">23</span> hours</li>
                                            <li><span id="minutes">59</span> minutes</li>
                                            <li><span id="seconds">59</span> seconds</li>
                                        </ul>
                                    </div>
                                </div>
                            @endif

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tabiing">
            <ul class="tabs1">
                <li class="tab-link1 current" onclick="getScoreData({{ $match_data->team_1_id }})" data-tab="tab-1"><i
                        class="fa-solid fa-people-group me-2"></i> {{ $match_data->team_name1 }}
                    :
                    {{ $match_data->team_1_members != 0 ? number_format($match_data->team1_total_score / $match_data->team_1_members, 1) . ' (' . $match_data->team_1_members . ') (' . $match_data->team1_total_score . ' RX)' : '-' }}
                    @if ($match_data->team_1_id == $match_data->winning_team)
                        <img src="{{ asset('front/assets/images/4.png') }}" width="25">
                    @endif
                </li>
                <li class="tab-link1 " onclick="getScoreData({{ $match_data->team_2_id }})" data-tab="tab-1"><i
                        class="fa-solid fa-people-group me-2"></i> {{ $match_data->team_name2 }}
                    :
                    {{ $match_data->team_2_members != 0 ? number_format($match_data->team2_total_score / $match_data->team_2_members, 1) . ' (' . $match_data->team_2_members . ') (' . $match_data->team2_total_score . ' RX)' : '-' }}
                    @if ($match_data->team_2_id == $match_data->winning_team)
                        <img src="{{ asset('front/assets/images/4.png') }}" width="25">
                    @endif
                </li>
            </ul>
        </div>
        <div class="tabiing_data">

            <div id="tab-1" class="tab-content1 current">
                <section class="live_match">
                    <div class="col-lg-12 col-12 table-responsive">
                        <table id="brandTable" class="table table-striped" style="width:100%">
                            <thead>
                                <tr>
                                    <th>BE Name</th>
                                    <th>Action</th>
                                    <th>Total</th>
                                    @foreach ($brandList as $brandValue)
                                        <th id="brand_{{ $brandValue->brand_id }}">{{ $brandValue->brand_name }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody id="scoreDataDisplay">

                            <tbody>
                        </table>
                    </div>
                </section>
            </div>
        </div>
    </section>
</div>



<div class="modal fade" id="all_brand" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">All Brand</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table id="" class="table table-striped data-table-dr" style="width:100%">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Zoryl Gr </th>
                            <th>Sartel Gr</th>
                            <th>Lipitas Gr</th>
                            <th>Ignalis Gr</th>
                            <th>Rx Points</th>
                            <th> Rx</th>
                        </tr>
                    </thead>
                    {{-- <tbody>
                        <tr>
                            <th>Event 1</th>
                            <td>0.02</td>
                            <td>0.00</td>
                            <td>0.00</td>
                            <td>0.50</td>
                            <td><span class="badge text-bg-success">13</span></td>
                            <td>
                                <a class="my-image-links" data-gall="gallery01"
                                    href="../assets/images/ahmedabad.png"><img src="../assets/images/ahmedabad.png"
                                        width="30"></a>
                            </td>
                        </tr>
                        <tr>
                            <th>Event 2</th>
                            <td>0.02</td>
                            <td>0.00</td>
                            <td>0.00</td>
                            <td>0.50</td>
                            <td><span class="badge text-bg-success">13</span></td>
                            <td>
                                <a class="my-image-links" data-gall="gallery01"
                                    href="../assets/images/ahmedabad.png"><img src="../assets/images/ahmedabad.png"
                                        width="30"></a>
                            </td>
                        </tr>
                        <tr>
                            <th>Event 3</th>
                            <td>0.02</td>
                            <td>0.00</td>
                            <td>0.00</td>
                            <td>0.50</td>
                            <td><span class="badge text-bg-success">13</span></td>
                            <td>
                                <a class="my-image-links" data-gall="gallery01"
                                    href="../assets/images/ahmedabad.png"><img src="../assets/images/ahmedabad.png"
                                        width="30"></a>
                            </td>
                        </tr>
                    <tbody> --}}
                </table>
            </div>
            <!-- <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Submit</button>
      </div> -->
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="be_brand" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel"> Point Table</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="team_match">
                    <table id="beAddedDatatable" class="table table-striped data-table-dr" style="width:100%">
                        <thead>
                            <tr>
                                <th>Sr No</th>
                                <th>Flag</th>
                                <th>Action</th>
                                <th>Date And Time</th>
                                <th>Doctor Name</th>
                                <th>Total Points</th>
                                <th>Rx</th>
                                @foreach (brandList() as $key => $value)
                                    <th>{{ $value['brand_name'] }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>

                        <tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> -->
                <!-- <button type="button" class="btn btn-primary">Submit</button> -->
            </div>
        </div>
    </div>
</div>


@include('addMyScore')
<div class="modal fade" id="view_brand" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">All Brand</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <ul class="modal_brand">
                    <li>Brand 1</li>
                    <li>Brand 2</li>
                    <li>Brand 3</li>
                    <li>Brand 4</li>
                    <li>Brand 5</li>
                    <li>Brand 6</li>
                    <li>Brand 7</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="flag_win" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
    data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Flag</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            {{ Form::open(['url' => '#', 'name' => 'add_flag_comment', 'id' => 'add_flag_comment', 'enctype' => 'multipart/form-data']) }}

            <div class="modal-body">
                <div class="mb-3">
                    {{-- <textarea class="form-control" id="flag_comment" name="flag_comment" rows="3" placeholder="Enter here"></textarea> --}}
                    <div class="col-lg-12">
                        <select class="select2 js-example-basic-single select-label form-control w-100" id="flag_comment" name="flag_comment">
                            <option value="" selected>Select Flag</option>
                            <option value="Old Date Rx">Old Date Rx</option>
                            <option value="No Nexa brands in Rx">No Nexa brands in Rx</option>
                            <option value="Nexa brand not clear">Nexa brand not clear</option>
                            <option value="Same Rx uploaded more than once">Same Rx uploaded more than once</option>
                            <option value="Wrong Photo upload">Wrong Photo upload</option>
                            <option value="Wrong Rx">Wrong Rx</option>
                            <option value="Wrong Dr">Wrong Dr</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                </div>
                <input type="hidden" name="flag_entry_id" id="flag_entry_id">
            </div>
            <div class="modal-footer">
                <button type="submit" id="add_flag_comment_submit" class="btn btn-primary">Save</button>
            </div>
            {{ Form::close() }}

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

<!-- Modal -->
<div class="modal fade" id="flag_comments_win" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Flag Comments</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body" id="flag_comments_body">

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


@include('modals')
@include('layout.footer')


<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/fixedheader/4.0.1/js/dataTables.fixedHeader.js"></script>
<script src="https://cdn.datatables.net/fixedheader/4.0.1/js/fixedHeader.dataTables.js"></script>

<script>
    $('#flag_win').on('hidden.bs.modal', function() {
        $('#be_brand').modal('show');
        $('#flag_comment').val('');
        $('#flag_entry_id').val('');
    });

    function openFlagModel(entry_id) {
        $('#flag_win').modal('show');
        $('#flag_entry_id').val(entry_id);
    }

    function openFlagCommentModel(entry_id) {
        $.ajax({
            url: '/admin/get_comment_data', // Replace with your actual route
            type: 'POST',
            data: {
                entry_id: entry_id,
                _token: '{{ csrf_token() }}' // Include CSRF token for Laravel
            },
            success: function(response) {
                if (response.status === 1) { // Check for success status
                    $('#flag_comments_body').empty();

                    let tableHtml = `
                    <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Employee Name</th>
                                <th>User Type</th>
                                <th>Comment</th>
                            </tr>
                        </thead>
                        <tbody>
                `;

                    response.comments.forEach(comment => {
                        tableHtml += `
                        <tr>
                            <td>${comment.emp_name}</td>
                            <td>${comment.user_type}</td>
                            <td>${comment.comment}</td>
                        </tr>
                    `;
                    });

                    tableHtml += `
                        </tbody>
                    </table>
                    </div>
                `;

                    $('#flag_comments_body').html(tableHtml);

                    $('#flag_comments_win').modal('show');
                } else {
                    $.notify('Error fetching comments', "error");
                }
            },
            error: function(xhr) {
                $.notify('Error fetching comments', "error");
            }
        });
    }
</script>

<script>
    $(document).ready(function() {

        $("#add_flag_comment").validate({
            ignore: ".ignore",
            rules: {
                flag_comment: {
                    required: true,
                },
            },
            messages: {},
            submitHandler: function(form) {
                $("#add_flag_comment_submit").attr('disabled', true);

                var formData = new FormData($("#add_flag_comment")[0]);
                $.ajax({
                    url: "/admin/add_flag_comment",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $.notify(response.message, "success");
                            $("#flag_win").modal('hide');
                            viewAddedData(response.user_id, response.match_id);
                            form.reset();
                            $("#add_flag_comment_submit").attr('disabled', false);

                        } else {
                            $("#add_flag_comment_submit").attr('disabled', false);
                            $.notify(response.message, "error");
                        }
                    },
                    error: function(jqXHR) {
                        $("#add_flag_comment_submit").attr('disabled', false);
                        var errorMessage = jqXHR.responseJSON && jqXHR.responseJSON
                            .message ?
                            jqXHR.responseJSON.message :
                            'An unexpected error occurred. Please try again.';
                        $.notify(errorMessage, "error");
                    }
                });
            }
        });

        $('#brandTable').DataTable({
            scrollX: true,
            fixedHeader: true,
            pageLength: 25,
            searching: false,
            paging: false,
            ordering: false // Disables sorting on all columns

            // fixedHeader: {
            //     header: true,
            //     footer: true
            // },
            // fixedColumns:   {
            //     left: 2
            // },
            // language: {
            //     searchPlaceholder: "Search"
            // },
            // columnDefs: [
            //     { "width": "50px", "targets": [0] },       
            //     { "width": "130px", "targets": [1] },       
            //     { "width": "50px", "targets": [2] },
            //     { "width": "70px", "targets": [3,4,5,6,7,8,9,10,11,12,13,14] },
            //     { "width": "63px", "targets": [15] },
            //     { "width": "130px", "targets": [16] },
            //     { "width": "80px", "targets": [17] }
            //   ]

        });

        $('ul.tabs1 li').click(function() {
            var tab_id = $(this).attr('data-tab');

            $('ul.tabs1 li').removeClass('current');
            $('.tab-content1').removeClass('current');

            $(this).addClass('current');
            $("#" + tab_id).addClass('current');
        })

    })
</script>


<script>
    $('#brand_id').change(function() {
        brand_id = $('select[name="brand_id[]"]').val();
        if (brand_id == '22') {
            $("#OtherBrandID").show();
        } else {
            $("#OtherBrandID").hide();
        }
    });

    function view_document(filename) {
        const fileUrl = '{{ asset('storage/rxData') }}' + '/' + filename;

        document.getElementById("document_file_dis_id").innerHTML = '<iframe src="' + fileUrl +
            '" type="application/pdf" class="w-100" height="700" frameborder="0" title=""></iframe>';
    }



    $(function() {
        //$('.select1').multipleSelect()
        // $('.select1').multipleSelect({
        //   placeholder: 'Select Brand'
        // })
        $(".custom_select").on("click", ".init", function() {
            $(this).closest(".custom_select").children('li:not(.init)').toggle();
        });

        $(".custom_select").on("change", "input[type='checkbox']", function() {
            var textInput = $(this).siblings("input[type='text']");
            if (this.checked) {
                textInput.show();
            } else {
                textInput.hide().val('');
            }
            updateInit();
        });

        $(".custom_select").on("input", "input[type='text']", function() {
            updateInit();
        });

        function updateInit() {
            var selectedItems = [];
            $(".custom_select li:not(.init)").each(function() {
                var checkbox = $(this).find("input[type='checkbox']");
                var textInput = $(this).find("input[type='text']");
                var spanText = $(this).find("span").text();
                if (checkbox.is(":checked")) {
                    var text = textInput.val() ? spanText + ": " + textInput.val() : spanText;
                    selectedItems.push(text);
                }
            });
            $(".custom_select .init").text(selectedItems.length ? selectedItems.join(', ') : 'Select Brand');
        }

        $(".custom_select").on("click", "li:not(.init)", function(event) {
            if (!$(event.target).is("input")) {
                $(this).find("input[type='checkbox']").click();
            }
        });
    })
</script>
<script></script>


<script type="text/javascript">
    getScoreData({{ $match_data->team_1_id }});
    // getScoreData(1);
    function getScoreData(id) {
        $('.loader').css('display', 'flex');
        $.ajax({
            url: "{{ route('getScoreDataAdmin') }}",
            type: "POST",
            data: {
                _token: '{{ csrf_token() }}',
                team_id: id,
                match_id: '{{ $match_data->match_id }}'
            },
            success: function(result) {
                html = '';
                $.each(result.finalArr, function(key, value) {
                    html += '<tr>';

                    if (value.isMyChild == 'Y') {
                        if (value.isFlag == 'Y') {
                            html +=
                                '<td><a href="" data-bs-toggle="modal" onclick="viewAddedData(\'' +
                                value.user_id +
                                '\',\'' + {{ $match_data->match_id }} +
                                '\')" data-bs-target="#be_brand"><b>' +
                                value.emp_name + ' (' + value.designation + ')' +
                                '</b></a> <i class="fa-solid fa-exclamation" style="color: #ff0000;"></i></td> ';

                        } else {
                            html +=
                                '<td><a href="" data-bs-toggle="modal" onclick="viewAddedData(\'' +
                                value.user_id +
                                '\',\'' + {{ $match_data->match_id }} +
                                '\')" data-bs-target="#be_brand"><b>' +
                                value.emp_name + ' (' + value.designation + ')' + '</b></a></td>';
                        }
                        html +=
                            '<td><div class="d-flex justify-item-center"><button type="button" class="btn me-2 btn-outline-primary small_bt" onclick="downloadAddedData(\'' +
                            value.user_id + '\',\'' + {{ $match_data->match_id }} +
                            '\')"><i class="fa-solid fa-download"></i></button><button type="button" class="btn btn-outline-primary small_bt" onclick="downloadAddedFlagData(\'' +
                            value.user_id + '\',\'' + {{ $match_data->match_id }} +
                            '\')"><i class="fa-solid fa-flag"></i></button></div></td>';

                        html += '<td>' + value.total_value + '</td>';

                    } else {
                        html += '<td><b>' +
                            value.emp_name + ' (' + value.designation + ')' + '</b></td>';
                        html += '<td>' + value.total_value + '</td>';

                    }

                    $.each(value.brand_data, function(key, brandvalue) {
                        html += '<td>' + brandvalue.rx_value + '</td>';
                    });
                    html += '</tr>';
                });
                html += '<tr>';
                html += '<td><b>Total Average</b></td>';
                html += '<td>-</td>';
                html += '<td><b>' + (result.totalMatchScore / result.finalArr.length).toFixed(1) +
                    '</b></td>';
                $.each(result.totalBrandArr, function(key, totalbrandvalue) {
                    // html += '<td><b>' + totalbrandvalue / result.finalArr.length + '</b></td>';
                    html += '<td><b>' + '-' + '</b></td>';
                });
                html += '</tr>';

                $('#scoreDataDisplay').html(html);

                $('.loader').css('display', 'none');
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('.loader').css('display', 'none');

            }
        })
    }


    function viewAddedData(id, match_id) {
        var columns = [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                "orderable": false,
                searchable: false
            },
            {
                data: 'flag',
                name: 'flag',
            },
            {
                data: 'delete',
                name: 'delete',
            },
            {
                data: 'created_at',
                name: 'created_at',
            },
            {
                data: 'doctor_name',
                name: 'doctor_name',
            },
            {
                data: 'total_point',
                name: 'total_point',
            },
            {
                data: 'file_name',
                name: 'file_name',
            },
            @foreach (brandList() as $key => $value)
                {
                    data: 'step_' + {{ $value['brand_id'] }},
                    orderable: false,
                    searchable: false
                },
            @endforeach

        ];
        var columnDefs = [];
        getdatatable_added_data("{{ route('match.addedDataAdmin.paginate') }}",
            columns, columnDefs, id, match_id);

    }

    // function deleteEntry(entry_id) {
    //     let deleteUrl = `/admin/matchDataDeleteStatus/${entry_id}`;

    //     $.ajax({
    //         url: deleteUrl,
    //         type: 'GET',
    //         success: function(response) {
    //             if (response.status === 'success') {
    //                 $.notify(response.message, "success");
    //                 $('#beAddedDatatable').DataTable().ajax.reload(); // Reload the DataTable
    //             }
    //         },
    //         error: function(xhr) {
    //             $.notify('Error deleting entry', "error");
    //         }
    //     });
    // }


    function deleteEntry(entry_id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, cancel!',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                // Proceed with the deletion
                let deleteUrl = `/admin/matchDataDeleteStatus/${entry_id}`;

                $.ajax({
                    url: deleteUrl,
                    type: 'GET',
                    success: function(response) {
                        if (response.status === 'success') {
                            $.notify(response.message, "success");
                            viewAddedData(response.user_id, response.match_id);
                        } else {
                            $.notify('Error deleting entry', "error");

                        }
                    },
                    error: function(xhr) {
                        $.notify('Error deleting entry', "error");

                    }
                });
            } else if (result.dismiss === Swal.DismissReason.cancel) {
                $.notify('Cancelled', "error");

            }
        });
    }



    function downloadAddedData(id, match_id) {
        var id = id;
        var match_id = match_id;
        var url = "{{ route('downloadDataPoint') }}" + "?id=" + id + "&match_id=" + match_id;

        window.location.replace(url);
    }

    function downloadAddedFlagData(id, match_id) {
        var id = id;
        var match_id = match_id;
        var url = "{{ route('downloadDataFlagPoint') }}" + "?id=" + id + "&match_id=" + match_id;

        window.location.replace(url);
    }


    function getdatatable_added_data(url, columns, columnDefs, id, match_id) {
        $('#beAddedDatatable').DataTable({
            processing: true,
            serverSide: true,
            bDestroy: true,
            ordering: false,
            pageLength: 25,
            order: [],
            "scrollX": true,
            columns: columns,
            columnDefs: columnDefs,
            ajax: {
                method: 'post',
                url: url,
                data: function(d) {
                    d.user_id = id,
                        d.match_id = match_id,
                        d._token = "{{ csrf_token() }}"
                }
            },
            "drawCallback": function(settings) {
                // feather.replace();

            }
        });
    }


    function getDoctorData() {
        $.ajax({
            url: "{{ route('doctorData') }}",
            type: "POST",

            @if (auth()->user()->user_type == 'ABM')
                data: {
                    position_code: $('select[name="position_code"]').val(),
                    _token: '{{ csrf_token() }}'
                },
            @else
                data: {

                    _token: '{{ csrf_token() }}'

                },
            @endif

            success: function(result) {
                $('#doctor_id').html('<option value="">Select Doctor</option>');
                $.each(result, function(key, value) {
                    $("#doctor_id").append('<option value="' + value.doctor_id + '">' +
                        value
                        .doctor_name + '</option>');
                });

            }
        })
    }

    function getBEData() {
        $.ajax({
            url: "{{ route('beData') }}",
            type: "POST",
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                $('#position_code').html('<option value="">Select BE</option>');
                $.each(result, function(key, value) {
                    $("#position_code").append('<option value="' + value.position_code + '">' +
                        value
                        .emp_name + '</option>');
                });

            }
        })
    }

    function getBrandData() {
        $.ajax({
            url: "{{ route('brandData') }}",
            type: "POST",
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                $('#brand_id').html('<option value="">Select Brand</option>');
                $.each(result, function(key, value) {
                    $("#brand_id").append('<option value="' + value.brand_id + '">' +
                        value
                        .brand_name + '</option>');
                });

            }
        })
    }


    function ImgUpload() {
        var imgWrap = "";
        var imgArray = [];


        $(document).ready(function() {
            if (window.File && window.FileList && window.FileReader) {
                $("#rxDocument").on("change", function(e) {
                    var files = e.target.files,
                        filesLength = files.length;
                    for (var i = 0; i < filesLength; i++) {
                        var f = files[i]
                        var fileReader = new FileReader();
                        fileReader.onload = (function(e) {
                            var file = e.target;
                            $("<div class=\"data_img\">" +
                                "<img src=\"" + e.target.result + "\" title=\"" + file
                                .name + "\"/>" +
                                "<br/><div class=\"remove\"><i class='fa fa-times'></i></div>" +
                                "</div>").insertAfter("#rxDocument");

                            document.getElementById("previewdata1").style.display = "none";
                            $(".remove").click(function() {
                                $(this).parent(".data_img").remove();
                            });
                        });
                        fileReader.readAsDataURL(f);
                    }
                });
            } else {
                alert("Your browser doesn't support to File API")
            }
        });
    }




    @if (auth()->user()->user_type == 'BE')
        function addScoreData() {
            getDoctorData();
            getBrandData();
            ImgUpload();
            $('#add_my_score_modal').modal('show');

        }
    @elseif (auth()->user()->user_type == 'ABM')

        function addScoreData() {
            getBEData();
            getBrandData();
            ImgUpload();
            $('#add_my_score_modal').modal('show');

        }
    @endif

    @if (Request::segment(1) == 'score-add')
        $(window).on('load', function() {
            addScoreData();
        });
    @endif



    function addValue() {
        var k = '';
        var html = '';
        var brand_idValue = '';
        var brand_idData = document.getElementsByName('brand_id[]');
        var brand_qtyData = document.getElementsByName('brand_qty[]');

        var brand_idValue = '';
        var brand_qtyValue = '';
        for (var i = 0; i < brand_idData.length; i++) {
            var a = brand_idData[i];
            brand_idValue = a.value;

            var b = brand_qtyData[i];
            brand_qtyValue = b.value;

        }
        if (brand_idValue != '' && brand_qtyValue != '') {
            var brand_name = '';
            brand_name = $('select[name="brand_id[]"] option[value="' + brand_idValue + '"]').text();

            if (brand_name == 'Others') {
                brand_name = $('#other_brand_name').val();

            }
            var rowCount = $('#brandQtyID tr').length;
            var newSrNo = rowCount + 1;

            html += '<tr id="dataqarray' + newSrNo + '">' +
                '<td>' + newSrNo + '</td>' +
                '<td> <input name="dynamicbrand_id[]" type="hidden" id="dynamicbrand_id[]" value="' +
                brand_idValue + '">' +
                '<ul class="table_brand">' +
                '<li> <input name="dynamicbrand_name[]" type="hidden" id="dynamicbrand_name[]" value="' +
                brand_name + '">' + brand_name +
                '</li>' +
                '</ul>' +
                '</td>' +
                '<td> <input name="brand_qtyValue[]" type="hidden" id="brand_qtyValue[]" value="' +
                brand_qtyValue + '">' + ' ' + '</td>' +
                '<td>' +
                '<button class="btn delete_btn" onclick="deleteProductData(' + newSrNo + ',' + brand_idValue + ')">' +
                ' <i class="fa-regular fa-trash-can text-danger"></i>' +
                ' </button>' +
                ' </td>' +

                ' </tr>';


            $("#brandQtyID").append(html);
            $('select[name="brand_id[]"]').val('').select2();
            // $('input[name="brand_qty[]"]').val('');


            $('select[name="brand_id[]"] option[value="' + brand_idValue + '"]').prop('disabled', true);
        }


        $("#other_brand_name").val('');
        $("#OtherBrandID").hide();

    }







    function deleteProductData(elementID, brand_idValue) {
        $("#dataqarray" + elementID).remove();

        $('select[name="brand_id[]"] option[value="' + brand_idValue + '"]').prop('disabled', false);
    }


    $("body").on('click', "#scoreAddBtn", validateData);

    function validateData() {
        // alert('g');
        // return;

        var form = $("#score_data_add_form");

        form.validate({ // initialize the plugin
            rules: {
                'doctor_id': {
                    required: true
                },

                'dynamicbrand_id[]': {
                    required: true
                },
                'brand_qtyValue[]': {
                    required: true,
                    number: true
                },

                'rxDocument[]': {
                    required: true
                },
            },
            messages: {

                // dtPOBDate: {
                //     required: "This Field Required"
                // },

            },
            submitHandler: function(form) {
                $('#scoreAddBtn').attr("disabled", true);
                var formData = new FormData(form);
                $.ajax({
                    type: "post",
                    url: "{{ route('score-save') }}",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        if (data.status == 1) {
                            $.notify('Score added !', "success");
                            setTimeout(function() {
                                window.location.href = '/match-data/' + data.match_id;
                            }, 700);
                        } else if (data.status == 2) {

                            $.notify("Match completed ! You can't add the score!", "error");
                            setTimeout(function() {
                                window.location.href = '/match-data/' + data.match_id;
                            }, 1500);
                        } else {
                            $.notify("Something went wrong", "error");
                        }

                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        $("#scoreAddBtn").html('submit');
                        $("#scoreAddBtn").attr('disabled', false);
                        if (jqXHR.status === 422) {
                            var errors = jqXHR.responseJSON.errors;
                            $.each(errors, function(key, value) {
                                $.notify(value[0], "error");
                            });
                        } else {
                            $.notify("Something went wrong", "error");
                        }
                    }
                });
                // return false;
            }

        });
    }
</script>

<script>
    const targetDateLocal = new Date(
        '{{ \Carbon\Carbon::parse($match_data->match_end_time)->format('Y-m-d H:i:s') }}'
    );

    const targetDateUTC = new Date(targetDateLocal.toISOString());

    function updateTimer() {
        const nowUTC = new Date();
        const timeRemaining = targetDateUTC - nowUTC;

        const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
        const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

        document.getElementById('days').innerText = days;
        document.getElementById('hours').innerText = hours;
        document.getElementById('minutes').innerText = minutes;
        document.getElementById('seconds').innerText = seconds;

        if (timeRemaining < 0) {
            document.getElementById('days').innerText = '00';
            document.getElementById('hours').innerText = '00';
            document.getElementById('minutes').innerText = '00';
            document.getElementById('seconds').innerText = '00';
            document.getElementById('countdown').innerHTML = '';
        }
    }

    setInterval(updateTimer, 1000);

    updateTimer();
</script>





</body>

</html>