@extends('layouts.app')

@section('title')
    Student Receipt
@endsection

@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">
                    {{ session('error') }}<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">
                    {{ session('success') }}<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-receipt') }}" enctype="multipart/form-data"
                        id="form_sample_1" class="form-horizontal">
                        {{-- <div style="display: flex;justify-content: center;" id="" class="row">                                    
                        
                                                                                                        
                        </div> --}}
                        <div class="row">
                            <input type="hidden" name="student_no" value="{{ $student->student_no }}">
                            <input type="hidden" name="student_progress" value="{{ $student_progress }}">
                            <div style="" class="col-md-4 col-sm-7">
                                <label>Amount</label>
                                <input step="0.0001" type="number" min="0" class="form-select select2 form-control"
                                    name="amount" required><br>
                            </div>
                            <div style="" class="col-md-4 col-sm-7">
                                <label>Cash Book</label>
                                <select class="form-select select2 form-control" name="cash_book_id" required>
                                    @foreach ($cash_books as $cash_book)
                                        <option value="{{ $cash_book->id }}">{{ $cash_book->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div style="" class="col-md-4 col-sm-7">
                                <label>Description</label>
                                {{-- <span style="color:rgb(14, 14, 153)"> (optional)<span> --}}
                                <input type="text" class="form-select select2 form-control" name="receipt_des"><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">Add</button>
                                    <span onclick="clsFee()" class="btn btn-grey m-r-20">CANCEL</span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            @if (count($cash_books) == 0)
                <div class="alert alert-warning alert-dismissible show" role="alert">
                    Please add cashbooks here first : <strong>Institution Setup > Cashbooks</strong>
                </div>
            @else
                <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;">Student Information</header>
                            </div>
                            <div class="card-body" id="bar-parent2"><br>
                                <div style="display: flex;justify-content: left;" id="personalDet" class="row">
                                    {{-- column1 --}}
                                    <div style="margin-right:150px; width:auto" class="col-md-3 col-sm-12">
                                        <ul class="list-group list-group-unbordered">
                                            <li class="list-group-item">
                                                <span style="margin-right:50px;">Student Name:</span> <b><span
                                                        class="pull-right"> {{ $student->first_name }}
                                                        {{ $student->last_name }}</span></b>
                                            </li>
                                            <li class="list-group-item">
                                                <span style="margin-right:50px;">Student Number:</span> <b><span
                                                        class="pull-right">{{ $student->student_no }}</span></b>
                                            </li>
                                            <li class="list-group-item">
                                                <span style="margin-right:50px;"> NRC:</span> <b><span
                                                        class="pull-right">{{ $student->nrc_passport }}</span></b>
                                            </li>
                                            <li class="list-group-item">
                                                <span style="margin-right:50px;"> Phone:</span> <b><span
                                                        class="pull-right">{{ $student->phone }}</span></b>
                                            </li>
                                            <li class="list-group-item">
                                                <span style="margin-right:50px;"> Email:</span> <b><span
                                                        class="pull-right">{{ $student->email }}</span></b>
                                            </li>

                                        </ul>
                                    </div>

                                    {{-- column1 --}}
                                    <div style="margin-right:150px; width:auto" class="col-md-3 col-sm-12">
                                        <ul class="list-group list-group-unbordered">
                                            <li class="list-group-item">
                                                <span style="margin-right:50px;">Program of Study:</span> <b><span
                                                        class="pull-right">{{ $student->program_name }}</span></b>
                                            </li>
                                            <li class="list-group-item">
                                                <span style="margin-right:50px;">Program Code:</span> <b><span
                                                        class="pull-right">{{ $student->program_code }}</span></b>
                                            </li>
                                            <li class="list-group-item">
                                                <span style="margin-right:50px;">Intake Year:</span> <b><span
                                                        class="pull-right"> {{ ucwords($student->entry_year) }}</span></b>
                                            </li>
                                            <li class="list-group-item">
                                                <span style="margin-right:50px;">Current Year:</span> <b><span
                                                        class="pull-right">
                                                        {{ ucwords($student_current_year) }}</span></b>
                                            </li>
                                            <li class="list-group-item">
                                                <span style="margin-right:50px;">Current Session:</span> <b><span
                                                        class="pull-right">{{ ucwords($student_current_session) }}</span></b>
                                            </li>
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-box">
                            <div class="card-head">
                                <header>Student Receipts</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 ">
                                <button id="fee"
                                    class="btn btn-success btn-rounded waves-effect waves-light m-t-20">Add
                                    Receipt</button>
                                <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"> Receipt No </th>
                                                <th class="center"> Cash Book </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 ($receipts as $receipt)
                                                <tr class="odd gradeX">
                                                    <td>{{ date('d-m-Y', strtotime($receipt->created_at)) }}</td>
                                                    <td class="center">{{ $receipt->receipt_no }}</td>
                                                    <td class="center">{{ $receipt->cash_book_name }}</td>
                                                    <td class="center">{{ $receipt->receipt_year }}</td>
                                                    <td class="center">{{ $receipt->academic_session_name }}</td>
                                                    <td class="center">{{ $receipt->receipt_amount }}</td>
                                                    <td class="center">
                                                        <a href="{{ route('view-student-receipt', $receipt->id) }}"
                                                            title="Details" data-bs-toggle="tooltip">
                                                            <i class="fa fa-list"></i>
                                                        </a>
                                                    </td>

                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

        </div>
    </div>
    <!-- end page content -->
    <script>
        // Get the modal
        var modal = document.getElementById("myModal");

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

        function clsFee() {
            modal.style.display = "none";
        }
    </script>
@endsection