@extends('layouts.app')

@section('content')
<!-- IPTV CONTENT BODY -->

<!-- TOPBAR -->
<div class="top_bar page-content">
    <!-- LOADER -->
    <div class="loader">
        <div class="top_status_bar load">
            <div class="progress_bar bar" style="left: 0px;">
            </div>
        </div>
    </div>
    <!-- END LOADER -->
    <!-- BREADCRUMBS -->
    <div class="breadcrumbs">
        <ul>
            <li><a href="{{ route('admin.dashboard') }}">Home</a></li>
            <li><a href="#" class="">Services</a></li>
        </ul>
        <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
    </div>
    <!-- END BREADCRUMBS -->
</div>

<!-- END TOPBAR -->
<!-- PAGE CONTENT -->
<div class="page-content">
    <div class="row">
        <div class="col-md-12">
            <!-- Begin: life time stats -->
            <div class="portlet">
                {{--  <div class="portlet-title">
                    <div class="caption">
                        <h2>Services
                            <!--<span class="subtitle"> All the team members registered under employee section listed here, you can filter results based on values for better management.</span>-->
                        </h2>
                    </div>
                    @php
                    $get_permission = permission('service-management','full-permission');

                    @endphp
                    @if($get_permission)
                    <div class="actions success_actions" style="">
                        <a href="" data-toggle="modal" data-target="#new_service"
                            class="add_new portal_add_btn new_service">
                            <i class="fa fa-plus"></i>
                        </a>
                        <ul class="nav navbar-nav netsec_menucontent">
                            <li class="actions_dropdown dropdown">
                                <a href="#">Actions</a>
                                <ul class="actions_list dropdown-menu">
                                    <li>
                                        <a href="" data-toggle="modal" data-target="#new_service"
                                            class="add_new new_service">New Services</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    @endif
                </div>  --}}

                {{--  <div class="portlet-body flip-scroll">
                    <table id="service_data_table"
                        class="table filterable table-striped table-bordered table-hover custom_table">
                        <thead class="flip-content thead">
                            <tr>
                                <th class="th_1">Service Image</th>
                                <th class="th_2 ">Service Name</th>
                                <th class="th_3 ">Service Description</th>
                                <th>Action </th>


                            </tr>
                        </thead>
                        <tbody class="tbody">

                        </tbody>
                    </table>


                </div>  --}}
                <div class="portlet-title page_heading">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="caption">
                                <h2 style="font-weight: 600; margin-top: 0;"> Package management</h2>
                                <span class="subtitle"> must pay a recurring price at regular intervals for access to a product..</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- BEGIN PAGE BAR -->
    
                <div class="row each_row">
                    <div class="col-md-12">
                        <div class="portlet setting_landing">
                            <!-- MAIN CONTENT START -->
                            <div class="portlet-body">
                                <div class="settings">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="col-md-4">
                                                {{-- <span class="main_title">Lead Sources</span> --}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row each_row">
                                        <div class="col-md-12">
                                            <div class="col-md-4">
                                               
                                            </div>
                                            <div class="col-md-1"></div>
                                            <div class="col-md-4">
                                                <div class="row">
                                                    <div class="portlet-body">
                                                        <div class="products box">
                                                            <div class="header_tbl">
                                                                <div class="row">
                                                                    <div class="col-md-12">
                                                                        <div class="col-md-10 row_header">Package Name
                                                                            </div>
                                                                      

                                                                        <div class="del_header"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row_wrap">
                                                                <div id="source">
                                                                @foreach($packages as $key=>$packagedata)
                                                              
                                                               <form id="product_edit_{{$packagedata['id'] }}">
                                                               @method('PUT')
                                                                <div class="row_inner_wrap">
                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                        
    
                                                                            <div class="col-md-10 inner_row">
                                                                                <input type="text" id="" name="package_name"
                                                                                    value="{{$packagedata['package_name']}}"
                                                                                    class="form-control show_edit source" readonly="">
                                                                               
                                                                            </div>
                                                                          

                                                                    
    
                                                                            <div class="del_icon">
                                                                                <i class="fa fa-trash-o del"
                                                                                    data-uuid="{{$packagedata['id']}}"
                                                                                    data-type="package_name" aria-hidden="true"
                                                                                    style="visibility: visible"></i>
                                                                            </div>
    
                                                                            <!-- <div class="add_icon" style="display: none;">
                                                                                <i class="fa fa-plus add_row"></i>
                                                                            </div> -->
                                                                            <div class="edit_icon"   data-uuid="{{$packagedata['id']}}" style="display: none;">
                                                                                <i class="fa fa-check edit_row"></i>
                                                                            </div>
                                                                        </div>
                                                                      
                                                                    </div>
                                                                </div>
                                                                </form>
                                                                @endforeach
                                                                </div>
                                                                
                                                                <form id="package_table">
                                                                <div class="row_inner_wrap">
                                                                    <div class="row">
                                                                        <input type="hidden" class="sorting" data-uuid=""
                                                                            value="">
                                                                        <div class="col-md-12">
                                                                            <div class="col-md-10 inner_row">
                                                                                <input type="text" name="package_name" id="titile" placeholder="Package Name..." value=""
                                                                                    class="form-control source title">
                                                                                <i class="fa fa-check edit_source edit_field edit_field_title"
                                                                                    data-uuid="" data-type="stage"></i>
                                                                                <p class="text-danger new_kitchen_name hidden"
                                                                                    style="position:relative;margin-bottom:10px;">
                                                                                </p>
                                                                            </div>

                                                                       
                                                                            <div class="del_icon">
                                                                                <i class="fa fa-trash-o del" data-uuid=""
                                                                                    data-type="stage" aria-hidden="true"
                                                                                    style=""></i>
                                                                            </div>
    
                                                                            <div class="add_icon" style="">
                                                                                <i class="fa fa-plus add_row"
                                                                                    data-type="stage"></i>
                                                                            </div>
                                                                            <div class="edit_icon" style="display: none;">
                                                                                <i class="fa fa-check edit_row"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                </form>
                                                            </div>
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- MAIN CONTENT END -->
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- //SWEET_ALERT START// -->
<div id="sweetalert_wrap" class="sweet_alert_wrap">
    <!-- Sweet alert -->
    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true"
        data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true"
        data-animation="pop" data-timer="null">
        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
            <span class="sa-body pulseWarningIns"></span>
            <span class="sa-dot pulseWarningIns"></span>
        </div>
        <h2>Do you want to delete?</h2>
        <div class="sa-button-container">
            <button class="cancel" tabindex="2">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1">Confirm</button>
            </div>
        </div>
    </div>
</div>

<!-- //SWEET_ALERT END// -->

<div class="modal scrollable fade bs-modal right modal-fullscreen r_u_sure in" id="new_service" role="dialog"
    aria-hidden="false" style=""></div>
<div class="modal scrollable fade bs-modal right modal-fullscreen r_u_sure in" id="edit_service_modal" role="dialog"
    aria-hidden="false" style="">
</div>

<!--Image Upload Modal-->
<div class="modal fade uplaod_wrap" id="modal_image_uplaod">
    <div class="modal-dialog modal-content uplodImg" style="width: 390px;">
        <form id="upload_pr_pc" class="modal-content" action="{{route('admin.service.image.store.session') }}"
            enctype="multipart/form-data" method="POST">
            <input type="hidden" name="_token" value="">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Upload Photo</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div id="upload-demo" style="width: 360px; position: relative;">
                            <button style="font-size:24px; position: absolute; top: 30px; right: 30px; z-index: 9999;"
                                id="upload1"><i class="fa fa-upload"></i></button>
                        </div>
                        <input type="file" id="upload" value="" name="image" style="display: none;">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-success upload-service-image">Upload Image</button>
            </div>
        </form>
    </div>
</div>
<!-- End Image Upload Modal -->


@endsection
@section('admin_css')
<link href="{{asset('global/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<style>
    * {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .iti__hide {
        display: none;
    }

    pre {
        margin: 0 !important;
        display: inline-block;
    }

    .token.operator,
    .token.entity,
    .token.url,
    .language-css .token.string,
    .style .token.string,
    .token.variable {
        background: none;
    }

    .iti input,
    .iti button {
        height: 35px;
        margin: 0;
        padding: 6px 12px;
        border-radius: 2px;
        font-family: inherit;
        font-size: 100%;
        color: inherit;
    }

    input[disabled],
    button[disabled] {
        background-color: #eee;
    }

    ::-webkit-input-placeholder {
        color: #BBB;
    }

    ::-moz-placeholder {
        /* Firefox 19+ */
        color: #BBB;
        opacity: 1;
    }

    :-ms-input-placeholder {
        color: #BBB;
    }

    #result {
        margin-bottom: 100px;
    }

    .page-header-fixed .page-container {
        margin-top: 0;
    }

    .page-header-fixed .page-content-wrapper {
        margin-top: 60px;
    }


    /* body .page-container {height: 100%;} */
    body .page-container {
        background-color: #ffffff;
        min-height: 100%;
        height: auto !important;
        margin: 60px auto -33px;
    }

    body .page-container {
        min-height: 100%;
    }

    body .page-footer {
        background-color: #364150;
        height: 33px;
        position: relative;
    }

    .page-sidebar-wrapper .page-sidebar {
        margin-top: 60px;
    }

    .table.table-bordered thead>tr>th {
        text-align: center;
    }

    #service_data_table td:nth-child(1),
    #service_data_table td:nth-child(2),
    #service_data_table td:nth-child(4) {
        text-align: center;
    }
    #service_data_table td:nth-child(3){
        text-align: left;
    }
     .edit_field {
    position: absolute;
    top: 14px;
    right: 14px;
    color: #63C647;
    cursor: pointer;
    z-index: 2;
    visibility: hidden;
}
</style>
@stop

@section('admin_js')
<script src="{{asset('js/genaral.js')}}" type="text/javascript"></script>
<script src="{{asset('global/datatables/datatables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('global/datatables/plugins/bootstrap/datatables.bootstrap.js')}}" type="text/javascript"></script>
{{--  @include('admin.js.services')  --}}
<script type="text/javascript">
    $('body').on('click', '#source .source', function () {
    var attr = $(this).attr('readonly');
    if (typeof attr !== typeof undefined && attr !== false) {
        $(this).removeAttr('readonly').focus();
        $(this).parent().find('.edit_source').css('visibility', 'visible');
    }
});

//no of days Edit
$('body').on('click', '#source .desc', function () {
    var attr = $(this).attr('readonly');

    if (typeof attr !== typeof undefined && attr !== false) {
        $(this).removeAttr('readonly').focus();
        $(this).parent().find('.edit_desc').css('visibility', 'visible');
    }
});


// no of keys edit
$('body').on('click', '#source .keys', function () {
    var attr = $(this).attr('readonly');

    if (typeof attr !== typeof undefined && attr !== false) {
        $(this).removeAttr('readonly').focus();
        $(this).parent().find('.edit_keys').css('visibility', 'visible');
    }
});

// no of users edit
$('body').on('click', '#source .show_edit', function () {
    
    var attr = $(this).attr('readonly');
    $(this).parent().parent().find('.edit_icon').css('display', 'block');

    if (typeof attr !== typeof undefined && attr !== false) {
        $(this).removeAttr('readonly').focus();
        $(this).parent().find('.edit_users').css('visibility', 'visible');
    }
});


// no of services edit
$('body').on('click', '#source .services', function () {
    var attr = $(this).attr('readonly');
   

    if (typeof attr !== typeof undefined && attr !== false) {
        $(this).removeAttr('readonly').focus();
        $(this).parent().find('.edit_services').css('visibility', 'visible');
    }
});

// no of categories edit
$('body').on('click', '#source .categories', function () {
    var attr = $(this).attr('readonly');

    if (typeof attr !== typeof undefined && attr !== false) {
        $(this).removeAttr('readonly').focus();
        $(this).parent().find('.edit_categories').css('visibility', 'visible');
    }
});

// no of items edit
$('body').on('click', '#source .items', function () {
    var attr = $(this).attr('readonly');

    if (typeof attr !== typeof undefined && attr !== false) {
        $(this).removeAttr('readonly').focus();
        $(this).parent().find('.edit_items').css('visibility', 'visible');
    }
});

// no of channels edit
$('body').on('click', '#source .channels', function () {
    var attr = $(this).attr('readonly');

    if (typeof attr !== typeof undefined && attr !== false) {
        $(this).removeAttr('readonly').focus();
        $(this).parent().find('.edit_channels').css('visibility', 'visible');
    }
});




$(document).on('click', '.edit_icon', function () {
  
    var uuid = $(this).attr('data-uuid');
    
    var new_package_name = $(this).parent().parent().parent().find(".title").val();
   var new_no_of_days = $(this).parent().parent().parent().find(".description").val();
   var formname = "product_edit_"+uuid;
    var formdata = new FormData(document.getElementById(formname));
   
    // var no_of_keys = $(this).parent().parent().parent().find(".no_of_keys").val();
    if (new_package_name == '') {
        $('#titile').addClass('error_custom');
        $('#titile').parent().find('.select2-container--bootstrap .select2-selection').addClass('error_custom');
        $('.titile').fadeIn(200).delay(5000).fadeOut(200);

        return false;
    }

    if (new_package_name != '') {
        $('#busyloading').show();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            }
        });
       // var formData = new FormData();
        

        $.ajax({
            method: 'post',
        url: "{{ url('/package-managements/') }}/" + uuid,
            data: formdata,
                processData: false,
                contentType: false,
            
            success: function (response) {
               
                console.log(response);
                if (response['status'] == '1000') {
                    alertbox('success', response.message);
                    $(".row_wrap").html(response.html);
                   // location.reload();
                    $('#busyloading').hide();
                }
                if (response['status'] == 2000) {
                    $.each(response['errors'], function (key, value) {
                        $("p." + key).removeClass("hidden").text(value);
                    });
                    $('#busyloading').hide();

                }
                if (response['status'] == 3000) {
                    alertbox('danger', response.message);
                    $('#busyloading').hide();

                }

            }

        });
    }
});



$(document).on('click', '.add_row', function () {
    
    var new_package_name = $(this).parent().parent().parent().find(".title").val();
  
    var formdata = new FormData(document.getElementById('package_table'));
   
    // var no_of_keys = $(this).parent().parent().parent().find(".no_of_keys").val();
    if (new_package_name == '') {
        $('#titile').addClass('error_custom');
        $('#titile').parent().find('.select2-container--bootstrap .select2-selection').addClass('error_custom');
        $('.titile').fadeIn(200).delay(5000).fadeOut(200);

        return false;
    }
   
    if (new_package_name != '') {
        $('#busyloading').show();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            }
        });
       // var formData = new FormData();
        

        $.ajax({
            type: 'POST',
            url: "{{route('admin.package-managements.store')}}",
            data: formdata,
                processData: false,
                contentType: false,
            
            success: function (response) {
               
                console.log(response);
                if (response['status'] == '1000') {
                    alertbox('success', response.message);
                    $(".row_wrap").html(response.html);
                   // location.reload();
                    $('#busyloading').hide();
                }
                if (response['status'] == 2000) {
                    $.each(response['errors'], function (key, value) {
                        $("p." + key).removeClass("hidden").text(value);
                    });
                    $('#busyloading').hide();

                }
                if (response['status'] == 3000) {
                    alertbox('danger', response.message);
                    $('#busyloading').hide();

                }

            }

        });
    }
});



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

    $this = $(this);
    var uuid = $(this).attr('data-uuid');
    var edit_package_name = $(this).parent().find('.source').val();
    var edit_no_of_days = $(this).parent().find('.desc').val();
    var edit_no_of_keys = $(this).parent().find('.keys').val();
    var edit_no_of_users = $(this).parent().find('.users').val();
    var edit_no_of_services = $(this).parent().find('.services').val();
    var edit_no_of_categories = $(this).parent().find('.categories').val();
    var edit_no_of_items = $(this).parent().find('.items').val();
    var edit_no_of_channels = $(this).parent().find('.channels').val();
   // var formdata = new FormData(document.getElementById('package_table_edit'));



    if (edit_package_name == '') {
        $(this).parent().find('.source').addClass('error_custom');
        return false;
    }
    if (edit_no_of_days == '') {
        $(this).parent().find('.desc').addClass('error_custom');
        return false;
    }
    if (edit_no_of_keys == '') {
        $(this).parent().find('.keys').addClass('error_custom');
        return false;
    }

    // if (edit_no_of_users == '') {
    //     $(this).parent().find('.users').addClass('error_custom');
    //     return false;
    // }

    // if (edit_no_of_services == '') {
    //     $(this).parent().find('.services').addClass('error_custom');
    //     return false;
    // }

    // if (edit_no_of_categories == '') {
    //     $(this).parent().find('.categories').addClass('error_custom');
    //     return false;
    // }

    // if (edit_no_of_items == '') {
    //     $(this).parent().find('.items').addClass('error_custom');
    //     return false;
    // }

    // if (edit_no_of_channels == '') {
    //     $(this).parent().find('.channels').addClass('error_custom');
    //     return false;
    // }

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        }
    });


    $.ajax({
        method: 'PUT',
        url: "{{ url('/package-managements/') }}/" + uuid,
        data: {'id': uuid, 'package_name': edit_package_name, 'no_of_days': edit_no_of_days,'no_of_keys': edit_no_of_keys,
            'no_of_users': edit_no_of_users,'no_of_services': edit_no_of_services,'no_of_categories': edit_no_of_categories,'no_of_items': edit_no_of_items
            ,'no_of_channels': edit_no_of_channels},
            // data: formdata,
            //     processData: false,
            //     contentType: false,
        success: function (response) {

            if (response['status'] == '1000') {
                alertbox('success', response.message);
                $this.css("visibility","hidden");
                $this.parent().find('.source').attr("readonly","readonly");
                $this.parent().find('.desc').attr("readonly","readonly");
                $this.parent().find('.keys').attr("readonly","readonly");
                $this.parent().find('.users').attr("readonly","readonly");
                $this.parent().find('.services').attr("readonly","readonly");
                $this.parent().find('.categories').attr("readonly","readonly");
                $this.parent().find('.items').attr("readonly","readonly");
                $this.parent().find('.channels').attr("readonly","readonly");
                
            }
            if (response['status'] == 2000) {
                $.each(response['errors'], function (key, value) {
                    $("p." + key).removeClass("hidden").text(value);
                });
                $('#busyloading').hide();

            }
            if (response.status == 3000) {
                alertbox('danger', response.message);
                 $('#busyloading').hide();
            }
        }

    });

});

// DELETE FUNCTION

$(document).on('click', '#source .del', function () {
    var target = $(this).parent().parent().parent().parent();
    var id = $(this).attr('data-uuid');
    $('#sweetalert_wrap').show();
    $('#sweetalert_wrap').find(".confirm").attr("data-id", id);
});
$(document).on('click', '.confirm', function () {
    var id = $(this).attr("data-id");
    $.ajax({
        method: 'DELETE',
        url: "{{ url('/package-managements/') }}/" + id,
        headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
        success: function (response) {
            if (response['status'] == 1000) {

                if (response['status'] == '1000') {
                    alertbox('success', response.message);
                    $('.row_wrap').html(response.html);
                }

            } else if (response['status'] == 3000) {
                alertbox('warning', response['message']);
                $('#busyloading').hide();
                return false;
            }
        }
    });
    $('#sweetalert_wrap').hide();

});
$(document).on('click', '.cancel', function () {
    $('#sweetalert_wrap').hide();
});

</script>
@stop