@extends('layouts.master')

@section('title', __("tr.My Credit Transactions"))
@section('subtitle', __("tr.My Credit Transactions") )
@section('titleicon', "icon-file-text")

@section('content')
<div class="main-content">

    <br>
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="row">
        <div class="col-lg-8 col-xs-12 col-md-12 col-sm-12">
            <div class="card">
                <div class="card-header">@lang('tr.General Information')</div>
                <div class="card-body">
                    <table class="table table-striped m-0">
		                <tr><td width="150px"><b>@lang('tr.English Name'):</b></td><td>{{$student->user->en_name}}</td></tr>                
		                <tr><td width="150px"><b>@lang('tr.Code'):</b></td><td>{{$student->user->code}}</td></tr>                
		                <tr><td width="150px"><b>@lang('tr.Plan'):</b></td><td>{{$student->plan->en_minor}}</td></tr>                
		                <tr><td width="150px"><b>@lang('tr.Credit'):</b></td><td>{{$student->financialCredit()}}</td></tr>                
 		                
		            </table>
				</div>
			</div>
        </div>
    </div>

    <div class="card">
        <!--
        <div class="card-header">
            <button type="button" class="btn btn-primary float-right float-right " data-toggle="modal" data-target="#PaymentSettings">
                <i class="icon-plus"></i> @lang('tr.Charge My credit')
            </button>  
        </div>
        -->

        <!-- Modal -->
        <div class="modal fade" id="PaymentSettings" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">
                            @lang('tr.Charge My credit')
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form method="post" action="{{route('charge_student_credit')}}" >
                            @csrf
                            <div class="form-group">
                                <input required="" type="number" min="1" class="form-control" name="amount" placeholder="@lang('tr.Amount')">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal"> @lang('tr.Cancel')</button>
                                <button type="submit" class="btn btn-primary"> @lang('tr.Proceed')</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div id="progress_bar" style="background-color: green; width: 0%; height: 2px;"></div>
        </div>

        <div class="card-body">                   
            <table id="data_table" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>@lang('tr.Transaction Type')</th>
                        <th>@lang('tr.Amount')</th>
                        <th>@lang('tr.Notes')</th>
                        <th>@lang('tr.Date')</th>
                    </tr>
                </thead>                                
            </table>
        </div>
    </div>

</div>  

<script type="text/javascript">

$(document).ready(function() {

    var typesList = {
        @foreach('App\StudentCredit'::typesList() as $key=>$value)
        '{{$key}}': '{{$value}}',
        @endforeach
    };

    var table = $('#data_table').DataTable({
        processing: true,
        serverSide: true,
        scrollX: true,
        stateSave: false,
        rowId: 'id',
        "ajax": {
            "url": '{{ route("student_credits") }}',
            "dataSrc": "data.data"
        },

        "columns": [           
            { "data": "id", "name": "id"},
            { "data": "type", "name": "type", 
                fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                    html = typesList[oData.type];
                    $(nTd).html(html); 
                }
            },
            { "data": "amount", "name": "amount"},
            { "data": "notes", "name": "notes"},
            { "data": "created_at", "name": "created_at"},            
        ]
    });

    $(".dataTables_filter").hide();

});
</script>

@endsection