@extends('dashboard.base')

@section('content')
    <div class="container-fluid">
        <div class="animated fadeIn">
            <div class="row justify-content-md-center">
                <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                    @include('dashboard.shared.alert')
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="m-0">Detail Penerimaan</h5>
                            <a href="{{route('penerimaan.cetak', $slip->id)}}" target="_blank" class="btn btn-success"><span class="cil-print"></span> Cetak</a>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12">
                                    <div class="table-responsive">
                                        <table class="table table-borderless table-sm">
                                            <tr>
                                                <th width="26%">Jenis</th>
                                                <td>{{config('constants.salary_types.' . $slip->type)}}</td>
                                            </tr>
                                            <tr>
                                                <th>Tunjangan Kinerja</th>
                                                <td>{{config('constants.bulans.' . $slip->month)}} - {{$slip->year}}</td>
                                            </tr>
                                            <tr>
                                                <th>Nama Pegawai</th>
                                                <td>{{$slip->pegawai->name}}</td>
                                            </tr>
                                            <tr>
                                                <th>No. Pegawai /  NIP</th>
                                                <td>{{$slip->pegawai->no_pegawai}}</td>
                                            </tr>
                                            <tr>
                                                <th>Jabatan</th>
                                                <td>{{$slip->riwayat->jabatan_name()}}</td>
                                            </tr>
                                            <tr>
                                                <th>Pangkat / Golongan Ruang</th>
                                                <td>{{$slip->riwayat->pangkat_name()}}</td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-xs-12 col-sm-12 col-md-6 offset-md-3">
                                    <div class="table-responsive">
                                        <table class="table table-borderless table-sm">
                                            <tr>
                                                <th colspan="2">Penerimaan</th>
                                            </tr>
                                            <tr>
                                                <td class="pl-5">{{ config('constants.salary_types.'.$slip->type) }}</td>
                                                <td width="1%">Rp</td>
                                                <td class="text-right">{{ number_format($slip['riwayat'][config('constants.jenis_riwayat.' . $slip->type)],0,',','.') }}</td>
                                            </tr>
                                            @foreach ($jenisPenambahans as $jenis) 
                                                @if (!empty($slip->penambahans[$jenis->id]) && $slip->penambahans[$jenis->id]->amount != 0) 
                                                <tr>
                                                    <td class="pl-5">{{ $jenis->name }}</td>
                                                    <td width="1%">Rp</td>
                                                    <td class="text-right">
                                                        {{ $slip->penambahans->contains('penambahan_type_id', $jenis->id) ? 
                                                            number_format($slip->penambahans[$jenis->id]->amount,0,',','.') : 
                                                            '0' }}
                                                    </td>
                                                </tr>
                                                @endif   
                                            @endforeach
                                            <tr>
                                                <th class="pl-5">Total Penerimaan</th>
                                                <th width="1%">Rp</th>
                                                <th class="text-right">{{ number_format(($slip['riwayat'][config('constants.jenis_riwayat.' . $slip->type)] + $slip->penambahans->sum('amount')),0,',','.') }}</th>
                                            </tr>
                                            <tr>
                                                <th colspan="2">Pengurangan</th>
                                            </tr>
                                            @foreach ($jenisPotongans as $jenis) 
                                                @if (!empty($slip->potongans[$jenis->id]) && $slip->potongans[$jenis->id]->amount != 0) 
                                                <tr>
                                                    <td class="pl-5">{{ $jenis->name }}</td>
                                                    <td width="1%">Rp</td>
                                                    <td class="text-right">
                                                        {{ $slip->potongans->contains('potongan_type_id', $jenis->id) ? 
                                                            number_format($slip->potongans[$jenis->id]->amount,0,',','.') : 
                                                            '0' }}
                                                    </td>
                                                </tr>
                                                @endif   
                                            @endforeach
                                            <tr>
                                                <th class="pl-5">Total Pengurangan</th>
                                                <th width="1%">Rp</th>
                                                <th class="text-right">{{ number_format($slip->potongans->sum('amount'),0,',','.') }}</th>
                                            </tr>
                                            <tr>
                                                <th>TOTAL DITERIMA</th>
                                                <th width="1%">Rp</th>
                                                <th class="text-right">{{ number_format($slip['riwayat'][config('constants.jenis_riwayat.' . $slip->type)] + $slip->penambahans->sum('amount') - $slip->potongans->sum('amount'),0,',','.') }}</th>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer d-flex justify-content-end">
                            @csrf
                            <button id="btn-setuju" class="btn btn-primary mr-2"><span class="cil-check-alt mr-1"></span>Setuju</button>
                            <button class="btn btn-outline-dark" data-toggle="modal" data-target="#modal-keberatan">
                                <span class="cil-x mr-1"></span>Keberatan
                            </button>
                            
                            <!-- Modal -->
                            <div class="modal fade" id="modal-keberatan" tabindex="-1" role="dialog" aria-labelledby="modal-keberatan" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Form Keberatan</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body row">
                                        <div class="col">
                                            <form action="{{ route('penerimaan.keberatan', $id) }}" method="POST">
                                                @csrf
    
                                                <div class="form-group">
                                                    <label for="remark">Alasan</label>
                                                    <textarea name="remark" cols="30" rows="10" class="form-control" required></textarea>
                                                </div>
                                                <button type="submit" class="btn btn-primary float-right">Kirim</button>
                                            </form>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('javascript')
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script>
        var csrf = $("input[name=_token]").val();
        var id = {!! json_encode($id) !!};
        var pegawaiId = {!! json_encode($slip->pegawai->id) !!};
        var profileLink = document.createElement("a");
        var link = document.createTextNode("Buka Halaman Profil"); 
        profileLink.appendChild(link);
        profileLink.href= "{{ route('profil.show') }}";
        profileLink.className= "btn btn-primary float-right mb-4";

        $(document).ready(function() {
            
            $("#btn-setuju").on("click", function(){
                $(this).html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').prop("disabled", true);
                $.ajax({
                    url: "{{ route('penerimaan.agree.check') }}", 
                    type: "GET",
                    data: {
                        pegawai_id: pegawaiId,
                    },
                    success: function(response) {
                        swal({
                            title: "Anda yakin untuk menyetujui penerimaan ini?",
                            icon: "warning",
                            buttons: ["Batal", "Setuju"],
                            closeModal: false
                        })
                        .then((agree) => {
                            if (agree) {
                                setuju();
                            } else {
                                swal("Jika Anda tidak menyetujuinya, Anda bisa mengajukan keberatan.");
                                $("#btn-setuju").html('<span class="cil-check-alt mr-1"></span>Setuju').prop("disabled", false);
                            }
                        });
                    },
                    error: function(error) {
                        swal({
                            text: error.responseJSON.message,
                            icon: "error",
                            content: profileLink,
                            button: false
                        });
                        $("#btn-setuju").html('<span class="cil-check-alt mr-1"></span>Setuju').prop("disabled", false);
                    }
                });
            });
        });

        function setuju() {
            $.ajax({
                url: "{{ route('penerimaan.agree') }}",
                type: "POST",
                data: {
                    _token: csrf,
                    id: id
                },
                success: function(response) {
                    swal(response.message, {
                        icon: "success",
                    });
                    $("#btn-setuju").html('<span class="cil-check-alt mr-1"></span>Setuju').prop("disabled", false);
                },
                error: function(error) {
                    swal(error.responseJSON.message, {
                        icon: "error",
                    });
                    $("#btn-setuju").html('<span class="cil-check-alt mr-1"></span>Setuju').prop("disabled", false);
                }
            })
        }
    </script>
@endsection