@extends('backend.layouts.app')

@section('content')
@section('page-css')
    <link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet" />
@endsection

@php
    use App\Upload;
    $getAllProfileImage = [];

@endphp

{{--  <div class="admin-list-table pt-0 border-0">
    <div class="d-flex align-items-center pb-3 tableTab-freeze">
        <ul class="memberTable-tabs" id="members_tab_list">
            <li class="active" data-type ="price_term"><a href="javascript:void(0);" data-tab="">Price Terms </a></li>
            <li data-type ="payment_term"><a href="javascript:void(0);" data-tab="">Payment Terms </a></li>

        </ul>
        <div class="selected-prod">Selected Terms  (<span id="sProduct">0</span>)</div>
        <div class="delete-select" id="deletedData" style="display:none"><a href="javascript:void(0);"
                id="delete_records">Delete Selected <i class="icons icon-delete"></i></a></div>
        <a href="javascript:void(0);" class="add-items-btn ml-auto " data-toggle="modal"
            data-target="#newAttributes-modal"><span><i class="icons icon-plus"></i></span> Add New Term</a>
    </div>
    <div class="admin-table table-freezed" id="brandsData">
    </div>
</div>  --}}

<div class="admin-list-table pt-0 border-0">
    <div class="d-flex align-items-center py-3 tableTab-freeze">
        <div class="common-tbl-head m-0 ml-1">
            <ul class="memberTable-tabs" id="members_tab_list">
                <li class="active" data-type ="price_term"><a href="javascript:void(0);" data-tab="">Price Terms </a></li>
                <li data-type ="payment_term"><a href="javascript:void(0);" data-tab="">Payment Terms </a></li>
            </ul>
            <div class="selected-prod" style="display:none">Selected Terms (<span id="sProduct">0</span>)</div>
            <div class="delete-select" id="deletedData" style="display:none"><a href="javascript:void(0);" id="delete_records">Delete Selected <i class="icons icon-delete"></i></a></div>

        </div>
        <!-- <a href="javascript:void(0);" class="add-items-btn ml-auto clearForm" data-toggle="modal" data-target="#newAttributes-modal"><span><i class="icons icon-plus"></i></span> Add New Term</a> -->
    </div>

    <div class="admin-table table-freezed" id="brandsData">
    <div class="loader_main"  style="  position: relative;
    top: 50%;
    left: 40%;
    transform: translate(50%, 50%);
    width: 100px;
    height:50vh;
    text-align: center;">
 <img width="100" src="{{ url('public/assets/img/ZKZg.gif') }}">
        </div>
    </div>
</div>

</div>

{{-- Dummy Data --}}

<!--Specification section End-->
<div class="modal right fade newAttributes-modal" data-refresh="true" id="newAttributes-modal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header close-btn" style="padding: 16px;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="" style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">Add New Terms</h4>
            </div>
            <div class="modal-body pt-1" style="padding: 16px;">
                @if ($errors->any())
                    <div class="alert alert-danger d-flex align-items-center" role="alert">
                        @foreach ($errors->all() as $error)
                            <i class="icons icon-error-outline"></i> {{ $error }}
                        @endforeach
                    </div>
                @endif

                <form action="{{ route('price_terms.store') }}" method="POST" id="form-id">
                    @csrf
                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('Name') }}<span class="text-danger ml-1">*</span>
                        </label>
                        <input type="text" placeholder="{{ translate('Name') }}" id="name" name="name" class="form-control name" required>
                        <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:none;" id="errorname"></span>
                    </div>
                    <div class="form-group mb-3">
                        <label for="name" class="labelstyle">{{ translate('Type') }}</label>
                        <select id="type" name="type" class="form-control">
                            <option value="price_term"> Price Terms</option>
                            <option value="payment_term"> Payment Terms </option>
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label for="name" class="labelstyle">{{ translate('Description') }}</label>
                        <textarea name="description" class="form-control"> </textarea>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" id="saveUnit" class="btn btn-primary">{{ translate('Save') }}</button>
            </div>
        </div>
    </div>
</div>

{{-- Edit Modal --}}

<div class="modal right fade newAttributes-modal1" data-refresh="true" id="newAttributes-modal1" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header close-btn" style="padding: 16px;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="" style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">Edit Terms</h4>
            </div>
            <div class="modal-body pt-1" id="editData" style="padding: 16px;">
            </div>
        </div>
    </div>
</div>

{{-- Close Dummy Data --}}
@endsection

@section('modal')
@include('modals.delete_modal')
@endsection

@section('script')
<script type="text/javascript">
    $(document).ready(function() {
        var type = 'price_term';
        var url = "{{ route('price_terms.list_data') }}";
        dataList(type, url);


        function sort_brands(el) {
            $('#sort_brands').submit();
        }

        function update_approval_status(el) {
            if (el.checked) {
                var status = 1;
            } else {
                var status = 0;
            }

            $.post('{{ route('price_terms.approved') }}', {
                _token: '{{ csrf_token() }}',
                id: el.value,
                status: status
            }, function(data) {

                if (data == 1) {
                    AIZ.plugins.notify('success', '{{ translate('Terms Approval Status updated successfully') }}');
                } else {
                    AIZ.plugins.notify('danger', '{{ translate('Something went wrong') }}');
                }
            });
        }

        function dataList(type, url) {
            $.ajax({
                url: url,
                data: {
                    'type': type
                },
                type: 'GET',
                success: function(data) {
                    $(document).find("#members_tab_list li.active").removeClass('active');
                    $(document).find("#members_tab_list li[data-type='" + type + "']").addClass('active');
                    $("#brandsData").html(data);
                }
            });
        }

        $(document).on('click', '.clearForm', function() {
            document.getElementById("form-id").reset();
            $('#errorname').hide();
        });

        $(document).on('input', '.form-control', function() {
            $(this).closest('.error-text').find('.error_class_category').hide();
        });

        $(document).on('click', '#saveUnit', function() {

         let name = $(this).closest(".modal-content").find('input.name').val();

         var formData = $('#form-id').serialize();
         let action = $(this).closest('.modal-content').find('form').attr('action');
         var types = $(this).closest(".modal-content").find('#type').val();

         $("#errorname").css("display", "block").text('');

         $.ajax({
             method: "POST",
             url: action,
             data: formData,
             success: function(data) {
                 $("#form-id .invalid-feedback").remove();
                 if (data.error) {
                     $("#errorname").css("display", "block").text(data.error.name);

                 } else {
                     $("#newAttributes-modal").modal('hide');
                     AIZ.plugins.notify('success', 'Terms created successfully');
                     var type = types;
                    var url = "{{ route('price_terms.list_data') }}";

                     dataList(type, url);
                 }
             }
         });
     });

     
     $(document).on('keypress', '#update-id', function(e) {
    if (e.which == 13) {
        e.preventDefault();
        // You can optionally trigger the click event on the save button
        $('#UpdateUnit').click();
    }
});

     $(document).on('keypress', '#form-id', function(e) {
    if (e.which == 13) {
        e.preventDefault();
        // You can optionally trigger the click event on the save button
        $('#saveUnit').click();
    }
});


        $(document).on('click', '#UpdateUnit', function() {
            var formData = $('#update-id').serialize();
            let action = $(this).closest('.modal-content').find('form').attr('action');

            $.ajax({
                method: "POST",
                url: action,
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },

                success: function(data) {
                    $("#update-id .invalid-feedback").remove();
                    if (data.errors) {
                        $.each(data.errors, function(k, val) {
                            var err =
                                '<span class="invalid-feedback" role="alert" style="display: block;"><p>' +
                                val + '</p></span>';
                            var a = $("#update-id input[name=" + k + "]").after(err);
                        });
                    } else {
                        $("#newAttributes-modal1").modal('hide');
                        AIZ.plugins.notify('success', 'Terms Updated successfully');
                         var type = $('#members_tab_list li.active').data('type');
                        var url = "{{ route('price_terms.list_data') }}";
                        dataList(type, url);
                    }
                }
            });

        });

        $(document).on('click', '#editUnit', function(e) {
            var url = $(this).data('url');
            $.ajax({
                url: url,
                type: 'get',
                success: function(e) {
                    $("#editData").html(e);
                }
            });

        });

        $(document).on('click', '#deletebtn', function() {

            var url = $(this).data('href');
            var checkThis = $(this);
            var deleteModal = $('#delete-modal');
            deleteModal.modal({
                backdrop: 'static',
                keyboard: false
            });

            $('#delete-link').one('click', function(e) {
                $.ajax({
                    url: url,
                    type: "GET",
                    success: function(obj) {
                        $('#delete-modal').modal('hide');
                        AIZ.plugins.notify('success', 'Terms deleted successfully');
                        $('#delete-modal').modal('hide');
                        $("#deletedData").hide();
                        $("#sProduct").text("0");
                        var type = $('#members_tab_list li.active').data('type');
                        var url = "{{ route('price_terms.list_data') }}";

                        dataList(type, url);
                    }
                });
            });
        });

        $('#delete-modal').on('hidden.bs.modal', function () {
            $(this).find('#delete-link').off('click');
        });

        ////// Delete Multiple Data
        $(document).on('change',"#checkAll",function () {
            $(document).find(".checkedoptions input:checkbox").prop('checked', $(this).prop("checked"));
        });
        $(document).on('click', '#checkAll', function() {
            $("#sProduct").text("0");
            if ($(this).is(":checked")) {
                $("#deletedData, .selected-prod").css("display", "block");
                $(this).closest('table').find('#searchPage tr').addClass('active');
            } else {
                $("#deletedData, .selected-prod").css("display", "none");
                $(this).closest('table').find('#searchPage tr').removeClass('active');
            }
            $(".product_checkbox").prop("checked", this.checked);
            $("#select_count").html($("input.product_checkbox:checked").length + " Selected");
        });

        $(document).on('click', '.product_checkbox,#checkAll', function() {
            if ($(this).is(':checked')) {
                $(this).closest('tr').addClass('active');
            } else {
                $(this).closest('tr').removeClass('active');
            }
            
            const selectedCount = $('.product_checkbox:checked').length;
            $("#sProduct").text(selectedCount);

            if (selectedCount == $('.product_checkbox').length) {
                $('#checkAll').prop('checked', true);
            } else {
                $('#checkAll').prop('checked', false);
            }

            if (selectedCount == 0) {
                $("#deletedData, .selected-prod").css("display", "none");
            } else {
                $("#deletedData, .selected-prod").css("display", "block");
            }
        });

        $(document).on('click', '#delete_records', function() {
            var row = $(this).closest('tr');
            var products = [];
            var deleteModal = $('#delete-modal');
            $(".product_checkbox:checked").each(function() {
                products.push($(this).val());
            });

            if (products.length <= 0) {
                alert("Please select records.");
            } else {
                var selected_values = products.join(",");
                deleteModal.modal({
                    backdrop: 'static',
                    keyboard: false
                });

                $('#delete-link').one('click', function(e) {
                    $.ajax({
                        type: "POST",
                        url: "{{ route('price_terms.multi_delete') }}",
                        dataType: 'json',
                        data: {
                            emp_id: selected_values,
                            '_token': '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            AIZ.plugins.notify('success', 'Terms Deleted successfully');
                            $('#delete-modal').modal('hide');
                            $("#deletedData").hide();
                            $("#sProduct").text("0");
                            var type = $('#members_tab_list li.active').data('type');
                            var url = "{{ route('price_terms.list_data') }}";

                            dataList(type, url);
                          

                        },
                        error: function(data) {
                            console.log(data);
                        }
                    });
                });
            }
        });

        $(document).on('click', '#members_tab_list li', function() {
            $(this).siblings('li').removeClass('active');
            $(this).addClass('active');
            var type = $(this).data('type');
            var url = "{{ route('price_terms.list_data') }}";
            dataList(type, url);
            $("#deletedData, .selected-prod").css("display", "none");
        });

        $(document).on('click', 'a.page-link', function(event) {
            event.preventDefault();
            var url = $(this).attr('href');
            $.ajax({
                url: url,
                cache: false,
                success: function(html) {
                    $("#brandsData").html(html);
                }
            });
            $('#sProduct').text('0');
            $('#deletedData').hide();
            $('#restoreData').hide();
        });
    });
</script>
@endsection