@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" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.7/css/tether.min.css" integrity="sha512-hvQaBbuZeQnUD81rVYOVfLbiiGQ4poliFNaBhOk1BWrHKobIX/mxPe3oK+gEqzMNGKjs8hRxNWX/4E9RCf01eA==" crossorigin="anonymous" referrerpolicy="no-referrer" />--}}
{{--    <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/smoothness/jquery-ui.css">--}}
{{--    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/plugins/jquery-ui-1.10.3/ui/minified/jquery-ui.css')}}">--}}
{{--    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/plugins/x-editable/dist/jquery-editable/jquery-ui-datepicker/css/redmond/jquery-ui-1.10.3.custom.css')}}">--}}
{{--    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/plugins/x-editable/dist/jquery-editable/css/jquery-editable.css')}}">--}}
    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/plugins/x-editable/dist/bootstrap4-editable/css/bootstrap-editable.css')}}">
{{--    <link rel="stylesheet" type="text/css" href="{{asset('app-assets/plugins/jqueryui-editable/css/jqueryui-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"><!-- Dashboard Ecommerce Starts -->
                <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>
                                                        <th>Whatsapp Number</th>
                                                        <th>Phone Number</th>
                                                        <th>Email</th>
                                                        <th>Payment Plan</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody></tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </section>
            </div><!-- Dashboard Ecommerce ends -->
        </div></div>
    <!-- END: Content-->

    <div class="sidenav-overlay"></div>
    <div class="drag-target"></div>
@endsection

@section('footer-links')
{{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.7/js/tether.min.js" integrity="sha512-X7kCKQJMwapt5FCOl2+ilyuHJp+6ISxFTVrx+nkrhgplZozodT9taV2GuGHxBgKKpOJZ4je77OuPooJg9FJLvw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>--}}
    <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/js/scripts/bootstrap4-editable.js')}}"></script>--}}
{{--    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>--}}
{{--    <script src="{{asset('app-assets/plugins/jquery-ui-1.10.3/ui/minified/jquery-ui.min.js')}}"></script>--}}
{{--    <script src="{{asset('app-assets/plugins/x-editable/dist/jquery-editable/jquery-ui-datepicker/js/jquery-ui-1.10.3.custom.min.js')}}"></script>--}}
{{--    <script src="{{asset('app-assets/plugins/x-editable/dist/jquery-editable/js/jquery-editable-poshytip.min.js')}}"></script>--}}
{{--    <script src="{{asset('app-assets/plugins/jqueryui-editable/js/jqueryui-editable.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-websites",
                "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>' ;


                $(".website").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,
                        }
                    },
                    display: function(value) {
                        $(this).html(value);

                    },
                    validate: function(value) {
                        if($.trim(value) === "") {
                            return "This field is required";
                        }
                    },
                    inputclass: "form-control"
                });

                $(".whatsapp_number").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,
                        }
                    },
                    display: function(value) {
                        $(this).html(value);

                    },
                    
                    inputclass: "form-control"
                });

                $(".phonenumber").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,
                        }
                    },
                    display: function(value) {
                        $(this).html(value);

                    },
                    
                    inputclass: "form-control"
                });

                $(".email").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,
                        }
                    },
                    display: function(value) {
                        $(this).html(value);

                    },
                    
                    inputclass: "form-control"
                });

                $(".payment_plan").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,
                        }
                    },
                    display: function(value) {
                        $(this).html(value);

                    },
                    
                    inputclass: "form-control"
                });

            }
        });
    </script>
@endsection