@extends('layouts.web')
@section('css')
<link href="{{ asset('css/bootstrap-timepicker.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/bootstrap-datepicker.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/icheck-bootstrap.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/sweetalert2.min.css') }}" rel="stylesheet">
@endsection

@section('content')
    <div class="container-fluid pt-3">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title">ข้อมูลผู้สอน</h3>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-3 col-md-2">
                                <p class="showTitle">ชื่อ</p>
                            </div>
                            <div class="col-sm-9 col-md-10">
                                <p><i class="fas fa-angle-right mr-3"></i> {{ $teacher->title.$teacher->firstname ." ". $teacher->lastname  }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 col-md-2">
                                <p class="showTitle">ชื่อเล่น</p>
                            </div>
                            <div class="col-sm-9 col-md-10">
                                <p ><i class="fas fa-angle-right mr-3"></i> {{ $teacher->nickname }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 col-md-2">
                                <p class="showTitle">เพศ</p>
                            </div>
                            <div class="col-sm-9 col-md-10">
                                <p ><i class="fas fa-angle-right mr-3"></i> {{ $teacher->gender }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 col-md-2">
                                <p class="showTitle">เลขที่บัตรประาชาชน</p>
                            </div>
                            <div class="ol-sm-9 col-md-10">
                                <p><i class="fas fa-angle-right mr-3"></i> {{ $teacher->idcard }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 col-md-2">
                                <p class="showTitle">วันเกิด</p>
                            </div>
                            <div class="col-sm-9 col-md-10">
                                <p><i class="fas fa-angle-right mr-3"></i> {{ formatDateFromDB($teacher->birthdate) }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 col-md-2">
                                <p class="showTitle">อายุ</p>
                            </div>
                            <div class="col-sm-9 col-md-10">
                                <p><i class="fas fa-angle-right mr-3"></i> {{ calAge($teacher->birthdate) }} ปี</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 col-md-2">
                                <p class="showTitle">ที่อยู่</p>
                            </div>
                            <div class="col-sm-9 col-md-10">
                                <p><i class="fas fa-angle-right mr-3"></i> @if($teacher->address != null) {{ $teacher->address ." ". $teacher->district ." ". $teacher->amphoe ." ". $teacher->province }} @else - @endif</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 col-md-2">
                                <p class="showTitle">หมายเลขโทรศัพท์</p>
                            </div>
                            <div class="col-sm-9 col-md-10">
                                <p><i class="fas fa-angle-right mr-3"></i> {{ $teacher->phone_1 }} @if($teacher->phone_2 != null) {{ " , ".$teacher->phone_2 }} @endif</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3 col-md-2">
                                <p class="showTitle">ประเภทการสอน</p>
                            </div>
                            <div class="col-sm-9 col-md-10">
                                <p><i class="fas fa-angle-right mr-3"></i> {{ getTeacherType($teacher->type) }}</p>
                            </div>
                        </div>
                    </div>  <!-- div card body -->
                </div>
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title">รายได้จากการสอน</h3>
                    </div>
                    <div class="card-body">
                        <div class="row justify-content-between align-text-bottom">
                            <div class="col-3">
                                <form action="{{ route('teacher.show', $teacher->id) }}"
                                    novalidate class="{{ ($errors->any()) ? 'was-validated' : 'needs-validation' }}"
                                    method="get"
                                >
                                {{-- @csrf --}}
                                    <div class="form-group">
                                        <label for="monthYear">เดือน <span class="text-red">*</span></label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control datepiacker" id="monthYear" name="monthYear" placeholder="เลือกเดือน" autocomplete="off" value="{{$month_year}}" required>
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                            </div>
                                            <button type="submit" class="btn btn-outline-success show-outline-btn ml-2" value="add-student">แสดง</button>
                                        </div>
                                        @error('monthYear')
                                        <div class="text-danger">{{  $message }}</div>
                                        @enderror
                                    </div>
                                </form>
                            </div>
                            <div class="col-3">
                                <span class="align-text-bottom" style="float:right; padding-top: 50px;">รายได้รวม : {{ number_format($total) }} บาท</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <table class="table finance-table" id="income-table">
                                    <thead>
                                        <tr>
                                            <th scope="col" width="10%">#</th>
                                            <th scope="col" width="30%">วันที่</th>
                                            <th scope="col" width="20%">ชม. ที่สอน</th>
                                            <th scope="col" width="20%">รายได้ (บาท)</th>
                                            {{-- <th scope="col" width="20%">เบิก</th> --}}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- @for($i=0; $i<count($incomes); $i++)
                                        <tr>
                                            <td class="align-middle">{{ $i + 1 }}.</td>
                                            <td class="align-middle">{{ formatDateFromDB($incomes[$i]['date']) }}</td>
                                            <td class="align-middle">{{ $incomes[$i]['hour'] }}</td>
                                            <td class="align-middle">{{ $incomes[$i]['total'] }}</td>
                                            <td class="align-middle">
                                                @if($incomes[$i]['method'] != "") {{ $incomes[$i]['method'] }}<font size="1"> (วันที่: {{ formatDateFromDB($incomes[$i]['wdate']) }})</font>
                                                @else <a href="#withdrawModal{{$incomes[$i]['date']}}" data-toggle="modal" data-target="#withdrawModal{{$incomes[$i]['date']}}" class="btn btn-sm btn-outline-success show-outline-btn">เบิก</a>
                                                    @include('teacher.modal_withdraw')
                                                @endif
                                            </td>
                                        </tr>
                                        @endfor --}}
                                        {{-- @foreach ($incomes as $indexKey => $income)
                                        <tr>
                                            <td class="align-middle">{{ $indexKey + 1 }}.</td>
                                            <td class="align-middle">{{ formatDateFromDB($income->vdate) }}</td>
                                            <td class="align-middle">{{ ($income->end - $income->start)/10000 }}</td>
                                            <td class="align-middle">{{ $income->total }}</td>
                                            <td class="align-middle">
                                                @if($income->method != "") {{ $income->method }}<font size="1"> (วันที่: {{ formatDateFromDB($income->wdate) }})</font>
                                                @else <a href="#withdrawModal{{$income->vdate}}" data-toggle="modal" data-target="#withdrawModal{{$income->vdate}}" class="btn btn-sm btn-outline-success show-outline-btn">เบิก</a>
                                                    @include('teacher.modal_withdraw')
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach --}}
                                        @foreach ($incomes as $indexKey => $income)
                                        <tr>
                                            <td class="align-middle">{{ $indexKey + 1 }}.</td>
                                            <td class="align-middle">{{ formatDateFromDB($income->vdate) }}</td>
                                            <td class="align-middle">{{ ($income->end - $income->start)/10000 }}</td>
                                            <td class="align-middle">{{ $income->total }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>  <!-- div card body -->
                </div>
                <div class="row mt-3 mb-3">
                    <div class="col-12">
                        <div style="float:left">
                            <a href="{{ route('teacher.index') }}" class="btn btn-outline-secondary"><i class="fas fa-chevron-left"></i> ย้อนกลับ</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footerscript')
<script src="{{ asset('js/sweetalert2.min.js') }}"></script>
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker.th.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-timepicker.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $('.teacher-table').DataTable({
            "lengthChange": false,
            "info": false,
            "pageLength": 30,
            "language": {
                "emptyTable":   "ไม่พบข้อมูล",
                "paginate": {
                    "first":    "หน้าแรก",
                    "last":     "หน้าสุดท้าย",
                    "next":     "ถัดไป",
                    "previous": "ก่อนหน้า"
                },
                "search":       "ค้นหา:",
                "lengthMenu":   "ทั้งหมด _MENU_ รายการ",
                "info":         "ทั้งหมด _TOTAL_ รายการ",
                "infoEmpty":    "ไม่พบรายการ",
            }
        });

        $('#monthYear').datepicker({
            format: 'mm/yyyy',
            autoclose: true,
            language: 'th',
            endDate: '+0m',
            orientation: 'top',
            startView: 'months',
            minViewMode: 'months',
        });

        $('#payDate').datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            language: 'th',
            orientation: 'bottom',
        }).datepicker("setDate", 'now');

        $('#payTime').timepicker({
            showMeridian: false,
            showSeconds: true,
            minuteStep: 1,
            secondStep: 1,
            icons: {
                up: 'fa fa-angle-up',
                down: 'fa fa-angle-down'
            }
        });
    });
</script>
@if (session('feedback'))
<script>
    Swal.fire({
                text: '{{ session('feedback') }}',
                icon: 'success',
                confirmButtonText: 'ตกลง',
                confirmButtonColor: '#62966C'
    })
</script>
@endif
@endsection

