@extends('layouts.app')

@section('content')
    <section id="dom">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title-wrap bar-teal">
                            <h4 class="card-title">Salaries list</h4>
                            <p class="card-text">Here you can see the list of Payslips.</p>
                        </div>

                    </div>
                    <input type="hidden" id="sizeOf" value="{{ sizeof($data) }}">
                    <div class="card-body collapse show">
                        <div class="card-block card-dashboard table-responsive">
                            <table class="table table-striped table-bordered" id="dTable">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Month</th>
                                        <th>Deductions</th>
                                        <th>Net Salary</th>
                                        <th>Paid Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($data as $datas)
                                        <tr>
                                            <td>{{ $datas->user->name }}</td>
                                            <td>{{ Carbon\Carbon::parse($datas->date)->format('M-Y') }}</td>
                                            <td>{{ $datas->deduction }}</td>
                                            <td>{{ $datas->total_salary }}</td>
                                            <td><span
                                                    class="badge {{ $datas->is_paid == 1 ? 'bg-success' : 'bg-danger' }} white">{{ $datas->is_paid == 1 ? 'Paid' : 'Not Paid' }}</span>
                                            </td>
                                            <td>
                                                @if ($datas->is_paid == 1)
                                                    {{-- <a href="javascript:;" class="btn btn-primary">Sent</a> --}}
                                                    <a href="{{route('salary_slip.generate',$datas->id)}}"><i class="fa fa-file-pdf-o"></i></a>
                                                @else
                                                    <a href="javascript:;" data-id="{{ $datas->id }}"
                                                        data-amount="{{ $datas->total_salary }}"
                                                        data-user="{{ $datas->user->emp_id }}"
                                                        data-name="{{ $datas->user->name }}"
                                                        data-month="{{ $datas->month }}" data-toggle="modal"
                                                        data-keyboard="false" data-target="#paySlipModal"
                                                        class="btn btn-success payslip">Payslip</a>
                                                @endif
                                            </td>
                                        </tr>

                                    @empty
                                        <tr>
                                            <td colspan="6">No record Found</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade text-left" id="paySlipModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header gradient-green-tea">
                    <h3 class="modal-title text-white" id="myModalLabel3">Transfer Payment</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form" id="paySlipForm">
                        <div class="row">
                            <input type="hidden" name="payslip_id" id="payslip_id">
                            <input type="hidden" name="emp_id" id="emp_id">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="date">Date</label>
                                    <input type="date" id="date" class="form-control" name="date">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="employee">Employee</label>
                                    <input type="text" id="employee" class="form-control" name="employee" readonly>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="pmt_from">Payment From</label>
                                    <select name="pmt_from" id="pmt_from" class="form-control">
                                        <option value="" selected disabled>Select Account</option>
                                        @foreach ($accounts as $acc)
                                            <option value="{{ $acc->id }}">
                                                {{ $acc->account_name }}-{{ $acc->banks->bank_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="memo">Memo</label>
                                    <input type="text" id="memo" class="form-control" name="memo">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="amount">Gross Salary</label>
                                    <input type="text" id="salary" disabled class="form-control" name="salary">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="amount">Arrear</label>
                                    <input type="text" id="arrear" disabled class="form-control" name="arrear">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="amount">Net Amount</label>
                                    <input type="text" id="amount" disabled class="form-control" name="amount">
                                </div>
                            </div>
                        </div>
                        <div class="form-actions center pt-2">
                            <a href="javascript:;" data-dismiss="modal">
                                <button type="button" class="btn btn-danger mr-1">
                                    <i class="icon-trash"></i> Cancel
                                </button>
                            </a>
                            <button type="button" id="saveBtn" class="btn btn-raised btn-success">
                                <i class="icon-note"></i> Send
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('afterScript')
    <script>
        $(document).ready(function() {
            if ($('#sizeOf').val() > 0) {
                $('#dTable').DataTable();
            }
            $('#pmt_from').select2();
            $(document).on('click', '.payslip', function() {
                var id = $(this).attr('data-id');
                var user = $(this).attr('data-user');
                var name = $(this).attr('data-name');
                var amount = $(this).attr('data-amount');
                var month = $(this).attr('data-month');
                // var arrear=0;
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: '{{ route("fetch_arrear") }}',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        month: month,
                        id:id
                    },
                    type: "POST",
                    success: function(data) {
                        var data = JSON.parse(data);
                        if(data.length > 0){
                            $('#arrear').val(data[0].amount);
                            arrear=data[0].amount;
                        }
                        else{
                            $('#arrear').val('0');
                        }
                        var total_salary=arrear+parseInt(amount);
                        $('#employee').val(name);
                        $('#payslip_id').val(id);
                        $('#emp_id').val(user);
                        $('#salary').val(amount);
                        $('#amount').val(total_salary);
                    }
                });
            })

            $(document).on('click', "#saveBtn", function(e) {
                e.preventDefault();

                var form_data = new FormData($("#paySlipForm")[0]);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "{{ route('transfer_salary.store') }}",
                    type: "POST",
                    data: form_data,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function(res) {
                        swal("Inserted!", "Data has been Added Successfully!", "success");
                        setTimeout(function() {
                            location.reload();
                        }, 1000);
                        // $('#paySlipForm')[0].reset();
                    },
                    error: function(err) {
                        swal('Not Valid', err.responseJSON.message, 'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);

                    }
                });
            });
        });
    </script>
@endsection