@include('layout.header')
<div id="tab-1" class="tab-content ">
    <section>
        <div class="row">
            <div class="col-12">
                @if ($liveMatch != null)
                    <div class="white_shadow_rs">
                        <div class="row">
                            <div class="col-12 col-md-auto col-lg-auto my-auto">
                                <h4 class="text-primary">{{ $liveMatch->match_name }}</h4>
                            </div>
                            <div class="col-12 col-md-auto col-lg-auto my-auto">
                                <h4><span>{{ date('d M Y', strtotime($liveMatch->match_start_time)) }}</span>
                                    <span>{{ date('H:i A', strtotime($liveMatch->match_start_time)) }}</span>
                                </h4>
                            </div>
                            <div class="col-12 col-md-auto col-lg-6 m-auto">
                                <div class="logo_match bg_remove">
                                    <div class="left">
                                        {{ $liveMatch->team_name1 }} <img
                                            src="../front/assets/images/logo/{{ $liveMatch->team_logo1 }}">
                                    </div>
                                    <div class="middle">
                                        <img src="{{ asset('front/assets/images/vs.png') }}" class="vs">
                                    </div>
                                    <div class="right">
                                        <img src="../front/assets/images/logo/{{ $liveMatch->team_logo2 }}">
                                        {{ $liveMatch->team_name2 }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-auto 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>
                            <div class="w-100"></div>
                            <div class="col-12 col-md-auto col-lg-auto">
                                <div class="logo_match bg_remove">
                                    @if ($liveMatch->team_1_id == auth()->user()->team_id)
                                        <div class="left" style="width: 100%;">
                                            {{ $liveMatch->team_name1 }} <img
                                                src="../front/assets/images/logo/{{ $liveMatch->team_logo1 }}">
                                        </div>
                                    @elseif($liveMatch->team_2_id == auth()->user()->team_id)
                                        <div class="left" style="width: 100%;">
                                            {{ $liveMatch->team_name2 }} <img
                                                src="../front/assets/images/logo/{{ $liveMatch->team_logo2 }}">
                                        </div>
                                    @endif


                                </div>
                            </div>
                        </div>
                        <table id="dataTable" class="table table-striped data-table-dr" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Sr No</th>
                                    @if (Auth::user()->user_type != 'BE')
                                        {{-- <th>Action</th> --}}
                                        <th>BE Name</th>
                                        <th>Position Code </th>
                                        <th>Emp Code</th>
                                        <th>Designation Name</th>
                                    @endif
                                    <th>Doctor Name</th>
                                    <th>Points</th>
                                    <th>Status</th>
                                    <th>Reference File</th>
                                    <th>Action</th>
                                    <th>Date And Time</th>
                                </tr>
                            </thead>
                            <tbody>
                            <tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </section>
</div>

</div>
</section>
</div>
@include('modals')
@include('layout.footer')


<script>
    $(function() {
        var columns = [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                "orderable": false,
                searchable: false
            },
            @if (auth()->user()->user_type != 'BE')
                // {
                //     data: 'Action',
                //     "orderable": false,
                //     searchable: false
                // },
                {
                    data: 'BEemp_name',
                }, {
                    data: 'BEposition_code',
                }, {
                    data: 'BEemp_code',
                }, {
                    data: 'BEdesignation',
                    name: 'BEdesignation'
                },
            @endif {
                data: 'doctor_name',
            },
            {
                data: 'total_score',
            },

            {
                data: 'activity_status',
                name: 'activity_status'
            },
            {
                data: 'file_name',
                "orderable": false,
                searchable: false
            },
            {
                data: 'delete',
            },
            {
                data: 'created_at',
            }
            // {
            //     data: 'created_at',
            // },
        ];
        var columnDefs = [];
        getdatatable("{{ route('actionPending.paginate') }}", columns, columnDefs);



    });

    function getdatatable(url, columns, columnDefs) {
    $('#dataTable').DataTable({
        processing: true,
        serverSide: true,
        bDestroy: true,
        pageLength: 25,
        order: [],
        stateSave: false,  // Set to false to avoid saving state in local storage
        scrollX: true,
        columns: columns,
        columnDefs: columnDefs,
        ajax: {
            method: 'post',
            url: url,
            data: function(d) {
                @if ($liveMatch != null)
                    d.match_id = "{{ $liveMatch->match_id }}",
                @endif

                d._token = "{{ csrf_token() }}"
            }
        },
        // Reset search on table initialization
        initComplete: function() {
            this.api().search('').draw();
        }
    });
}

// Call this function on logout or any other place where you want to reset the DataTable
function clearDataTableState() {
    $.removeCookie('DataTables_' + encodeURIComponent('dataTable') + '_state');
}


    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 = `/matchDataDeleteStatus/${entry_id}`;

                $.ajax({
                    url: deleteUrl,
                    type: 'GET',
                    success: function(response) {
                        if (response.status === 'success') {
                            $.notify(response.message, "success");
                            $('#dataTable').DataTable().ajax.reload();
                        } 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 documentStatusChange(id, status) {

        if (status == 'Approved') {
            $.ajax({
                url: "{{ route('statusChange') }}",
                type: "POST",
                data: {
                    status_id: id,
                    activity_status: status,
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $("#view_all_documents").modal('hide');
                    $('#dataTable').DataTable().ajax.reload();
                }
            })

        } else {
            $("#status_id").val(id);
            $("#activity_status").val(status);
        }
    }



    $('#validateRejectionForm').validate({
        ignore: ".ignore",
        rules: {
            status_id: {
                required: true
            },
            activity_status: {
                required: true
            },
            rejection_remarks: {
                required: true
            },
        },
        messages: {},
        submitHandler: function(form) {
            $("#rejection_remarks_btn").attr('disabled', true);
            var formData = new FormData($("#validateRejectionForm")[0]);
            $.ajax({
                url: "{{ route('statusChange') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function(response) {
                    if (response == 1) {
                        $.notify("Status Changed", "success");

                        $("#rejected").modal('hide');
                        $('#dataTable').DataTable().ajax.reload();

                    } else {
                        $.notify("Something went Wrong", "error");
                        $('#dataTable').DataTable().ajax.reload();
                    }
                },
                error: function(data) {
                    $("#rejection_remarks_btn").attr('disabled', false);
                    var errors = $.parseJSON(data.responseText);
                    $.notify("Required Fields are missing", "error");

                }
            }); //ajax
        }
    });





    function rejectAction() {
        var id = $('#actionPendingStat').val();
        $("#status_id").val(id);
        $("#activity_status").val('Rejected');
        $("#doc_view_stat").modal('hide');
        $("#rejected").modal('show');
    }

    function approveAction() {
        $.ajax({
            url: "{{ route('statusChange') }}",
            type: "POST",
            data: {
                status_id: $('#actionPendingStat').val(),
                activity_status: 'Approved',
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                $("#doc_view_stat").modal('hide');
                $('#dataTable').DataTable().ajax.reload();
            }
        })
    }



    function comment(comment) {

        document.getElementById("comment_id").innerHTML =
            comment;
    }

    $('#doc_view_stat').on('hidden.bs.modal', function() {
        $('#actionPendingStat').val('');
    });



    function view_document(id, documentName, status) {
        $('#actionPendingStat').val(id);

        const fileUrl = '{{ asset('storage/rxData') }}' + '/' + documentName;

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

<script>
    const targetDateLocal = new Date(
        '{{ \Carbon\Carbon::parse(@$liveMatch->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>