@extends('layouts.app')
@section('title', 'Version Management')
@section('content')
@if(auth()->user()->user_type_id == 1)

    <div class="container-fluid">
        <div class="row p-2">
            <h5 class="col-md-2 text-color fw-bold mt-1">Version Management</h5>
        </div>
        <div class="card mx-2">
            <div class="card-body">
                <table id="version_management_table" class="table table-bordered nowrap table-striped"
                    style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                    <thead>
                        <tr>
                            <th> SI.No. </th>
                            <th> Version Number </th>
                            {{-- <th> Version Updates </th> --}}
                            <th> Added By </th>
                            <th> Added At </th>
                            <th> Updated At </th>
                            <th> Action </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- ADD NEW VERSION HISTORY --}}
    <div id="add_new_version_history" class="modal fade bd-example-modal-lg closeModal" role="dialog" style="top:5%;">
        <div class="modal-dialog modal-l modal-lg">
            <div class="modal-content position-relative pb-1">
                <div class="modal-header">
                    <h6 class="modal-title fw-bold">Add New Version History</h6>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" style="border:none;background-color:#DD9400;color:white;font-size:15px;">
                    <span class="mdi mdi-window-close customFont ms-2"></span>
                    </button>
                </div>
                <div class="modal-body pb-0">
                    <form method="POST" role="form" name="add_version_history_form"
                        id="add_version_history_form" data-parsley-validate="" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="example-vendorname-input" class="col-form-label"><strong>Version
                                            Number</strong><span class="text-danger"> * </span>
                                    </label>
                                    <input required type="text" name="version_number" id="version_number"
                                        class="form-control version_number" placeholder="Enter Version Number (e.g., 1.0.0.1)" 
                                        data-parsley-trigger="keyup"
                                        data-parsley-pattern=
                                        "/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/"
                                        data-parsley-pattern-message="Please enter the format [9.9.9.9]">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="example-vendorname-input" class="col-form-label"><strong>Version
                                            Updates</strong><span class="text-danger"> * </span>
                                    </label>
                                    <textarea required name="version_updates" id="version_updates"
                                        class="form-control version_updates" placeholder="Enter Version Updates" rows="10"></textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn addbtn submit-button btn-color add_version_history_btn"
                        form="add_version_history_form"> Submit </button>
                    <button type="button" class="btn text-white cancel-button"
                        data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    {{-- ADD NEW VERSION HISTORY --}}

    {{-- EDIT VERSION HISTORY --}}
    <div id="edit_version_history" class="modal fade bd-example-modal-lg closeModal" role="dialog" style="top:5%;">
        <div class="modal-dialog modal-l modal-lg">
            <div class="modal-content position-relative pb-1">
                <div class="modal-header">
                    <h6 class="modal-title fw-bold">Edit Version History</h6>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" style="border:none;background-color:#DD9400;color:white;font-size:15px;">
                    <span class="mdi mdi-window-close customFont ms-2"></span>
                    </button>
                </div>
                <div class="modal-body pb-0">
                    <form method="POST" role="form" name="edit_version_history_form"
                        id="edit_version_history_form" data-parsley-validate="" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="version_history_id" id="version_history_id">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="example-vendorname-input" class="col-form-label"><strong>Version
                                            Number</strong><span class="text-danger"> * </span>
                                    </label>
                                    <input required type="text" name="version_number1" id="version_number1"
                                        class="form-control version_number1" placeholder="Enter Version Number"
                                        data-parsley-trigger="keyup"
                                        data-parsley-pattern=
                                        "/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/"
                                        data-parsley-pattern-message="Please enter the format [9.9.9.9]">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="example-vendorname-input" class="col-form-label"><strong>Version
                                            Updates</strong><span class="text-danger"> * </span>
                                    </label>
                                    <textarea required name="version_updates1" id="version_updates1"
                                        class="form-control version_updates1" placeholder="Enter Version Updates" rows="10"></textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn addbtn submit-button btn-color edit_version_history_btn"
                        form="edit_version_history_form"> Submit </button>
                    <button type="button" class="btn text-white cancel-button"
                        data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    {{-- EDIT VERSION HISTORY --}}
@else
    @include('error');
@endif
@endsection

@section('page_css')
    <link href="{{ asset('/plugins/daterangepicker/daterangepicker.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .dataTables_info {
            margin-top: 5px !important;
        }

        div.dt-buttons {
            float: right;
        }

        .show-ranges {
            top: 107.6px !important;
        }

        .reportsbtn:hover {
            background-color: #DD9400;
            text-decoration: none;
            border: #DD9400 !important;
        }

        .btn-color {
            border: 2px;
        }

        .highlight {
            color: black !important;
        }
    </style>
@endsection

@section('page_script')
    <script src="{{ asset('/plugins/moment/moment.js') }}"></script>
    <script src="{{ asset('/plugins/daterangepicker/daterangepicker.js') }}"></script>
    <script>
        var versionmanagement = '';

        $(document).ready(function() {
            setInterval(function() {
                $(".nodata").fadeIn(1200).fadeOut(1200);
            }, 1200);

            function version_management_data() {
                if ($.fn.dataTable.isDataTable('#version_management_table') && versionmanagement != '') {
                    versionmanagement.draw(false);
                } else {
                    load_version_management_data();
                }
            }

            $('#pills-tab .nav-link').click(function() {
                versionmanagement.columns.adjust().draw();
            });

            function load_version_management_data() {
                versionmanagement = $('#version_management_table').DataTable({
                    scrollX: true,
                    "order": [],
                    "processing": true,
                    "serverSide": true,
                    "ajax": {
                        url: "{{ url('/fetch-versionhistory') }}",
                        method: "POST",
                        data: {
                            _token: '{!! csrf_token() !!}',
                        },
                    },
                    createdRow: function(row, data, dataIndex) {
                        var ststId = data.is_active;
                        if (ststId == 0) {
                            $(row).addClass('inactive');
                            $('td', row)
                                .attr('style', "cursor:not-allowed;background-color:#F2D2C4;text:black;")
                                .attr('onmouseover', "this.className='highlight'")
                                .attr('onmouseout', "this.className='normal'")
                                .attr('onselectstart', "return false");
                        }
                    },
                    columns: [{
                            data: 'id',
                            render: function(data, type, row, meta) {
                                return meta.row + meta.settings._iDisplayStart + 1;
                            }
                        },
                        {
                            data: 'version_no',
                            name: 'version_no',
                            render: function(data, type, row, meta) {
                                return "<span>V " +row['version_no'] + "</span>"
                            },
                            defaultContent: "--",
                        },
                        // {
                        //     data: 'updates',
                        //     name: 'updates',
                        //     defaultContent: "--"
                        // },
                        {
                            data: 'added_user',
                            name: 'added_user',
                            defaultContent: "--"
                        },
                        {
                            data: 'added_datetime',
                            name: 'added_datetime',
                            defaultContent: "--"
                        },
                        {
                            data: 'updated_datetime',
                            name: 'updated_datetime',
                            defaultContent: "--"
                        },
                        {
                            data: function(row, type, val, meta) {
                                if (row['is_active'] == 1) {
                                    return "<span><em class='text-color img-size mdi mdi-square-edit-outline' data-bs-toggle='tooltip' data-bs-placement='bottom' title='Edit Version History' onclick='edit_version_history(" +
                                        row['id'] +
                                        ")' style='cursor:pointer;'></em></span><span class='icon-space'><em class='mdi mdi-delete img-size text-danger' data-bs-toggle='tooltip' data-bs-placement='bottom' title='Disable Version History' onclick='delete_version_history(" +
                                        row['id'] + ");' style='cursor:pointer;'></em></span>"
                                } else {
                                    return "<label class='switch'>\<input type='checkbox' value='" +
                                        row['id'] +
                                        "' id='change_version_history_status'>\<span class='slider round' id='change_version_history_status'></span>\</label>"
                                }
                            },
                            searchable: false,
                        },
                    ],
                    dom: '<"mt-2"<"row"<"col-md-6"l><"col-md-6"<B><"float-end"f>>><"mb-1"<t>><"row"<"col"i><"col"p>>>',
                    buttons: [{
                        text: '<em class="mdi mdi-file-excel" style></em> Add New',
                        className: 'reportsbtn btn-color btn-sm ms-1 InvoiceRpt',
                        action: function(e, dt, node, config) {
                            add_version_history();
                        }
                    }],
                });
            }
            load_version_management_data();

            $('#add_version_history_form').submit(function(e) {
                if ($("#add_version_history_form").parsley()) {
                    if ($("#add_version_history_form").parsley().validate()) {
                        event.preventDefault();
                        if ($("#add_version_history_form").parsley().isValid()) {
                            $('.add_version_history_btn').attr('disabled', true);
                            $('.add_version_history_btn').attr('style', 'opacity:0.6;');
                            var loader = $('#ajaxloader');
                            $('.loader_text').text('Adding New Version History...');
                            loader.show();
                            var version_no = $('#version_number').val();
                            setTimeout(function() {
                                $.ajax({
                                    type: "POST",
                                    cache: false,
                                    async: false,
                                    url: "{{ route('add_version_history') }}",
                                    data: new FormData($("#add_version_history_form")[0]),
                                    processData: false,
                                    contentType: false,
                                    success: function(response) {
                                        if (response) {
                                            loader.hide();
                                            var result = response.split('@#!');
                                            if(result[1] == "warning") {
                                                Swal.fire({
                                                    position: 'middle',
                                                    icon: result[1],
                                                    title: 'Version Number - ' + version_no + ' already exists. Please enter different Version Number to proceed.',
                                                    showConfirmButton: true,
                                                });
                                                $('.add_version_history_btn').attr('disabled',
                                                    false);
                                                $('.add_version_history_btn').attr('style',
                                                    'opacity:1;');
                                            } else {
                                                Swal.fire({
                                                    position: 'middle',
                                                    icon: result[1],
                                                    title: result[2],
                                                    showConfirmButton: true,
                                                });
                                                version_management_data();
                                                $('.add_version_history_btn').attr('disabled',
                                                    false);
                                                $('.add_version_history_btn').attr('style',
                                                    'opacity:1;');
                                                $('#add_version_history_form')[0].reset();
                                                $("#add_new_version_history").modal('hide');
                                            }
                                        }
                                    }
                                });
                            }, 1000);
                        }
                    }
                }
            });

            $('#edit_version_history_form').submit(function(e) {
                if ($("#edit_version_history_form").parsley()) {
                    if ($("#edit_version_history_form").parsley().validate()) {
                        event.preventDefault();
                        if ($("#edit_version_history_form").parsley().isValid()) {
                            $('.edit_version_history_btn').attr('disabled', true);
                            $('.edit_version_history_btn').attr('style', 'opacity:0.6;');
                            var loader = $('#ajaxloader');
                            $('.loader_text').text('Updating Version History...');
                            loader.show();
                            setTimeout(function() {
                                $.ajax({
                                    type: "POST",
                                    cache: false,
                                    async: false,
                                    url: "{{ route('update_version_history') }}",
                                    data: new FormData($("#edit_version_history_form")[0]),
                                    processData: false,
                                    contentType: false,
                                    success: function(response) {
                                        if (response) {
                                            loader.hide();
                                            var result = response.split('@#!');
                                            Swal.fire({
                                                position: 'middle',
                                                icon: result[1],
                                                title: result[2],
                                                showConfirmButton: true,
                                            });
                                            version_management_data();
                                            $('.edit_version_history_btn').attr('disabled',
                                                false);
                                            $('.edit_version_history_btn').attr('style',
                                                'opacity:1;');
                                            $('#edit_version_history_form')[0].reset();
                                            $("#edit_version_history").modal('hide');
                                        }
                                    }
                                });
                            }, 1000);
                        }
                    }
                }
            });

            $(document).on('click', 'input[id="change_version_history_status"]', function(e) {
                var value = $(this).val();
                e.preventDefault()
                $.ajax({
                    url: '/change_status_version_history/' + value,
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        var result = response.split('@#!');
                        Swal.fire({
                            position: 'middle',
                            icon: result[1],
                            title: result[2],
                            showConfirmButton: true,
                        });
                        $("#body").attr('style', 'background-color: #F6F9FF;padding-right: 0px !important;');
                        version_management_data();
                    }
                });
            });
        });

        function add_version_history() {
            // document.getElementById("add_version_history_form").parsley().reset();
            var form = $('#add_version_history_form');
            form[0].reset();
            form.parsley().reset();
            
            var addnewhistory = new bootstrap.Modal(document.getElementById('add_new_version_history'), {
                backdrop: 'static',
                keyboard: false
            });
            $("#add_new_version_history").appendTo("body").modal('show');
        }

        function close_modal() {
            $("#add_new_version_history").modal('hide');
        }

        function edit_version_history(versionID) {
            var editversionhistory = new bootstrap.Modal(document.getElementById(
                'edit_version_history'), {
                backdrop: 'static',
                keyboard: false
            });
            editversionhistory.show();
            $.ajax({
                url: "/edit_version_history/" + versionID,
                dataType: "json",
                success: function(data) {
                    console.log(data, 3393)
                    $("#version_history_id").val(data.result.id);
                    $("#version_number1").val(data.result.version_no);
                    $("#version_updates1").val(data.result.version_updates);
                }
            })
            $("#body").attr('style', 'background-color: #F6F9FF;padding-right: 0px !important;');
        }

        function delete_version_history(versionID) {
            $.ajax({
                url: '/change_status_version_history/' + versionID,
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}"
                },
                success: function(response) {
                    var result = response.split('@#!');
                    Swal.fire({
                        position: 'middle',
                        icon: result[1],
                        title: result[2],
                        showConfirmButton: true,
                    });
                    if ($.fn.dataTable.isDataTable('#version_management_table') && versionmanagement != '') {
                        versionmanagement.draw(false);
                    } else {
                        load_version_management_data();
                    }
                    $("#body").attr('style', 'background-color: #F6F9FF;padding-right: 0px !important;');
                }
            });
        }
    </script>
@endsection