@extends('layout.main')
@section('title', 'Detail Payroll Master')

@section('prev-page')
    <a href="{{ route('dashboard') }}" class="text-default">
        <i class="icon-arrow-left52 position-left"></i><span class="text-semibold">Home</span>
    </a> - <a href="{{ route('admin.payroll.master') }}" class="text-default">
        <span class="text-semibold">Daftar Payroll Master</span>
    </a>
@endsection

@section('content')
    <div class="col-lg-10 col-lg-offset-1">
        <form method="POST" action="{{ route('admin.payroll.master.update.submit') }}" enctype="multipart/form-data" class="form-horizontal">
            @csrf
            <input type="hidden" name="master" id="master" value="{{ $detail->id }}" />
            <div class="panel panel-white">
                <div class="panel-heading">
                    <h6 class="panel-title">Detail Payroll Master</h6>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Nama Pegawai</label>
                        <div class="col-lg-9">
                            <div class="form-control-static">{{ $detail->name }}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Nilai Payroll</label>
                        <div class="col-lg-9 table-responsive">
                            <table id="userTable" class="table table-togglable table-hover table-xxs text-size-small">
                                <thead>
                                    <tr>
                                        <th data-toggle="true">Komponen</th>
                                        <th data-toggle="true">Nilai</th>
                                        <th data-toggle="true">Catatan</th>
                                        <th data-toggle="true">Status</th>
                                        <th data-toggle="true" class="text-right">
                                            <button type="button" id="add_component" class="btn border-green text-green btn-flat btn-xs btn-icon btn-rounded">
                                                <i class=" icon-plus-circle2"></i>
                                            </button>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="items">
                                    @php $total = 0; @endphp
                                    @foreach ($detail->items as $item)
                                        <tr>
                                            <td>
                                                <select name="components[]" class="form-control component_id" data-id="{{ $item->id }}" onchange="checkMe($(this));" required>
                                                    <option value="">-- Pilih Komponen --</option>
                                                    @foreach ($components as $component)
                                                        <option value="{{ $component->id }}" @if ($item->component->id == $component->id) {{ 'selected' }} @endif>
                                                            {{ $component->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="number" name="amounts[]" placeholder="Nilai Komponen" value="{{ $item->amount }}" min="0" class="form-control amount" id="amount-{{ $item->id }}"
                                                    data-status="{{ $item->status->id }}" onchange="recount();" onkeyup="recount();" required />
                                                @if ($item->status->id == 1)
                                                    @php $total += $item->amount; @endphp
                                                @endif
                                            </td>
                                            <td>
                                                <input type="text" name="descriptions[]" placeholder="Catatan" value="{{ $item->description }}" class="form-control description" />
                                            </td>
                                            <td>
                                                <div class="checkbox checkbox-switch">
                                                    <label>
                                                        <input type="checkbox" id="status-{{ $item->id }}" name="status[]" value="{{ $item->component->id }}" data-id="{{ $item->id }}" data-on-color="primary" data-off-color="danger"
                                                            data-on-text="Aktif" data-off-text="Tidak" class="switch" data-size="mini" onchange="doChange($(this));" @if ($item->status->id == 1) {{ 'checked' }} @endif />
                                                    </label>
                                                </div>
                                            </td>
                                            <td class="text-right">
                                                <button type="button" onclick="removeMe($(this));" class="btn border-danger text-danger btn-flat btn-xs btn-icon btn-rounded">
                                                    <i class="icon-cancel-circle2"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>Total</th>
                                        <th class="text-right" id="total-amount">Rp{{ number_format($total, 0, ',', '.') }}</th>
                                        <th>&nbsp;</th>
                                        <th>&nbsp;</th>
                                        <th>&nbsp;</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="col-xs-6">
                        <a href="{{ route('admin.payroll.master') }}" class="btn btn-link"><i class="icon-arrow-left13"></i> Batalkan</a>
                    </div>
                    <div class="col-xs-6 text-right">
                        <button type="submit" class="btn bg-teal-400 btn-labeled btn-labeled-right ml-10"><b><i class="icon-plus3"></i></b> Simpan</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('other-scripts')
    <script type="text/javascript" src="{{ asset('assets/js/plugins/forms/styling/switchery.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/forms/styling/switch.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/core/app.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/form_select2.js') }}"></script>

    <script>
        Number.prototype.format = function(n, x, c, s) {
            var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
                num = this.toFixed(Math.max(0, ~~n));
            return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
        };

        let added = 0;
        $("#add_component").click(function() {
            let id = 'added-' + added;
            $("#items").append("<tr>" +
                "<td>" +
                '<select name="components[]" class="form-control component_id" data-id="' + id + '" onchange="checkMe($(this));" required>' +
                '<option value="">-- Pilih Komponen --</option>' +
                @foreach ($components as $component)
                    '<option value="{{ $component->id }}">{{ $component->name }}</option>' +
                @endforeach
                "</select>" +
                "</td>" +
                "<td>" +
                '<input type="number" name="amounts[]" placeholder="Nilai Komponen" value="0" min="0" class="form-control amount" id="amount-' + id + '" data-status="1" onchange="recount();" onkeyup="recount();" required />' +
                "</td>" +
                "<td>" +
                '<input type="text" name="descriptions[]" placeholder="Catatan" value="" class="form-control description" />' +
                "</td>" +
                "<td>" +
                '<div class="checkbox checkbox-switch">' +
                "<label>" +
                '<input type="checkbox" id="status-' + id + '" name="status[]" value="' + id + '" data-id="' + id +
                '" data-on-color="primary" data-off-color="danger" data-on-text="Aktif" data-off-text="Tidak" class="switch" data-size="mini" onchange="doChange($(this));" checked />' +
                "</label>" +
                "</div>" +
                "</td>" +
                '<td class="text-right">' +
                '<button type="button" onclick="removeMe($(this));" class="btn border-danger text-danger btn-flat btn-xs btn-icon btn-rounded">' +
                '<i class="icon-cancel-circle2"></i>' +
                "</button>" +
                "</td>" +
                "</tr>"
            );
            $(".switch").bootstrapSwitch();

            added++;
            recount();
        });

        function recount() {
            let total = 0;
            $.each($(".amount"), function(index, elem) {
                if ($(elem).data('status') == 1) total += parseInt($(elem).val());
            });
            $("#total-amount").html('Rp' + total.format(0, 3, ',', '.'));
        }

        function removeMe(ele) {
            ele.parent().parent().remove();
            recount();
        }

        function checkMe(ele) {
            value = ele.val();
            let id = ele.data('id');
            exist = 0;
            if (value !== "") {
                $.each($(".component_id"), function(index, elem) {
                    if ($(elem).val() == value) exist++;
                });
                if (exist > 1) {
                    alert("Komponen sudah dipilih");
                    ele.val("");
                }
                $('#status-' + id).prop('value', value);
            }
        }

        $(".switch").bootstrapSwitch();

        function doChange(ele) {
            var id = ele.data("id");
            var value = ele.is(":checked") ? 1 : 0;
            $('#amount-' + id).data('status', value);
            recount();
        }
    </script>
@endsection