@extends('admin.layout')
@section('main')
    <div class="modal fade" id="create_voucher_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="">Create Voucher</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{ Form::open(['url' => '#', 'name' => 'validateCreateVoucherModalForm', 'id' => 'validateCreateVoucherModalForm', 'enctype' => 'multipart/form-data']) }}

                    <input type="hidden" name="iOtherActivityAssignID" id="iOtherActivityAssignID" class="form-control">
                    <div class="form-group mb-2">
                        <label for="" class="form-label">Activity ID</label>
                        <input type="text" name="vOtherActivityAssignID" id="vOtherActivityAssignID" class="form-control"
                            disabled>
                    </div>
                    <div class="form-group mb-2">
                        <label for="" class="form-label">Request Type <span class="text-danger">*</span></label>
                        <select class="select2 select-label form-control w-100" name="iRequestTypeID" id="iRequestTypeID"
                            onchange="getVoucherType();">
                            <option value=""> Select Request Type</option>
                        </select>
                        <label id="iRequestTypeID-error" class="error" for="iRequestTypeID"></label>
                    </div>
                    <div class="form-group mb-2">
                        <label for="login-Username" class="form-label">Voucher Type <span
                                class="text-danger">*</span></label>
                        <select class="select2 select-label form-control w-100" id="iVoucherTypeID" name="iVoucherTypeID">
                            <option value=""> Select Voucher Type</option>
                        </select>
                        <label id="iVoucherTypeID-error" class="error" for="iVoucherTypeID"></label>
                    </div>


                    <div class="form-group mb-2">
                        <label class="form-label">Upload Voucher <span class="text-danger">*</span></label>
                        <div class="upload_proof_img">
                            <div class="left" style="width: auto;">
                                <input type="file" name="vVoucherDoc" id="vVoucherDoc" accept="application/pdf,image/*" onchange="validateSizeVoucherDocument(this)">
                                <span>Upload Voucher</span>
                            </div>
                            {{-- <div class="right"  data-toggle="modal" data-target="#upload_id_row" style="cursor: pointer;">
                              <img src="{{ asset('assets/app-assets/images/invoice.png') }}" class="invoice-img">
                           </div> --}}
                        </div>
                        <p class="vVoucherDoc-file-upload-name"></p>
                        <label id="vVoucherDoc-error" class="error" for="vVoucherDoc"></label>
                    </div>




                </div>
                <div class="modal-footer justify-content-center">
                    <button type="submit" id="create-voucher" class="btn btn-primary">Create Voucher</button>
                    <!-- <button type="submit" class="btn btn-light">Clear</button> -->
                </div>
                {{ Form::close() }}
            </div>
        </div>
    </div>



    <div class="content-header row">
    </div>
    <div class="content-body">
        <section id="dashboard-ecommerce">
            <div class="row match-height justify-content-end g-2">
                <div class="col-lg-auto col-md-auto col-sm-auto col-auto mr-auto my-auto">
                    <h2 class="m-0">{{ $title }}
                    </h2>
                </div>
                <div class="col-lg-2 col-md-6 my-1">
                    <div class="form-group">
                        <select class="select2 select-label form-control w-100" id="iActivityTypeIDFilter"
                            name="iActivityTypeIDFilter">
                            <option value="">Activity Type</option>
                            @foreach (otherServiceActivityType() as $key => $value)
                                <option value="{{ $value->iActivityTypeID }}"> {{ $value->vActivityType }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-auto col-md-6 my-1">
                    <div class="form-group">
                        <div id="reportrange" class="daterange">
                            <i class="fa fa-calendar"></i>&nbsp;
                            <span></span> <i class="fa fa-caret-down"></i>
                            <input type="hidden" name="dtFrom" id="dtFrom">
                            <input type="hidden" name="dtTo" id="dtTo">
                        </div>
                    </div>
                </div>
                <div class="col-lg-auto col-md-6 my-1">
                    <div class="d-flex align-items-center">
                        <a href="#" class="btn btn-primary search_blue mr-1" onclick="setFilter()"><i
                                class="fa fa-search"></i></a>
                        <a href="#" class="btn btn-danger close_red mr-0" onclick="resetFilter()"><i
                                class="fa fa-times"></i></a>
                    </div>
                </div>

            </div>
        </section>
        <section id="column-search-datatable">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-datatable p-1">
                            <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 ID</td>
                                        <th>Activity Topic</td>
                                        <th>Activity Date</td>
                                        <th>Banquet </th>
                                        <th>Stay </th>
                                        <th>Create Voucher</th>
                                        <th>Date & Time</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <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 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>

    </div>
@endsection
@section('scripts')
    {{-- @include('scripts.otherServices.common-scripts') --}}
    <script>

                $(function() {

            var start = moment().month(3).startOf('month');
            var end = moment().add(1, 'year').month(2).endOf('month');

            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')
                    ],
                    'Last 3 Months': [moment().subtract(2, 'months').startOf('month'), moment()
                        .endOf('month')
                    ],
                    'Last FY': [moment().subtract(1, 'year').month(3).startOf('month'),
                        moment().month(2).endOf('month')
                    ],
                    'Current FY': [moment().month(3).startOf('month'),
                        moment().add(1, 'year').month(2).endOf('month')
                    ]


                }
            }, cb);

            cb(start, end);
        });


        // document.getElementById('vVoucherDoc').addEventListener('change', function(event) {
        //         const file = event.target.files[0];
        //         if (file) {
        //             const reader = new FileReader();
        //             reader.onload = function(e) {
        //                 document.querySelector('.invoice-img').src = e.target.result;
        //             };
        //             reader.readAsDataURL(file);
        //         }
        //     });


        $('#vVoucherDoc').change(function() {

            var filename = $(this).val();
            var name = filename.replace(/^.*[\\\/]/, '');
            $('.vVoucherDoc-file-upload-name').html(name);

        });
        function validateSizeVoucherDocument(input) {
        const fileSize = input.files[0].size / 1024 / 1024;
        if (fileSize > 10) {
            $.notify("File size exceeds 10 MiB", "error");
            $("#vVoucherDoc").val("");
            $('.vVoucherDoc-file-upload-name').html('');
        }
    }


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

        function resetFilter() {
        //    $("#eOtherActivityAssignStatusFilter").val('').select2();
            $("#iActivityTypeIDFilter").val('').select2();
            $("#amountFilter").val('').select2();
            var start = moment().month(3).startOf('month');
            var end = moment().add(1, 'year').month(2).endOf('month');

            $('#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',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'Action',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'vActivityType',
                    name: 'vActivityType',
                    searchable: false
                },

                {
                    data: 'vOtherActivityAssignID',
                    name: 'vOtherActivityAssignID',
                    searchable: false
                },
                {
                    data: 'vActivityTopic',
                    name: 'vActivityTopic',
                    searchable: false
                },
                {
                    data: 'dtActivityDateStart',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'isVenueForTravelDesk',
                    searchable: false
                },
                {
                    data: 'isStayAdded',
                    searchable: false
                },
                {
                    data: 'isVoucherGenerated',
                    searchable: false
                },

                {
                    data: 'created_at',
                    searchable: false
                },


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

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


        function generateContract(id = '') {
            if (id == '') {
                id = $("[name='checkbox[]']:checked").map(function() {
                    return $(this).val();
                }).get();
                if (id.length == 0) {
                    $.notify('Please select more than one from the list ', "error");
                    return false;
                }
            }
            Swal.fire({
                title: 'Are you sure?',
                text: "You want to Generate Voucher?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            }).then((result) => {
                if (result.isConfirmed) {
                    data = {
                        'isVoucherGenerated': '1',
                        'iOtherActivityAssignID': id,
                        '_token': "{{ csrf_token() }}"
                    }
                    ajax_call("{{ route('division.other.activity.assign.traveldesk.voucher.generate') }}", 'POST',
                        data, 1,
                        'dataTable');
                }
            })
        }


        function createVoucher(id) {
            data = {
                'iOtherActivityAssignID': id,
                '_token': "{{ csrf_token() }}"
            }
            // , type_return, notify
            ajax_call("{{ route('division.other.activity.assign.traveldesk.voucher.create.dateget') }}", 'POST', data, 0,
                'dataTable',
                1, 0,
                'createVoucher_response');
        }




        function createVoucher_response(response) {
            if (response != 0) {
                $('input[name="iOtherActivityAssignID"]').val(response.activityData.id);
                $('input[name="vOtherActivityAssignID"]').val(response.activityData.vOtherActivityAssignID);
                $('#iRequestTypeID').html('<option value="">Select Request Type</option>');
                $.each(response.requestType, function(key, value) {
                    if (value.vRequestType == 'Banquet' && (response.activityData.isVenueForTravelDesk != '0')) {
                        $("#iRequestTypeID").append('<option value="' + value.id + '">' +
                            value.vRequestType + '</option>');
                    } else if (value.vRequestType == 'Stay' && response.activityData.isStayAdded == '1') {
                        $("#iRequestTypeID").append('<option value="' + value.id + '">' +
                            value.vRequestType + '</option>');
                    }
                });
                $("#create_voucher_modal").modal('show');

            } else {
                $.notify("Please try after a few minutes", "error");
            }
        }

        $(document).ready(function() {
            jQuery.validator.addMethod("validateEmail", function(value, element) {
                var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (value != '') {
                    if (value.match(regex)) {
                        return true;
                    } else {
                        return false;
                    }
                } else {
                    return true;
                }
            }, "Please enter valid Email Address");
            $("#validateCreateVoucherModalForm").validate({
                ignore: ".ignore",
                rules: {
                    iOtherActivityAssignID: {
                        required: true,
                    },
                    iRequestTypeID: {
                        required: true,
                    },
                    iVoucherTypeID: {
                        required: true,
                    },
                    vVoucherDoc: {
                        required: true,
                    }
                },
                submitHandler: function(form) {

                    var formData = new FormData($("#validateCreateVoucherModalForm")[0]);
                    ajax_submit(
                        "{{ route('division.other.activity.traveldesk.voucher.add') }}",
                        'POST',
                        formData, 1, 'dataTable', 1, 1, 'paymentprocess_response');

                    $('#create_voucher_modal').modal('hide');
                    // $("#submit").html('<span> Processing...</span>');
                    // $("#submit").attr('disabled', true);


                    // $.ajax({
                    //     url: "{{ route('division.other.activity.traveldesk.voucher.add') }}",
                    //     type: 'POST',
                    //     data: formData,
                    //     processData: false,
                    //     contentType: false,
                    //     dataType: "json",
                    //     success: function(response) {
                    //         if (response.status == 0) {
                    //             $("#submit").html('Submit');
                    //             $("#submit").attr('disabled', false);
                    //             $.notify(response.message, "error");
                    //         } else {
                    //             $.notify(response.message, "success");
                    //             setTimeout(function() {
                    //                 window.location =
                    //                     "{{ route('division.other.activity.traveldesk.voucher.update', ':id') }}"
                    //                     .replace(':id', response
                    //                         .iOtherActivityAssignVoucherRequestID);
                    //             }, 700);
                    //         }
                    //     },

                    // });
                }
            });
        });

        function paymentprocess_response(response) {
            if (response.status == 1) {
                $('#create_voucher_modal').modal("hide");
                $('#create_voucher_modal').trigger("reset");
                // $(".filename").html('Browse');
            }
        }


        function getVoucherType() {
            $.ajax({
                url: "{{ route('fieldDivision.other.activity.traveldesk.getVoucherType') }}",
                type: "POST",
                data: {
                    iRequestTypeID: $('#iRequestTypeID').val(),
                    _token: '{{ csrf_token() }}'
                },
                success: function(result) {
                    $('#iVoucherTypeID').html('<option value="">Select Voucher Type</option>');
                    $.each(result, function(key, value) {

                        $("#iVoucherTypeID").append('<option value="' + value.id + '">' +
                            value.vVoucherType + '</option>');
                    });
                }
            })
        }
    </script>
@endsection