@include('admin.layout.header')

<div class="container-fluid">
    <!--  Row 1 -->
    <div class="row g-2">
        <div class="col-auto col-lg-auto col-md-auto col-sm-auto my-auto">
            <h2 class="main_title">Manage Match</h2>
        </div>
        <div class="col-auto col-lg-auto col-md-auto col-sm-auto ms-auto">
            {{-- <select class="select2 js-example-basic-single select-label form-control w-100" onchange="getRBMData()"
                name="sm_user" id="sm_user">
                <option value="" selected>Select SM</option>
                @foreach ($sm_users as $user)
                    <option value="{{ $user->position_code }}">{{ $user->emp_name }}</option>
                @endforeach
            </select> --}}
        </div>
        <div class="col-auto col-lg-auto col-md-auto col-sm-auto">
            {{-- <select class="select2 js-example-basic-single select-label form-control w-100" name="rbm_user"
                id="rbm_user">
                <option value="" selected>Select RBM</option>

            </select> --}}
        </div>

        <div class="col-auto col-lg-auto col-md-auto col-sm-auto">
            <div class="d-flex align-items-center">
                <div id="reportrange" class="daterange">
                    <i class="fa fa-calendar"></i>&nbsp;
                    <span>January 11, 2024 - February 9, 2024</span> <i class="fa fa-caret-down"></i>
                    <input type="hidden" name="dtFrom" id="dtFrom">
                    <input type="hidden" name="dtTo" id="dtTo">
                </div>
                <button class="btn btn-primary ms-2" onclick="setFilter()"><i class="fa fa-search"></i></button>
                <button class="btn btn-danger ms-2" onclick="resetFilter()"><i class="fa fa-times"></i></button>
            </div>
        </div>
        <div class="col-auto col-lg-auto col-md-auto col-sm-auto">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#matchModal"
                data-mode="add">
                <i class="fa-solid fa-plus me-2"></i> Add Match
            </button>
        </div>
        <div class="col-auto col-lg-auto col-md-auto col-sm-auto">
            <button id="ExportMatchData" class="btn btn-success"><i class="fa fa-download me-2"></i>Export </button>
        </div>

    </div>

    <div class="row mb-3">
    </div>

    <div class="row">
        <div class="col-12">
            <div class="white_shadow_rs">
                <table id="datatable" name="datatable" class="table table-striped data-table-dr" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Manage Match</th>
                            <th>Team 1</th>
                            <th>Team 2</th>
                            <th>Match No</th>
                            <th>Start Time</th>
                            <th>End Time </th>
                            <th>Approval End Time</th>
                            <!-- <th>RX Points</th> -->
                            <th>Edit</th>
                            <th>Action</th>
                            <th>Match Status</th>
                            <th>Status</th>
                            <th>Winner</th>
                            <th>Date And Time</th>
                            {{-- <th>Grant Time</th> --}}
                        </tr>
                    </thead>
                    <tbody>
                    <tbody>
                </table>
            </div>
        </div>

    </div>

</div>

</div>

<!-- Modal -->
<div class="modal fade" id="matchModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" 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="matchModalLabel">Add Match</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            {!! Form::open([
                'url' => '#',
                'name' => 'teamForm',
                'id' => 'teamForm',
                'enctype' => 'multipart/form-data',
            ]) !!}
            <div class="modal-body">
                <input type="hidden" name="match_id" id="match_id">
                <div class="mb-3">
                    <label for="team_1_id" class="form-label">Team Name 1</label>
                    <select class="select2 js-example-basic-single select-label form-control w-100" name="team_1_id"
                        id="team_1_id">
                        <option value="" selected>Select Team 1</option>
                        @foreach ($teams_data as $team)
                            <option value="{{ $team->team_id }}">{{ $team->team_name }}</option>
                        @endforeach
                    </select>
                    <label id="team_1_id-error" class="error" for="team_1_id" style="display: none;"></label>
                </div>
                <div class="mb-3">
                    <label for="team_2_id" class="form-label">Team Name 2</label>
                    <select class="select2 js-example-basic-single select-label form-control w-100" name="team_2_id"
                        id="team_2_id">
                        <option value="" selected>Select Team 2</option>
                        @foreach ($teams_data as $team)
                            <option value="{{ $team->team_id }}">{{ $team->team_name }}</option>
                        @endforeach
                    </select>
                    <label id="team_2_id-error" class="error" for="team_2_id" style="display: none;"></label>
                </div>

                {{-- <div class="mb-3">
                    <label for="match_name" class="form-label">Match Name</label>
                    <input type="text" placeholder="Enter Match Name" class="form-control" name="match_name" id="match_name">
                </div> --}}
                <div class="mb-3">
                    <label for="match_start_time" class="form-label">Match Start Time</label>
                    <input type="datetime-local" class="form-control" name="match_start_time" id="match_start_time">
                </div>
                <div class="mb-3">
                    <label for="match_end_time" class="form-label">Match End Time</label>
                    <input type="datetime-local" class="form-control" id="match_end_time" name="match_end_time">
                </div>
                <div class="mb-3">
                    <label for="match_approval_start_time" class="form-label">Approval Start Time</label>
                    <input type="datetime-local" class="form-control" id="match_approval_start_time"
                        name="match_approval_start_time" disabled>
                </div>
                <div class="mb-3">
                    <label for="match_approval_end_time" class="form-label">Approval End Time</label>
                    <input type="datetime-local" class="form-control" id="match_approval_end_time"
                        name="match_approval_end_time">
                </div>
                <div class="mb-3">
                    <label for="match_type" class="form-label">Match Type</label>
                    <select class="select2 js-example-basic-single select-label form-control w-100" name="match_type"
                        id="match_type">
                        <option value="none">Regular Match</option>
                        <option value="semi_final">Semi Final</option>
                        <option value="final">Final</option>
                    </select>
                    <label id="match_type-error" class="error" for="match_type"></label>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="submit" class="btn btn-primary" id="teamFormSubmit">Submit</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

{{-- GrantTime --}}
<div class="modal fade" id="TimeModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" 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="matchModalLabel">Grant Time</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            {!! Form::open([
                'url' => '#',
                'name' => 'timeForm',
                'id' => 'timeForm',
                'enctype' => 'multipart/form-data',
            ]) !!}
            <div class="modal-body">
                <input type="hidden" name="match_id" id="matchId">
                <div class="mb-3">
                    <label for="match_end_time_2" class="form-label">Match End Time</label>
                    <input type="datetime-local" class="form-control" id="match_end_time_2" name="match_end_time">
                </div>
                <div class="mb-3">
                    <label for="matchApprovalEndTime_2" class="form-label">Approval End Time</label>
                    <input type="datetime-local" class="form-control" id="matchApprovalEndTime_2"
                        name="match_approval_end_time">
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="submit" class="btn btn-primary" id="timeFormSubmit">Submit</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="modal fade" id="view_all_documents" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
    tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
        <div class="modal-content" id="all_document_area">
        </div>
    </div>
</div>

@include('admin.layout.footer')
<script src="{{ asset('admin/assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('admin/assets/js/additional-methods.min.js') }}"></script>
<script src="{{ asset('notify.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Select the match_start_time and match_approval_start_time input fields
        var matchStartTimeInput = document.getElementById('match_start_time');
        var matchApprovalStartTimeInput = document.getElementById('match_approval_start_time');

        // Add an event listener for when the value of match_start_time changes
        matchStartTimeInput.addEventListener('change', function() {
            // Get the current value of match_start_time
            var selectedDateTime = matchStartTimeInput.value;

            // Set the same value to match_approval_start_time
            matchApprovalStartTimeInput.value = selectedDateTime;
        });
    });




    function viewAllDocument(match_id) {
        $.ajax({
            url: "{{ route('documentView') }}",
            type: "POST",
            data: {
                match_id: match_id,
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                $("#all_document_area").html(result);
                $("#view_all_documents").modal('show');
            }
        })
    }

    function downloadDocument(match_id) {
        $.ajax({
            url: "{{ route('downloadDocument') }}",
            type: "POST",
            data: {
                match_id: match_id,
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                // $("#view_all_documents").modal('hide');
                if (result.status === 1) {
                    var link = document.createElement('a');
                    link.href = result.url; // The URL returned from the server

                    link.download = "matchDocument.pdf"; // Set a default file name
                    link.dispatchEvent(new MouseEvent('click'));
                    // we can also set message for success
                    // $.notify("File Download In Downloads Folder.", "success");
                } else if (result.status === 0) {
                    $.notify(result.msg, "info");
                } else {
                    $.notify(result.error || 'File download failed.', "error");
                }
            },
            error: function() {
                $.notify('An error occurred while downloading the document.', "error");
            }
        })
    }

    $('#ExportMatchData').on('click', function() {
        var dtFrom = $('#dtFrom').val();
        var dtTo = $('#dtTo').val();
        var url = "{{ route('downloadDataMatch') }}" + "?dtFrom=" + dtFrom + "&dtTo=" + dtTo;

        window.location.replace(url);
    });



    // function getRBMData() {
    //     $.ajax({
    //         url: "{{ url('/admin/get-parent-data') }}",
    //         type: "POST",
    //         data: {
    //             ParentPossionCode: $('#sm_user option:selected').val(),
    //             _token: '{{ csrf_token() }}'
    //         },
    //         success: function(result) {
    //             $('#rbm_user').html('<option value="">Select RBM</option>');
    //             $.each(result.parent, function(key, value) {
    //                 $("#rbm_user").append('<option value="' + value.position_code + '">' + value
    //                     .emp_name + '</option>');
    //             });
    //         }
    //     })
    // }
    $(document).ready(function() {




        $('#matchModal').on('show.bs.modal', function(e) {
            var isAddMode = $(e.relatedTarget).data('mode') === 'add';

            if (isAddMode) {
                // Function to get current datetime in the required format
                function getCurrentDateTime() {
                    var now = new Date();
                    var year = now.getFullYear();
                    var month = ('0' + (now.getMonth() + 1)).slice(-2);
                    var day = ('0' + now.getDate()).slice(-2);
                    var hours = ('0' + now.getHours()).slice(-2);
                    var minutes = ('0' + now.getMinutes()).slice(-2);

                    return year + '-' + month + '-' + day + 'T' + hours + ':' + minutes;
                }

            } else {
                // Handle edit mode if needed
                // console.log("Edit mode: Min attribute not set.");
            }
        });

        // $(function() {

        //     var start = moment().subtract('Year').startOf('Year');
        //     var end = moment().subtract('Year').endOf('Year');

        //     function cb(start, end) {
        //         $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format(
        //             'MMMM D, YYYY'));
        //         $("#dtFrom").val(start.format('YYYY-MM-DD'));
        //         $("#dtTo").val(end.format('YYYY-MM-DD'));
        //     }

        //     $('#reportrange').daterangepicker({
        //         startDate: start,
        //         endDate: end,
        //         ranges: {
        //             'Today': [moment(), moment()],
        //             'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1,
        //                 'days')],
        //             'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        //             'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        //             'This Month': [moment().startOf('month'), moment().endOf('month')],
        //             'Last Month': [moment().subtract(1, 'month').startOf('month'), moment()
        //                 .subtract(1, 'month').endOf('month')
        //             ],
        //             'This Year': [moment().subtract('Year').startOf('Year'), moment().subtract(
        //                     'Year')
        //                 .endOf('Year')
        //             ]
        //         }
        //     }, cb);

        //     cb(start, end);

        // });

        $(function() {

            var start = moment().subtract(1, 'years').startOf('year'); // Start of the previous year
            var end = moment().endOf('year'); // End of the current year

            function cb(start, end) {
                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format(
                    'MMMM D, YYYY'));
                $("#dtFrom").val(start.format('YYYY-MM-DD'));
                $("#dtTo").val(end.format('YYYY-MM-DD'));
            }

            $('#reportrange').daterangepicker({
                startDate: start, // Default start date
                endDate: end, // Default end date
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment()
                        .subtract(1, 'month').endOf('month')
                    ],
                    'This Year': [moment().startOf('year'), moment().endOf('year')],
                    'Last Year': [moment().subtract(1, 'years').startOf('year'), moment()
                        .subtract(1, 'years').endOf('year')
                    ],
                    'This & Last Year': [moment().subtract(1, 'years').startOf('year'), moment()
                        .endOf('year')
                    ] // Default range
                }
            }, cb);

            cb(start, end);

        });



        // $.validator.addMethod("greaterThan", function(value, element, params) {
        //     var target = $(params).val();
        //     var targetDate = new Date(target);
        //     var inputDate = new Date(value);
        //     return this.optional(element) || inputDate > targetDate;
        // }, 'Must be greater than {0}.');

        // // Custom validation method to check if a date is greater than the current time
        // $.validator.addMethod("greaterThanNow", function(value, element) {
        //     var inputDate = new Date(value);
        //     var currentDate = new Date();
        //     return this.optional(element) || inputDate > currentDate;
        // }, 'Must be greater than the current time.');

        // $.validator.addMethod("withinLimit", function(value, element, params) {
        //     var matchEndTime = new Date($(params).val());
        //     var matchApprovalEndTime = new Date(value);
        //     var timeDifference = matchApprovalEndTime - matchEndTime; // Difference in milliseconds
        //     var limit = 23 * 60 * 60 * 1000 + 58 * 60 * 1000; // 23 hours 58 minutes in milliseconds
        //     return this.optional(element) || timeDifference <= limit;
        // }, 'Approval end time must not be more than 23 hours and 58 minutes after match end time.');

        $.validator.addMethod("greaterThanNow", function(value, element) {
            var matchId = $('#match_id').val();
            if (matchId === "") {
                var inputDate = new Date(value);
                var currentDate = new Date();
                return this.optional(element) || inputDate > currentDate;
            }
            return true; // Skip validation if the condition is not met
        }, 'Must be greater than the current time.');


        $.validator.addMethod("greaterThanNow", function(value, element) {
            var inputDate = new Date(value);
            var currentDate = new Date();
            return this.optional(element) || inputDate > currentDate;
        }, 'Must be greater than the current time.');

        $.validator.addMethod("withinLimit", function(value, element, params) {
            var matchEndTime = new Date($(params).val());
            var matchApprovalEndTime = new Date(value);
            var timeDifference = matchApprovalEndTime - matchEndTime; // Difference in milliseconds
            var limit = 23 * 60 * 60 * 1000 + 58 * 60 * 1000; // 23 hours 58 minutes in milliseconds
            return this.optional(element) || timeDifference <= limit;
        }, 'Approval end time must not be more than 23 hours and 58 minutes after match end time.');


        $.validator.addMethod("min6HoursAfter", function(value, element, params) {
            var min6Hours = 6 * 60 * 60 * 1000; // 6 hours in milliseconds
            var matchEndTime = new Date($(params).val());
            var matchApprovalEndTime = new Date(value);
            var timeDifference = matchApprovalEndTime - matchEndTime; // Difference in milliseconds
            return this.optional(element) || timeDifference >= min6Hours;
        }, 'Approval end time must be at least 6 hours after match end time.');

        $('#teamForm').validate({
            ignore: ".ignore",
            rules: {
                team_1_id: {
                    required: true,
                },
                team_2_id: {
                    required: true,
                },
                match_type: {
                    required: true,
                },
                match_start_time: {
                    required: true,
                    greaterThanNow: {
                        depends: function() {
                            return $('#match_id').val() === "";
                        }
                    }


                },
                match_end_time: {
                    required: true,
                    greaterThan: "#match_start_time",
                    greaterThanNow: {
                        depends: function() {
                            return $('#match_id').val() === "";
                        }
                    }

                },
                match_approval_end_time: {
                    required: true,
                    greaterThan: "#match_end_time",
                    greaterThanNow: true,
                    min6HoursAfter: "#match_end_time",

                    // withinLimit: "#match_end_time",
                }
            },
            messages: {
                match_start_time: {
                    greaterThanNow: "Match start time must be after the current time."
                },
                match_end_time: {
                    greaterThan: "Match end time must be after match start time.",
                    greaterThanNow: "Match end time must be after the current time."
                },
                match_approval_end_time: {
                    greaterThan: "Approval end time must be after match end time.",
                    greaterThanNow: "Approval end time must be after the current time.",
                    min6HoursAfter: "Approval end time must be at least 6 hours after match end time."
                    // withinLimit: "Approval end time must not be more than 24 hours after match end time."
                }
            },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $("#teamFormSubmit").attr('disabled', true);
                var formData = new FormData($("#teamForm")[0]);

                $.ajax({
                    url: '{{ route('upsertMatch') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $('#matchModal').modal('hide');
                            $.notify(response.msg, "success");
                            $('#datatable').DataTable().ajax.reload();
                            $("#teamFormSubmit").attr('disabled', false);
                        } else if (response.status == 0) {
                            $("#teamFormSubmit").attr('disabled', false);
                            $.notify(response.msg, "error");
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('An error occurred:', error);
                        $("#teamFormSubmit").attr('disabled', false);
                        $.notify(response.error, "error");
                    }
                });
            }
        });

        $('#timeForm').validate({
            ignore: ".ignore",
            rules: {
                match_end_time: {
                    required: true,
                },
                match_approval_end_time: {
                    required: true,
                    greaterThan: "#match_end_time_2", // Ensure match_approval_end_time is after match_end_time
                    greaterThanNow: true,
                    // withinLimit: "#match_end_time",
                }
            },
            messages: {
                match_approval_end_time: {
                    greaterThan: "Approval end time must be after match end time.",
                    greaterThanNow: "Approval end time must be after the current time.",
                    // withinLimit: "Approval end time must not be more than 24 hours after match end time."
                }
            },
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $("#timeFormSubmit").attr('disabled', true);
                var formData = new FormData($("#timeForm")[0]);

                $.ajax({
                    url: '{{ route('updateMatchTime') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $('#TimeModal').modal('hide');
                            $.notify(response.msg, "success");
                            $('#datatable').DataTable().ajax.reload();
                        } else if (response.status == 0) {
                            $.notify(response.msg, "error");
                        }
                        $("#timeFormSubmit").attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        $.notify(response.msg, "error");
                        $("#timeFormSubmit").attr('disabled', false);
                    }
                });
            }
        });
    });



    function match_status_change(match_id, status) {
        $.ajax({
            url: "{{ route('updateMatchStatus') }}",
            type: 'POST',
            data: {
                'match_id': match_id,
                'status': status,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response) {
                if (response.status == 1) {
                    $.notify(response.msg, "success");
                } else {
                    $.notify(response.msg, "error");
                }
            },
            error: function(jqXHR) {
                $.notify(jqXHR.responseJSON.msg, "error");
            }
        });
    }

    function editMatchSet(match_id, team_1_id, team_2_id, match_start_time, match_end_time,
        match_approval_start_time, match_approval_end_time, match_type) {
        $("#matchModalLabel").text("Edit Match");
        $("#match_id").val(match_id);
        // $("#match_name").val(match_name);
        $("#team_1_id").val(team_1_id).trigger('change'); // Set the value and trigger the change event
        $("#team_2_id").val(team_2_id).trigger('change'); // Set the value and trigger the change event
        if (match_type != '') {
            $("#match_type").val(match_type).trigger('change'); // Set the value and trigger the change event
        }
        $("#match_start_time").val(match_start_time);
        $("#match_end_time").val(match_end_time);
        $("#match_approval_start_time").val(match_approval_start_time);
        $("#match_approval_end_time").val(match_approval_end_time);
    }

    function editTimeSet(match_id, match_end_time, match_approval_end_time) {
        // $("#matchModalLabel").text("Edit Match");
        $("#matchId").val(match_id);
        $("#match_end_time_2").val(match_end_time);
        $("#matchApprovalEndTime_2").val(match_approval_end_time);
    }

    $('#matchModal').on('hidden.bs.modal', function() {
        // Reset form fields
        $(this).find('form')[0].reset();

        // Reset select boxes to their default value (usually the first option)
        $(this).find('select').val('').trigger('change');

        // Reset other elements if needed
        $("#matchModalLabel").text("Add Match"); // Reset the modal title

        // Reset hidden input specifically
        $('#match_id').val('');

        // Clear validation error messages and reset the form's validation state
        var form = $(this).find('form');
        form.validate().resetForm(); // Clears error messages
        form.find('.is-invalid').removeClass('is-invalid'); // Remove error class from input fields
        // comment below bcz also removes select menualy created error label
        // form.find('.error').remove(); // Remove any leftover error elements

        // Remove the min attribute from datetime-local inputs

    });

    function setFilter() {
        $('#datatable').DataTable().ajax.reload();
    }

    function resetFilter() {
        // $("#sm_user").val('').select2();
        // $("#rbm_user").val('').select2();

        var start = moment().subtract('Year').startOf('Year');
        var end = moment().subtract('Year').endOf('Year');
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format(
            'MMMM D, YYYY'));
        $("#dtFrom").val(start.format('YYYY-MM-DD'));
        $("#dtTo").val(end.format('YYYY-MM-DD'));
        $('#datatable').DataTable().ajax.reload();
    }

    $(function() {
        var columns = [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex'
            },
            {
                data: 'match_type',
                name: 'match_type'
            },
            {
                data: 'team1',
                name: 'team1'
            },
            {
                data: 'team2',
                name: 'team2'
            },
            {
                data: 'match_id',
                name: 'match_id'
            },
            {
                data: 'startTime',
                name: 'startTime'
            },
            {
                data: 'endTime',
                name: 'endTime'
            },
            {
                data: 'ApprovalEndTime',
                name: 'ApprovalEndTime'
            },
            {
                data: 'edit',
                name: 'edit'
            },
            {
                data: 'action',
                name: 'action'
            },
            {
                data: 'matchStatus',
                name: 'matchStatus'
            },
            {
                data: 'status',
                name: 'status'
            },
            {
                data: 'winner',
                name: 'winner'
            },
            {
                data: 'created_at',
                name: 'created_at'
            }
            // {
            //     data: 'grantTime',
            //     name: 'grantTime'
            // }
        ];
        var columnDefs = [{
            "width": "150",
            "targets": [5]
        }];
        getdatatable("{{ route('manageMatchPaginate') }}", columns, columnDefs);
    });

    function getdatatable(url, columns, columnDefs) {
        if ($.fn.DataTable.isDataTable('#datatable')) {
            $('#datatable').DataTable().destroy();
        }
        $('#datatable').DataTable({
            processing: true,
            pageLength: 25,
            serverSide: true,
            "bDestroy": true,
            order: [],
            "scrollX": true,
            columns: columns,
            columnDefs: columnDefs,
            ajax: {
                method: 'post',
                url: url,
                data: function(d) {
                    d._token = "{{ csrf_token() }}",
                        // d.select_sm = $('#sm_user option:selected').val(),
                        // d.select_rbm = $('#rbm_user option:selected').val(),
                        d.dtFrom = $("#dtFrom").val(),
                        d.dtTo = $("#dtTo").val();
                }
            },
            drawCallback: function(settings) {
                // Reinitialize Venobox
                // new VenoBox({
                //     selector: '.my-video-links',
                // });
            }
        });
    }
</script>