@extends('layout.master')
@section('page-title', "UPDATE SCHOOLS")
@section('header-links')
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/vendors/css/tables/datatable/datatables.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/plugins/x-editable/dist/bootstrap4-editable/css/bootstrap-editable.css')}}">
@endsection

@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content"><div class="content-overlay"></div>
        <div class="content-wrapper">
            <div class="content-body">
                <section id="nav-filled">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="card-header">

                                @include ('modal-chat')
                                @include ('modal-course')

                                    <div class="card-content">
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table school-websites-table table-striped table-bordered table-hover">
                                                    <thead class="thead" style="text-align:center;">
                                                    <tr>
                                                        <th>Name</th>
                                                        <th>Websites</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </section>
            </div>
        </div></div>
    <!-- END: Content-->

    <div class="sidenav-overlay"></div>
    <div class="drag-target"></div>
    @php
    /* $visibility = [["value"=>"show", "text"=>"SHOW"], ["value"=>"hide", "text"=>"HIDE"]];
    $json_visibility = json_encode($visibility); */

    @endphp
@endsection

@section('footer-links')
    <script src="{{asset('app-assets/vendors/js/tables/datatable/datatables.min.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/tables/datatable/dataTables.bootstrap4.min.js')}}"></script>
    <script src="{{asset('app-assets/vendors/js/tables/datatable/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('app-assets/js/scripts/datatables/datatable.min.js')}}"></script>
    <script src="{{asset('app-assets/plugins/x-editable/dist/bootstrap4-editable/js/bootstrap-editable.min.js')}}"></script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        let table = $(".school-websites-table").DataTable({
            "sPaginationType": "full_numbers",
            "order": [],
            "retrieve": true,
            "stateSaveParams" : function (settings, data){
                data.order = "";
            },
            "ajax": {
                "url": "/school_branches",
                "type": "GET",
                "dataType": "json",
                "data": function ( d ) {
                    return $.extend( {}, d, {

                    } );
                },
                "dataSrc":""
            },
            "processing": true,
            "aLengthMenu": [30, 50, 100, 300],
            "deferRender": true,
            "orderClassess":false,
            fnDrawCallback: function(){

                $.fn.editable.defaults.placement = "right";
                $.fn.editable.defaults.send = "always";
                $.fn.editable.defaults.url = "/update-details";
                $.fn.editable.defaults.ajaxOptions = {type: "post", dataType: "json"};
                $.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit">OK</button>' + '<button type="button" class="btn editable-cancel">X</button>' ;

                let json_visibility = [{"value":"show","text":"SHOW"},{"value":"hide","text":"HIDE"}];

                $(".visibility").editable({
			 	 success: function(response, new_value){
			 		 if(response.status == "failed"){
			 			 return response.msg;
			 		 }else if(response.status == "success"){
			 			 return true;
			 		 }
			 	 },
			 	 params: function (params){
			 		 return {
			 			 value: params.value,
			 			 pk: params.pk,
			 			//  old_value: $(this).editable("getValue"),
			 			 name: params.name,
			 		 }
			 	 },
			 	 source: json_visibility,
			 	 display: function(value, sourceData) {
			 			 var colors = {show: "green", hide: "red"};
			 			 var sourceData = json_visibility;

			 			var  elem = $.grep(sourceData, function(o){return o.value == value;});
			 				if(elem.length) {
			 				$(this).text(elem[0].text).css("color", colors[value]);
			 			} else {
			 				$(this).empty();
			 			}
			 	 }
			 	});

            }
        });
    </script>
@endsection