@extends('admin.layout')
@section('main')
    <div class="content-header row">
    </div>
    <div class="content-header row mb-2">
        <div class="row breadcrumbs-top">
            <div class="col-12">
                <div class="col-lg-auto col-md-auto col-sm-auto col-auto mr-auto my-auto">
                    <h2 class="m-0">Voucher Details
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <!-- Dashboard Ecommerce Starts -->
            <section id="column-search-datatable">

                <div class="row">
                    <div class="col-12">
                        <div class="card">

                            <div class="card-datatable p-1 table-responsive ">

                                <table class="dt-column-search table table-striped w-100 text-center display"
                                    id="dataTable">
                                    <thead>
                                        <tr>
                                            <th>Sr. No.</th>
                                            <th>Action</th>
                                            <th>Activity Type</th>
                                            <th>Activity Name</th>
                                            <th>Activity ID</th>
                                            <th>Booking ID</th>
                                            <th>Request Type</th>
                                            <th>Voucher Type</th>
                                            <th>Status</th>
                                            <th>Date & Time</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Dashboard Ecommerce ends -->

        </div>
    </div>


    {{-- for timeline dropdown --}}
    <div class="modal fade" id="track_modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
        <div class="modal-dialog  modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title font-weight-bolder" id="">Activity Contract Track</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="timeline ml-50" id="track_modal_body">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    @include('division.otherServices.sowModel')
@endsection
@section('scripts')
    <script>
        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'Action',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'vActivityType',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'vActivityTopic',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'vOtherActivityAssignID',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'vVoucherID',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'vRequestType',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'vVoucherType',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'eStatus',
                    "orderable": false,
                    searchable: false
                },

                {
                    data: 'created_at',
                },
            ];
            var columnDefs = [];
            getdatatable("{{ route('division.other.activity.traveldesk.voucher.data.paginate') }}", columns,
                columnDefs);
        });

        function getdatatable(url, columns, columnDefs) {
            $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                bDestroy: true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}",
                            d.requestType = '{{ $requestType }}',
                            d.iOtherActivityAssignID = '{{ $iOtherActivityAssignID }}'
                    }
                },
                "drawCallback": function(settings) {
                    new VenoBox({
                        selector: '.venobox_img',
                    });
                    feather.replace();
                }
            });
        }

        function setDivision(iDivisionID) {
            $.post("{{ route('division.set.session') }}", {
                    iDivisionID: iDivisionID,
                    _token: "{{ csrf_token() }}"
                },
                function(data, status) {
                    $('#dataTable').DataTable().ajax.reload();
                });
        }


        function changeVoucherStatus(id, status) {
            Swal.fire({
                title: 'Are you sure?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('division.other.activity.traveldesk.voucher.data.status.change') }}",
                        type: 'POST',
                        data: {
                            'id': id,
                            'eStatus': status,
                            _token: "{{ csrf_token() }}"
                        },
                        dataType: "json",
                        success: function(response) {
                            if (response.status == 1) {
                                $.notify(response.message, "success");
                                $('#dataTable').DataTable().ajax.reload();
                            } else {
                                $.notify(response.message, "error");
                            }
                        }
                    });
                }
            })




        }
    </script>
@endsection