@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="{{url('admin/settings')}}">Settings</a></li>-->
                <li><a href="#">Subject</a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">
                <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;">Subject</h2>
                                    <span class="subtitle">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- BEGIN PAGE BAR -->
                    <div class="row">
                        <div class="col-md-12">
                            <!--THIS IS CONTENT DIV START-->
                            <div class="portlet-body flip-scroll">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="col-md-6 trash ui-droppable">
                                            <div class="new_product_left">
                                                <h4>SUBJECT</h4>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</p>
                                            </div>
                                        </div>
                                        <div class="col-md-6 new_product_form">
                                            <div class="portlet-body">
                                                <div class="products box role">
                                                    <div class="header_tbl">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="col-md-5 row_header">Subject Title</div>
                                                                <div class="col-md-6 row_header b4_del_header">Description</div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="row_wrap" >
                                                        <div class="row_inner_wrap">
                                                            <div class="row" id="module_form_row">
                                                                @if(!empty($data["items"]))

                                                                @foreach($data["items"] as $item)
                                                                <div class="col-md-12" id="update_form" form-action="{{route('admin.subjects.update',$item['id'])}}">
                                                                    <div class="col-md-5 inner_row b4_del_header">
                                                                        <input type="text" name="title" id="title" value="{{$item['title']}}" placeholder="Add a new standard" class="form-control title validate" autocomplete="off">
                                                                        <p class="text-danger title hidden" style="margin: 0px;"></p>
                                                                    </div>
                                                                    <div class="col-md-6 inner_row b4_del_header">
                                                                        <input type="text" name="description" id="description" value="{{$item['description']}}" placeholder="Add a description" value="" class="form-control description add" autocomplete="off">

                                                                        <div class="edit_icon" id="edit_form" style="display: block">
                                                                            <i class="fa fa-edit add_row" onclick="updateData(event.target)"></i>
                                                                        </div>
                                                                        <div class="del_icon" id="del_icon" style="display: block">
                                                                            <i class="fa fa-minus add_row del_data"></i>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                @endforeach
                                                                @endif
                                                                <div class="col-md-12" id="create_form">
                                                                  
                                                                    <div class="col-md-5 inner_row b4_del_header">
                                                                        <input type="text" name="title" id="title" placeholder="Add a new standard" class="form-control title validate" autocomplete="off">
                                                                        <p class="text-danger title hidden" style="margin: 0px;"></p>
                                                                    </div>
                                                                    <div class="col-md-6 inner_row b4_del_header">
                                                                        <input type="text" name="description" id="description" placeholder="Add a description" value="" class="form-control description add" autocomplete="off">
                                                                        <div class="add_icon" id="add_form">
                                                                            <i class="fa fa-plus add_row" onclick="saveData()"></i>
                                                                        </div>
                                                                        <div class="edit_icon" style="display: none">
                                                                            <i class="fa fa-edit add_row" onclick="updateData(event.target)"></i>
                                                                        </div>
                                                                        <div class="del_icon" style="display: none">
                                                                            <i class="fa fa-minus add_row del_data"></i>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--THIS IS CONTENT DIV 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" onclick="deleteCancel()">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1" onclick="deleteData(event.target)">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('assets/custom/settings.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/custom/custom.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/custom/custom-style.css')}}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i,700,700i" rel="stylesheet">
<link href="{{asset('css/sweetalert.css')}}" rel="stylesheet" type="text/css" />
<!-- DATE PICKER -->
<link href="{{asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')}}" rel="stylesheet"
      type="text/css" />
<style>
    .add{
        float: left;
        width: 95%;
    }

    .add_icon{
        float: right;
        margin-right: -18px;
        top: 5px;
        padding: 3px 3px!important;
    }

    .col-md-1{
        width:30px !important;
    }

    /*    .del_icon{
            right: 2px !important;
            background: none !important;
            border:none !important;
            font-size: 18px !important;
        }*/

    .help_btn {
        background: #A8A8A8;
        text-align: center;
        margin-right: 22px;
        margin-top: 5px;
    }
    .error-input-border {
        border-color: red !important;
    }
    .del_icon {
        float: right !important;
        margin-right: -52px !important;
        top: 5px !important;
        padding: 3px 3px !important;
    }

    .edit{
        float: left;
        width: 95%;
    }

    .edit_icon{
        float: right;
        margin-right: -18px;
        top: 5px;
        padding: 3px 3px!important;
    }
</style>
@stop
@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/general.js')}}" type="text/javascript"></script>

<script type="text/javascript">

                    /*SCROLLING COMPLETE*/
                    $(document).ready(function () {
                        //SELECT 2 Simple//
                        $(".select2").select2({
                            placeholder: "--Select--",
                            allowClear: true
                        });
                    });

                    /*
                     * create form
                     */


                    function saveData() {
                        $("#create_form").find("p.title").addClass("hidden").text("");
                        $("#create_form").find("input[name='title']").removeClass("error-input-border");
                        var titleInput = $("#create_form").find("input[name='title']");
                        var descriptionInput = $("#create_form").find("input[name='description']");
                        var title = titleInput.val();
                        var description = descriptionInput.val();
                        var titleMaxLength = string_length(title, -1);
                        var emptyVal = isEmpty(title);

                       
                        if (emptyVal) {
                            titleInput.addClass("error-input-border");
                            var errorText = "The title field is required.";
                            $("#create_form").find("p.title").removeClass("hidden").text(errorText);
                            return false;
                        }
                        if (titleMaxLength == false) {
                            titleInput.addClass("error-input-border");
                            var errorText = "Your title must be maximum 10 characters";
                            $("#create_form").find("p.title").removeClass("hidden").text(errorText);
                            return false;
                        }
                        var formData = new FormData();
                        formData.append('title', title);
                        formData.append('description', description);
                        formData.append('_token', "{{csrf_token()}}");
                        $.ajax({
                            url: "{{route('admin.subjects.store')}}",
                            type: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function (res) {
                                if (res.status == 200) {
                                    alertbox('success', res.message);
                                    $("#create_form").find(".add_icon").remove();
                                    $("#create_form").find(".edit_icon").css("display", "block").attr({'id': 'edit_form'});
                                    $("#create_form").find(".del_icon").css("display", "block").attr({'id': 'del_icon'});
                                    $("#create_form").attr({'id': 'update_form', 'form-action': res.result.route});
                                    $("#module_form_row").append(res.html);
                                }
                                if (res.status == 300) {
                                    $.each(res.errors, function (key, value) {
                                        $("#create_form").find("p." + key).removeClass("hidden").text(value);
                                        titleInput.addClass("error-input-border");
                                    });
                                }
                            },
                            error: function (res) {
                                $('.alert_box').fadeIn().delay(2000).fadeOut(200).html('Server not found');
                            },
                        });

                    }


                    /*
                     * Update form
                     */


                    function updateData(event) {
                        $this = $(event);
                        $this.parent().parent().parent().find("p.title").addClass("hidden").text("");
                        $this.parent().parent().parent().find("input[name='title']").removeClass("error-input-border");
                        var formId = $this.parent().parent().parent().attr("id");
                        if (formId == "update_form") {
                            var route = $this.parent().parent().parent().attr("form-action");
                            var titleInput = $this.parent().parent().parent().find("input[name='title']");
                            var descriptionInput = $this.parent().parent().parent().find("input[name='description']");
                            var title = titleInput.val();
                            var description = descriptionInput.val();
                            var titleMaxLength = string_length(title, -1);
                            var emptyVal = isEmpty(title);

                            
                            if (emptyVal) {
                                titleInput.addClass("error-input-border");
                                var errorText = "The title field is required.";
                                $this.parent().parent().parent().find("p.title").removeClass("hidden").text(errorText);
                                return false;
                            }
                            if (titleMaxLength == false) {
                                titleInput.addClass("error-input-border");
                                var errorText = "Your title must be maximum 10 characters";
                                $this.parent().parent().parent().find("p.title").removeClass("hidden").text(errorText);
                                return false;
                            }
                            $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('input[name="_token"]').val()}});
                            var $post = {};
                            $post.title = title;
                            $post.description = description;
                            $.ajax({
                                url: route,
                                type: 'PATCH',
                                data: $post,
                                cache: false,
                                success: function (res) {
                                    if (res.status == 200) {
                                        alertbox('success', res.message);
                                    }
                                    if (res.status == 300) {
                                        $.each(res.errors, function (key, value) {
                                            $this.parent().parent().parent().find("p." + key).removeClass("hidden").text(value);
                                            titleInput.addClass("error-input-border");
                                        });
                                    }
                                },
                                error: function (res) {
                                    $('.alert_box').fadeIn().delay(2000).fadeOut(200).html('Server not found');
                                },
                            });
                        }

                    }
                    ;

                    /*
                     * Delete data
                     */

                    $(document).on('click', '.del_data', function () {
                        $this = $(this);
                        var formId = $this.parent().parent().parent().attr("id");
                        if (formId == "update_form") {
                            var route = $this.parent().parent().parent().attr("form-action");
                            $('#sweetalert_wrap').show();
                            $('#sweetalert_wrap').find(".confirm").attr("data-route", route);
                        }
                    });

                    function deleteData(event) {
                        $this = $(event);
                        var route = $this.attr("data-route");
                        console.log(route);
                        $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('input[name="_token"]').val()}});
                        $.ajax({
                            url: route,
                            type: 'DELETE',
                            cache: false,
                            success: function (res) {
                                if (res.status == 200) {
                                    alertbox('success', res.message);
                                    $('#sweetalert_wrap').hide();
                                    $('div[form-action="' + route + '"]').remove();
                                }
                               
                                if (res.status == 400) {
                                    alertbox('danger', res.message);
                                }
                            },
                            error: function (res) {
                                $('.alert_box').fadeIn().delay(2000).fadeOut(200).html('Server not found');
                            },
                        });
                    }
                    
                    
                    function deleteCancel(){
                        $('#sweetalert_wrap').hide();
                    }
</script>

@stop