@extends('layout.master')
@section('page-title', "SCHOOL INVOICES")

@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/vendors/css/forms/select/select2.min.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="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.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">
            <form class="create_invoice_form">
                @csrf
                <div class="modal fade text-left" id="create_invoice" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" style="display: none;" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title" id="myModalLabel17">CREATE INVOICE</h4>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <i class="bx bx-x"></i>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-body">
                                    <div class="row">
                                        @if(!empty($school->payment_plan))
                                        <div class="alert bg-rgba-primary  mb-2" role="alert">
                                            <div class="d-flex align-items-center">
                                              <i class="bx bx-star"></i>
                                              <span>
                                                {{$school->payment_plan}}
                                              </span>
                                            </div>
                                        </div>
                                        @endif
                                      <div class="col-12">
                                        <div class="form-group">
                                          <label for="due_date">Due Date</label>
                                          <input type="text" id="due_date" class="form-control datepicker" name="due_date" type="date" placeholder="Due Date">
                                        </div>
                                      </div>
                                      <div class="col-12">
                                        <div class="form-group">
                                          <label for="next_invoice">Next Invoice</label>
                                          <input type="text" id="next_invoice" class="form-control datepicker" name="next_invoice" type="date" placeholder="Due Date">
                                        </div>
                                      </div>
                                      <div class="col-12">
                                        <div class="form-group">
                                          <label for="description">Description</label>
                                          <input type="text" id="description" class="form-control" name="desc" placeholder="Description">
                                        </div>
                                      </div>
                                      <div class="col-12">
                                        <div class="form-group">
                                          <label for="quantity">Quantity</label>
                                          <input type="number" id="quantity" class="form-control" name="quantity" placeholder="Quantity">
                                        </div>
                                      </div>
                                      <div class="col-12">
                                        <div class="form-group">
                                          <label for="rate">Rate</label>
                                          <input type="number" id="rate" class="form-control" name="rate" placeholder="Rate">
                                        </div>
                                      </div>
                                      
                                      <div class="col-12">
                                        <div class="form-group">
                                          <label for="gross_amount">Gross Amount</label>
                                          <input type="number" id="gross_amount" class="form-control" name="gross_amount" placeholder="Gross Amount">
                                        </div>
                                      </div>
                                      <div class="col-12">
                                        <div class="form-group">
                                          <label for="discount">Discount</label>
                                          <input type="number" id="discount" class="form-control" name="discount"  placeholder="Discount">
                                        </div>
                                      </div>
                                      <div class="col-12">
                                        <div class="form-group">
                                          <label for="net_amount">Net Amount</label>
                                          <input type="number" id="net_amount" class="form-control" name="net_amount" placeholder="Net Amount">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                            </div>
                            <div class="modal-footer">
                                <a href="#" data-dismiss="modal" class="btn btn-secondary waves-effect modal-action modal-close">Close</a>
                                <button type="submit" class="btn btn-primary waves-effect modal-action modal-close">CREATE INVOICE</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div>
                </div>
            </form>

			<div class="card-content">
                <div class="card-header">
				<h4 class="card-title" style="float: left; margin-top:10px;">{{$school->main_school_name}} INVOICES</h4>
				<button type="button" class="btn btn-success btn-sm shadow mr-1 mb-0" style="float:right;" data-toggle="modal" data-target="#create_invoice"><i class="bx bxs-school" style="margin-right:10px;margin-bottom:5px"></i>CREATE INVOICE</button>
                <a href="{{url()->previous()}}" class="btn btn-light glow mr-1 mb-1 float-right"><i class="bx bx-left-arrow-circle"></i>Back</a>
				<div style="clear: both"></div>
				<hr/>
                </div>
			  <div class="card-body">
			  <div class="table-responsive">
						<table class="table invoice_table table-striped table-bordered table-hover">
							<thead class="thead" style="text-align:center;">
								<tr>
                                    <th>Invoice ID</th>
									<th>Description</th>
									<th>Invoice Due Date</th>
									<th>Next Invoice</th>
									<th>Action</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="{{asset('app-assets/vendors/js/forms/validation/jquery.validate.min.js')}}"></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/vendors/js/forms/select/select2.full.min.js')}}"></script>
    <script src="{{asset('app-assets/js/scripts/forms/select/form-select2.min.js')}}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="{{asset('app-assets/plugins/x-editable/dist/bootstrap4-editable/js/bootstrap-editable.min.js')}}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
@endsection

@section('footer-scripts')
<script>
    $(document).ready(function () {
        function close_modal(){
            $(".modal").modal('hide');
            $('body').removeClass('modal-open');
            $('.modal-backdrop').remove();
        }

        let receipt_invoice_id;

        let invoice_table = $(".invoice_table").DataTable({
            processing: true,
            order: [],
            ajax: {
                url: "/view_invoice",
                type: "GET",
                data: function (d) {
                    return $.extend({}, d, {
                        school_id: @php echo $id; @endphp
                    });
                },
                "dataSrc": function (response){
                    var data = [];
                    for ( var i=0; i < response.returned_data.length; i++ ) {
                        data.push(response.returned_data[i]);
                    }
                    return data;
                }
            },
            deferRender: true,
            createdRow: function (row, data, index) {
                // $("td", row).css("text-align", "center");
            },
            fnDrawCallback: function () {

            },
        });

        $(".datepicker").daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            autoApply: true,
            locale: {
                format: "YYYY-MM-DD"
            }
        });



    $(".create_invoice_form").validate({
    rules: {
        quantity: "required",

    },
    messages: {},

    submitHandler: function (form) {
        close_modal();
        swal({
                title: "Are you sure?",
                text: "Invoice will be created",
                type: "warning",
                showCancelButton: true,
                closeOnConfirm: false,
                showLoaderOnConfirm: true
            },
            function() {
                $(".create_invoice_form").ajaxSubmit({
                    url: "/create_invoice",
                    data: {
                        school_id: @php echo $id; @endphp
                    },
                    type: "POST",
                    // dataSrc: "",
                    dataType: "json",
                    success: function (data) {
                        if (data.status == "failed") {
                            //  toastr.error(data.message);
                            swal("Cancelled!", data.message, "error");
                            // active_members_table.ajax.reload();
                        } else if (data.status == "success") {
                            swal("Created!", "Invoice Created Successfully", "success");
                            invoice_table.ajax.reload();
                            $(".create_invoice_form")[0].reset();
                        }
                    },
                    error: function (data) {
                    },
                });
            });
    },
});

        $(".card-body").on("click", ".edit_invoice", function(e) {
            e.preventDefault();
            $("#empty_modal").find(".modal-title").html("");
            $("#empty_modal").find(".modal-div").html("");
            $("#empty_modal").find(".modal-footer").html("");
            let invoice_id = $(this).data("id");
            $(".load_info").fadeIn();
            $.ajax({
                url: "/view_edit_invoice",
                type: "GET",
                data: {
                    invoice_id: invoice_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);

                }
            });
        });

        $(".empty_modal_form").on("click", ".submit_edit_invoice", function (e){
            e.preventDefault();

            let form = $(this).parents("form");
            let invoice_id =  $(this).data("id");
            let error = false;

            if(!error){
                close_modal();
                swal({
                        title: "Are you sure?",
                        text: "Invoice will be edited",
                        type: "warning",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true
                    },
                    function() {
                        form.ajaxSubmit({
                            url: "/edit_invoice",
                            data: {
                                invoice_id: invoice_id
                            },
                            type: "PATCH",
                            // dataSrc: "",
                            dataType: "json",
                            success: function (data) {
                                console.log(data);
                                if (data.status == "failed") {
                                    //  toastr.error(data.message);
                                    swal("Cancelled!", data.message, "error");
                                    invoice_table.ajax.reload();
                                } else if (data.status == "success") {
                                    // toastr.success("Edit Successfully");
                                    swal("Edited!", "Edit Successful", "success");
                                    invoice_table.ajax.reload();
                                }
                            },
                            error: function (data) {
                            },
                        });
                    });

            }
        });

        $(".card-body").on("click", ".delete_invoice", function () {
            let invoice_id = $(this).attr("data-id");
            let $_this = $(this);
            let tr =  $_this.parents('tr');
            let row = invoice_table.row(tr);
            swal({
                    title: "Are you sure?",
                    text: "Invoice will be deleted",
                    type: "warning",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true
                },
                function() {
                    $.ajax({
                        url: "/delete_invoice",
                        type: "DELETE",
                        dataType: "json",
                        data: {
                            invoice_id: invoice_id
                        },
                        success: function (response) {
                            if(response.status === "success"){
                                swal("Deleted!", 'Invoice deleted.', "success");
                                // members_table.ajax.reload();
                            }
                            row.remove().draw(false);
                        },
                    });
                });
        });

        //JQUERY FOR RECEIPTS
        $(".card-body").on("click", ".show_receipt", function(e) {
            e.preventDefault();
            $("#empty_modal").find(".modal-title").html("");
            $("#empty_modal").find(".modal-div").html("");
            receipt_invoice_id = $(this).data("id");
            $(".load_info").fadeIn();
            $.ajax({
                url: "/show_receipt",
                type: "GET",
                data: {
                    invoice_id: receipt_invoice_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);

                }
            });
        });



    });

</script>

@endsection