@extends('layouts.app')

@section('title')
    Student Invoice
@endsection
{{-- 
@push('custom-css')
    <style>
        .dataTables_info {
            display: none !important;
        }
    </style>
@endpush --}}

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">

                </div>
            </div>

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible show" role="alert">
                    <strong>{{ session('error') }}</strong><a href="#" class="alert-link"></a>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @elseif(session('success'))
                <div class="alert alert-success alert-dismissible show" role="alert">
                    <strong>{{ session('success') }}</strong><a href="#" class="alert-link"></a>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @endif

            <div id="myModal" class="modal">
                <!-- Modal content -->
                <div style="width:60%" class="modal-content">
                    <span class="close">X</span>

                    <form method="post" action="{{ url('add-student-invoice') }}" enctype="multipart/form-data"
                        id="form_sample_1" class="form-horizontal">
                        <div style="display: flex;justify-content: center;" id="" class="row">
                            {{-- column1 --}}
                            {{-- <div style="" class="col-md-3 col-sm-7">
                                <label>Invoice Type</label>                                    
                                <select class="form-select select2 form-control" name="invoice_type_id">                                                                            
                                    @foreach ($invoice_types as $invoice_type)
                                        <option value="{{ $invoice_type->id }}">{{ $invoice_type->invoice_type_name }}</option>
                                    @endforeach
                                </select><br>
                            </div> --}}

                            <div style="" class="col-md-3 col-sm-7">
                                <label>Student No</label>
                                <input class="form-select select2 form-control" name="student_no"><br>
                            </div>

                            <div style="" class="col-md-3 col-sm-7">
                                <label>Academic Session</label>
                                <select class="form-select select2 form-control" name="session_id">
                                    @foreach ($sessions as $session)
                                        <option value="{{ $session->id }}">{{ $session->academic_session_name }}</option>
                                    @endforeach
                                </select><br>
                            </div>

                            <div style="" class="col-md-3 col-sm-7">
                                <label>Academic Year</label>
                                <select class="form-select select2 form-control" name="year">
                                    @foreach ($years as $year)
                                        <option value="{{ $year }}">{{ $year }}</option>
                                    @endforeach
                                </select><br>
                            </div>

                            <div style="" class="col-md-3 col-sm-7">
                                <label>Invoice Type</label>
                                <select onchange="invoiceType()" id="invoiceId" class="form-select select2 form-control"
                                    name="invoice_type_id">
                                    @foreach ($invoice_types as $invoice_type)
                                        <option value="{{ $invoice_type->id }}">{{ $invoice_type->invoice_type_name }}
                                        </option>
                                    @endforeach
                                </select><br>
                            </div>

                            <div id="fee_type" class="col-md-3 col-sm-7">
                                <label>Fee Type</label>
                                <select class="form-select select2 form-control" name="fee_type_id">
                                    @foreach ($fee_types as $fee_type)
                                        <option value="{{ $fee_type->id }}">{{ $fee_type->fee_name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div id="amount" class="col-md-3 col-sm-7">
                                <label>Amount</label>
                                <input class="form-select select2 form-control" name="invoice_amount"><br>
                            </div>

                        </div>

                        <div style="display:flex; justify-content:center; height:auto" id="personalDet" class="row">
                            <div style="" class="col-md-3 col-sm-6">
                                <div style="display: flex;justify-content: center;" class="col-md-12 col-sm-6">
                                    <button type="submit" class="btn btn-info m-r-20">Generate</button>
                                    <span onclick="clsFee()" class="btn btn-grey m-r-20">CANCEL</span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card card-box">
                        <div class="card-head">
                            <header style="display: flex;justify-content: center;">Query Invoices</header>
                        </div>
                        <div class="card-body" id="bar-parent2"><br>
                            <div style="display: flex;justify-content: center;" id="personalDet" class="row">

                                {{-- column1 --}}
                                <div class="col-md-4 col-sm-8">
                                    <div class="blogThumb">
                                        <div class="white-box">

                                            <form method="post" action="{{ url('get-student-invoice') }}"
                                                enctype="multipart/form-data" id="form_sample_1" class="form-horizontal">
                                                <label>Student No</label>
                                                <input type="text" name="student_no" class="form-control" placeholder=""
                                                    required>
                                                <br>
                                                <button type="submit"
                                                    class="btn btn-success btn-rounded waves-effect waves-light m-t-20">QUERY</button>
                                            </form>
                                        </div>
                                    </div><br>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if (count($invoices) > 0)
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-box">
                            <div class="card-head">
                                <header>Student Invoices</header>
                                <button id="sdntmenu" class="mdl-button mdl-js-button mdl-button--icon pull-right"
                                    data-upgraded=",MaterialButton">
                                    <i class="material-icons">more_vert</i>
                                </button>
                                <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                                    data-mdl-for="sdntmenu">
                                    <li class="mdl-menu__item"><i class="material-icons">assistant_photo</i>Action
                                    </li>
                                    <li class="mdl-menu__item"><i class="material-icons">print</i>Another action
                                    </li>
                                    <li class="mdl-menu__item"><i class="material-icons">favorite</i>Something else
                                        here</li>
                                </ul>
                            </div>
                            <div class="card-body ">

                                <div class="table-scrollable">
                                    <table
                                        class="table table-striped table-bordered table-hover table-checkable order-column valign-middle"
                                        id="example1">
                                        <thead>
                                            <tr>
                                                <th class="center">Date</th>
                                                <th class="center"> Invoice No </th>
                                                <th class="center"> Student </th>
                                                <th class="center"> Year </th>
                                                <th class="center"> Session </th>
                                                <th class="center"> Amount </th>
                                                <th class="center"> Action </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($invoices as $invoice)
                                                <tr class="odd gradeX">
                                                    <td>{{ date('d-m-Y', strtotime($invoice->created_at)) }}</td>
                                                    <td class="center">{{ $invoice->invoice_no }}</td>
                                                    <td class="center">{{ $invoice->student_no }}
                                                    </td>
                                                    <td class="center">{{ $invoice->invoice_year }}</td>
                                                    <td class="center">{{ $invoice->academic_session_name }}</td>
                                                    <td class="center">{{ $invoice->invoice_amount }}</td>
                                                    <td class="center">
                                                        <a href="{{ route('student-inv-details', $invoice->id) }}"
                                                            title="Details" data-bs-toggle="tooltip">
                                                            <i class="fa fa-eye"></i></a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            {{-- <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-head">
                            <header>BASIC TABLE</header>
                            <div class="tools">
                                <a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
                                <a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
                                <a class="t-close btn-color fa fa-times" href="javascript:;"></a>
                            </div>
                        </div>
                        <div class="card-body ">
                            <div class="table-scrollable">
                                <table id="example1" class="display" style="width:100%;">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Position</th>
                                            <th>Office</th>
                                            <th>Age</th>
                                            <th>Start date</th>
                                            <th>Salary</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Tiger Nixon</td>
                                            <td>System Architect</td>
                                            <td>Edinburgh</td>
                                            <td>61</td>
                                            <td>2011/04/25</td>
                                            <td>$320,800</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}
        </div>
    </div>
    <!-- end page content -->
    <script>
        // Get the modal
        var modal = document.getElementById("myModal");
        var fee_type_id = document.getElementById("fee_type");
        var amount = document.getElementById("amount");

        fee_type_id.style.display = "none";
        amount.style.display = "none";

        // When the user clicks the button, open the modal 
        fee.onclick = function() {
            modal.style.display = "block";
        }

        function clsFee() {
            modal.style.display = "none";
        }

        function invoiceType() {
            var id = document.getElementById("invoiceId").value;

            var invoice_type_id = id;

            if (invoice_type_id == 2) {
                fee_type_id.style.display = "block";
                amount.style.display = "block";
            } else {
                fee_type_id.style.display = "none";
                amount.style.display = "none";
            }

        }
    </script>

@endsection