@extends('layout.master')
@section('page-title', "SCHOOLS | PARTNERS")
@section('header-links')
    <link rel="stylesheet" type="text/css" href="app-assets/vendors/css/tables/datatable/datatables.min.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>Action</th>
                                <th>School</th>
                                <th>Latest Invoice</th>
                                <th>Next Invoice</th>
                                <th>Contact</th>
                                <th>Amount</th>
                                <th>Status</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="app-assets/vendors/js/tables/datatable/datatables.min.js"></script>
<script src="app-assets/vendors/js/tables/datatable/dataTables.bootstrap4.min.js"></script>
<script src="app-assets/vendors/js/tables/datatable/dataTables.buttons.min.js"></script>
<script src="app-assets/js/scripts/datatables/datatable.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": "/branches_invoices",
            "type": "GET",
            "dataType": "json",
            "data": function ( d ) {
                return $.extend( {}, d, {

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



        }
    });

    $(".card-body").on("click", ".contact_info", function(e) {
            e.preventDefault();
            $("#empty_modal").find(".modal-title").html("");
            $("#empty_modal").find(".modal-div").html("");
            $("#empty_modal").find(".modal-footer").html("");
            let main_school_id = $(this).data("id");
            $(".load_info").fadeIn();
            $.ajax({
                url: "/view_contact_info",
                type: "GET",
                data: {
                    main_school_id: main_school_id
                },
                dataType: "json"
            }).done(function(response) {
                if (response.status === "failed") {} else if (response.status === "success") {
                    $(".load_info").hide(1);
                    $("#empty_modal").find(".modal-title").html(response.title);
                    $("#empty_modal").find(".modal-div").html(response.body);
                    $("#empty_modal").find(".modal-footer").html(response.footer);

                }
            });
        });
</script>
@endsection