@extends('layouts.web')

@section('css')
<link href="{{ asset('css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/bootstrap-timepicker.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/sweetalert2.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/bootstrap-select.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
<div class="container-fluid pt-3">
    <div class="row">
        <div class="col-12">
            <a href="#incomeModal" data-toggle="modal" data-target="#incomeModal" class="btn btn-success rounded"><i class="fas fa-plus-circle"></i> เพิ่มรายรับ</a>
            <!-- Modal -->
            <div class="modal fade" id="incomeModal" tabindex="-1" aria-labelledby="incomeModalLabel" aria-hidden="true" data-backdrop="static">
                <div class="modal-dialog modal-dialog-centered" >
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title-card" id="incomeModalLabel">เพิ่มรายรับ</h5>
                        </div>
                        <form action="{{ route('income.income') }}"
                            id="incomeFrm"
                            novalidate class="{{ ($errors->any()) ? 'was-validated' : 'needs-validation' }}"
                            method="post">
                            @csrf
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="branch">สาขาที่ทำรายการ <span class="text-red">*</span></label>
                                        <select id="branch" name="branch" class="selectpicker show-menu-arrow form-control" title="--เลือก--" required>
                                            @foreach ($branchs as $indexKey => $branch)
                                            <option value="{{ $branch->id }}" @if(auth()->user()->branch_id == $branch->id) selected @endif>{{ $branch->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('branch')
                                        <div class="text-danger">{{  $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="title" class="modal-label-card float-left mb-2">รายการ <span class="text-red">*</span></label>
                                        <input type="text" class="form-control" id="title" name="title" placeholder="รายการรายรับ" required>
                                        @error('amount')
                                    <div class="text-danger">{{  $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="method">รูปแบบการจ่ายเงิน <span class="text-red">*</span></label>
                                        <select id="method" name="method" class="selectpicker show-menu-arrow form-control" title="--เลือก--" required>
                                            <option value="เงินสด">เงินสด</option>
                                            <option value="โอน">โอน</option>
                                            <option value="บัตรเครดิต">บัตรเครดิต</option>
                                        </select>
                                        @error('method')
                                        <div class="text-danger">{{  $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="amount" class="modal-label-card float-left mb-2">จำนวนเงิน <span class="text-red">*</span></label>
                                        <input type="text" class="form-control" id="amount" name="amount" placeholder="จำนวนเงิน (บาท)" required>
                                        @error('amount')
                                    <div class="text-danger">{{  $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="payDate">วันที่เบิก <span class="text-red">*</span></label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" id="payDate" name="payDate" placeholder="วันที่เบิก" autocomplete="off"  required>
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                                            </div>
                                        </div>
                                        @error('payDate')
                                        <div class="text-danger">{{  $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="payTime" class="modal-label-card float-left mb-2">เวลาที่เบิก <span class="text-red">*</span></label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" id="payTime" name="payTime" placeholder="เวลาที่เบิก" autocomplete="off" required>
                                            <div class="input-group-append">
                                                <span class="input-group-text"><i class="far fa-clock"></i></span>
                                            </div>
                                        </div>
                                        @error('payTime')
                                        <div class="text-danger">{{  $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer mt-2">
                            <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">ปิด</button>
                            <button type="submit" id="payBtn" class="btn btn-success">ตกลง</button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- End modal -->
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-4">
            <form action="{{ route('income.submit') }}"
            novalidate class="{{ ($errors->any()) ? 'was-validated' : 'needs-validation' }}"
            method="post"
            >
            @csrf
                <div class="form-group">
                    <label for="date">รายรับ ประจำเดือน <span class="text-red">*</span></label>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control datepiacker" id="date" name="date" placeholder="เดือน/ปี" autocomplete="off" value="{{$date}}" 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="search">แสดง</button>
                    </div>
                    @error('date')
                    <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
            </form>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col">
            <div class="card card-outline card-success">
                <div class="card-body">
                    <table class="table" id="income-table">
                        <thead>
                          <tr>
                            <th scope="col" width="5%">ลำดับ</th>
                            <th scope="col" width="12%">วัน เวลา</th>
                            <th scope="col" width="25%">รายการ</th>
                            <th scope="col" width="8%">จำนวน</th>
                            <th scope="col" width="10%">ช่องทาง</th>
                            <th scope="col" width="20%">ผู้ทำรายการ</th>
                            <th scope="col" width="10%">สาขา</th>
                            <th width="10%"></th>
                          </tr>
                        </thead>
                        <tbody>
                            @foreach ($incomes as $indexKey => $income)
                            <tr class="hand-hover">
                                <td>{{ $indexKey+1 }}</td>
                                <td>{{ $income->date . " ". $income->time }}</td>
                                <td>{{ $income->title }}</td>
                                <td>{{ $income->amount }}</td>
                                <td>{{ $income->method }}</td>
                                <td>{{ $income->username }}</td>
                                <td>{{ $income->name }}</td>
                                <td class="align-middle text-center">
                                    <form id="del-frm{{ $indexKey }}" class="d-inline"
                                        method="POST"
                                        action="{{ route('income.destroy', $income->iid ) }}"
                                        onsubmit="confirmalert(event, {{ $indexKey }}, 'รายรับs')"
                                    >
                                    @csrf
                                    @method('DELETE')
                                        <button type="submit" class="btn del-btn btn-sm ml-2" data-toggle="tooltip" data-placement="top" title="ลบข้อมูล">
                                            <i class="far fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                      </table>
                </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-select.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-timepicker.min.js') }}"></script>
<script src="{{ asset('js/custom.js') }}"></script>
<script src="{{ asset('js/income.js') }}"></script>
@if (session('feedback'))
<script>
    Swal.fire({
                text: '{{ session('feedback') }}',
                icon: 'success',
                confirmButtonText: 'ตกลง',
                confirmButtonColor: '#62966C'
    })
</script>
@endif
@endsection

