@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content">
        <div class="top_status_bar">
            <div id="top_progress_bar" class="progress_bar">
            </div>
        </div>
        <div class="breadcrumbs">
            <ul>
                <li><a href="{{route('admin.dashboard')}}">Home</a></li>
                <li><a href="{{url('admin/settings')}}">Settings</a></li>
                <li><a href="#">KOT</a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>
    <div class="page-content">
        <div class="portlet">
            <!-- BEGIN PAGE HEADER-->
            <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;"> Kitchen order tickets</h2>
                            <span class="subtitle"> All KOT's under your selected branch is listed here, you can edit,
                                disable or manage them from here.</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">
                                            {{-- <span class="sub_heading">What all are the source of your business
                                                deals?</span> --}}
                                            {{-- <span class="sub_heading">These settings will be applicable for all the
                                                leads and customers regardless of their status like suspects, prospects,
                                                qualified and converted.</span> --}}
                                        </div>
                                        <div class="col-md-1"></div>
                                        <div class="col-md-6">
                                            <div class="row" id="source">
                                                <div class="portlet-body">
                                                    <div class="products box">
                                                        <div class="header_tbl">
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <div class="col-md-6 row_header">Kitchen order
                                                                        tickets</div>
                                                                    <div class="col-md-5 row_header b4_del_header">
                                                                        Description
                                                                    </div>
                                                                    <div class="del_header"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row_wrap">
                                                            @foreach($kotlist as $key=>$kotdata)

                                                            <div class="row_inner_wrap">
                                                                <div class="row">
                                                                    <div class="col-md-12">

                                                                        <div class="col-md-6 inner_row">
                                                                            <input type="text" id="" name="channel"
                                                                                value="{{$kotdata['name']}}"
                                                                                class="form-control source" readonly="">
                                                                            <i class="fa fa-check edit_source edit_field edit_field_title"
                                                                                data-uuid="{{$kotdata['id']}}"></i>
                                                                        </div>
                                                                        <div class="col-md-5 inner_row b4_del_header">
                                                                            <input type="text" id="description"
                                                                                name="description"
                                                                                placeholder="Kot description..."
                                                                                value="{{$kotdata['description']}}"
                                                                                class="form-control desc" readonly="">
                                                                            <i class="fa fa-check edit_desc edit_field edit_field_description "
                                                                                data-uuid="{{$kotdata['id']}}"
                                                                                data-des="{{$kotdata['description']}}"></i>
                                                                        </div>

                                                                        <div class="del_icon">
                                                                            <i class="fa fa-trash-o del"
                                                                                data-uuid="{{$kotdata['id']}}"
                                                                                data-type="channel" 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" style="display: none;">
                                                                            <i class="fa fa-check edit_row"></i>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            @endforeach
                                                            <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-6 inner_row">
                                                                            <input type="text" name="title" id="titile"
                                                                                placeholder="Kot 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="col-md-5 inner_row b4_del_header">
                                                                            <input type="text" name="description"
                                                                                placeholder="Kot description....."
                                                                                value=""
                                                                                class="form-control desc description">
                                                                            <i class="fa fa-check edit_desc edit_field edit_field_description"
                                                                                data-uuid="" data-type="stage"></i>
                                                                        </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>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- MAIN CONTENT END -->
                    </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// -->


@endsection
@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet"
    type="text/css" />
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" type="text/css" />
<link href="{{asset('css/sweetalert.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/custom/settings.css')}}" rel="stylesheet" type="text/css" />
@stop
@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/general.js')}}"></script>
<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');
    }
});

//description 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');
    }
});


$(document).on('click', '#source .add_row', function () {
    var new_kitchen_name = $(this).parent().parent().parent().find(".title").val();
    var new_kitchen_description = $(this).parent().parent().parent().find(".description").val();
    if (new_kitchen_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_kitchen_name != '') {
        $('#busyloading').show();

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

        $.ajax({
            type: 'POST',
            url: "{{route('admin.kitchen-order-tickets.store')}}",
            data: {'new_kitchen_name':new_kitchen_name,'new_kitchen_description':new_kitchen_description},
            
            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_kitchen_name = $(this).parent().find('.source').val();
    var edit_kitchen_description = $(this).parent().find('.desc').val();

    if (edit_kitchen_name == '') {
        $(this).parent().find('.source').addClass('error_custom');
        return false;
    }

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


    $.ajax({
        method: 'Patch',
        url: "{{ url('/admin/kitchen-order-tickets/') }}/" + uuid,
        data: {'id': uuid, 'edit_kitchen_name': edit_kitchen_name, 'edit_kitchen_description': edit_kitchen_description},
        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");
                
            }
            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 .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('/admin/kitchen-order-tickets/') }}/" + 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