@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize edit --}}
                        @if ($authorize->edit == '1')

                                {{-- button save --}}
                                {{-- <button class="btn btn-primary mb-0" style="display: none;" id="{{ $dmenu }}-save">
                                    <i class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button> --}}

                                {{-- button edit --}}
                                @if ($status_tagihan->input_bill_status != 'posted')
                                <button class="btn btn-warning mb-0" id="{{ $dmenu }}-edit" onclick="window.location.href='{{ URL::to($url_menu . '/edit/' . $idencrypt) }}'"><i
                                        class="fas fa-edit me-1"> </i><span class="font-weight-bold">Edit</button>
                                @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu . '/update/' . $idencrypt) }}"
                        enctype="multipart/form-data" id="{{ $dmenu }}-form">
                        @csrf
                        @method('PUT')

                        {{-- STATUS DATA TAGIHAN --}}
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Status {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">

                            <div class="row g-3">
                                {{-- Supervisor Approval --}}
                                <div class="col-md-6">
                                    <div class="border rounded p-3 shadow-sm h-100
                                        @if($status_tagihan->approve_spv == 'approved') border-success
                                        @elseif($status_tagihan->approve_spv == 'rejected') border-danger
                                        @elseif($status_tagihan->approve_spv == 'pending') border-warning
                                        @else border-secondary @endif">

                                        <div class="d-flex align-items-center mb-2">
                                            <i class="fas fa-user-check fa-lg me-2
                                                @if($status_tagihan->approve_spv == 'approved') text-success
                                                @elseif($status_tagihan->approve_spv == 'rejected') text-danger
                                                @elseif($status_tagihan->approve_spv == 'pending') text-dark
                                                @else text-secondary @endif"></i>
                                            <h6 class="mb-0 fw-bold">Supervisor Approval</h6>
                                        </div>

                                        <div class="mb-1">
                                            @if($status_tagihan->approve_spv == 'pending')
                                                <span class="badge text-dark" style="background-color: yellow;">
                                                    Pending
                                                </span>
                                            @elseif($status_tagihan->approve_spv == 'approved')
                                                <span class="badge bg-success">Approved</span>
                                            @elseif($status_tagihan->approve_spv == 'rejected')
                                                <span class="badge bg-danger">Rejected</span>
                                            @else
                                                <span class="badge bg-secondary">-</span>
                                            @endif
                                        </div>

                                        <small class="text-muted d-block mb-1">
                                            <i class="fas fa-clock me-1"></i>
                                            {{ $status_tagihan->timestamp_spv ? \Carbon\Carbon::parse($status_tagihan->timestamp_spv)->translatedFormat('d F Y, H:i') : '-' }}
                                        </small>

                                        <small class="d-block">
                                        <i class="fas fa-comment-dots me-1 text-secondary"></i>
                                            @if($status_tagihan->desc_spv)
                                                {{ $status_tagihan->desc_spv }}
                                            @else
                                                -
                                            @endif
                                        </small>
                                    </div>
                                </div>

                                {{-- Head HRD Approval --}}
                                <div class="col-md-6">
                                    <div class="border rounded p-3 shadow-sm h-100
                                        @if($status_tagihan->approve_head_hrd == 'approved') border-success
                                        @elseif($status_tagihan->approve_head_hrd == 'rejected') border-danger
                                        @elseif($status_tagihan->approve_head_hrd == 'pending') border-warning
                                        @else border-secondary @endif">

                                        <div class="d-flex align-items-center mb-2">
                                            <i class="fas fa-user-tie fa-lg me-2
                                                @if($status_tagihan->approve_head_hrd == 'approved') text-success
                                                @elseif($status_tagihan->approve_head_hrd == 'rejected') text-danger
                                                @elseif($status_tagihan->approve_head_hrd == 'pending') text-dark
                                                @else text-secondary @endif"></i>
                                            <h6 class="mb-0 fw-bold">Head HRD Approval</h6>
                                        </div>

                                        <div class="mb-1">
                                            @if($status_tagihan->approve_head_hrd == 'pending')
                                                <span class="badge text-dark" style="background-color: yellow;">
                                                    Pending
                                                </span>
                                            @elseif($status_tagihan->approve_head_hrd == 'approved')
                                                <span class="badge bg-success">Approved</span>
                                            @elseif($status_tagihan->approve_head_hrd == 'rejected')
                                                <span class="badge bg-danger">Rejected</span>
                                            @else
                                                <span class="badge bg-secondary">-</span>
                                            @endif
                                        </div>

                                        <small class="text-muted d-block mb-1">
                                            <i class="fas fa-clock me-1"></i>
                                            {{ $status_tagihan->timestamp_head_hrd ? \Carbon\Carbon::parse($status_tagihan->timestamp_head_hrd)->translatedFormat('d F Y, H:i') : '-' }}
                                        </small>

                                        <small class="d-block">
                                            <i class="fas fa-comment-dots me-1 text-secondary"></i>
                                            @if($status_tagihan->desc_head_hrd)
                                                {{ $status_tagihan->desc_head_hrd }}
                                            @else
                                                -
                                            @endif
                                        </small>
                                    </div>
                                </div>

                                {{-- Bill Status --}}
                                <div class="col-md-12">
                                    <div class="border rounded p-3 shadow-sm
                                        @if($status_tagihan->input_bill_status == 'posted') border-success
                                        @elseif($status_tagihan->input_bill_status == 'draft') border-danger
                                        @else border-secondary @endif">

                                        <div class="d-flex align-items-center mb-2">
                                            <i class="fas fa-file-invoice-dollar fa-lg me-2
                                                @if($status_tagihan->input_bill_status == 'posted') text-success
                                                @elseif($status_tagihan->input_bill_status == 'draft') text-danger
                                                @else text-secondary @endif"></i>
                                            <h6 class="mb-0 fw-bold">Status Data Tagihan</h6>
                                        </div>

                                        @if($status_tagihan->input_bill_status == 'pending')
                                            <span class="badge text-dark" style="background-color: yellow;">
                                                Pending
                                            </span>
                                        @elseif($status_tagihan->input_bill_status == 'posted')
                                            <span class="badge bg-success">Posted</span>
                                        @elseif($status_tagihan->input_bill_status == 'draft')
                                            <span class="badge bg-danger">Draft</span>
                                        @else
                                            <span class="badge bg-secondary">Unknown</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- DETAIL DATA TAGIHAN --}}
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Detail {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Transaction ID</label>
                                    <input type="text" class="form-control bg-light" value="{{ $data_tagihan->transaction_id ?? '-' }}" readonly>
                                </div>
								
								<div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">NIK</label>
                                    <input type="text" class="form-control bg-light" value="{{ $data_tagihan->nik ?? '-' }}" readonly>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Nama Karyawan</label>
                                    <input type="text" class="form-control bg-light" value="{{ $data_tagihan->nama_karyawan ?? '-' }}" readonly>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Departemen</label>
                                    <input type="text" class="form-control bg-light" value="{{ $data_tagihan->nama_departemen ?? '-' }}" readonly>
                                </div>

								<div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Nama Pemilik Rekening</label>
                                    <input type="text" class="form-control bg-light" value="{{ $data_tagihan->nama_akun_bank ?? '-' }}" readonly>
                                </div>
								
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Nomor Rekening</label>
                                    <input type="text" class="form-control bg-light" value="{{ $data_tagihan->no_rekening_bank ?? '-' }} ({{ $data_tagihan->bank_alias ?? '-' }})" readonly>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Nomor Kartu Halo</label>
                                    <input type="text" class="form-control bg-light" value="{{ $data_tagihan->phone_number ?? '-' }}" readonly>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Kategori</label>
                                    <input type="text" class="form-control bg-light" value="{{ $data_tagihan->category ?? '-' }}" readonly>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Abodemen (Rp.)</label>
                                    <input type="text" class="form-control bg-light" value="{{ number_format($data_tagihan->abodemen, 0, ',', '.') }}" readonly>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Lain-lain (Rp.)</label>
                                    <input type="text" name="other_bill" class="form-control bg-light"
                                        value="{{ number_format($data_tagihan->other_bill, 0, ',', '.') }}" disabled>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">PPN 11% (Rp.)</label>
                                    <input type="text" name="tax" class="form-control bg-light"
                                        value="{{ number_format($data_tagihan->tax, 0, ',', '.') }}" readonly>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Total Tagihan (Rp.)</label>
                                    <input type="text" name="total_bill" class="form-control bg-light fw-bold text-primary"
                                        value="{{ number_format($data_tagihan->total_bill, 0, ',', '.') }}" readonly>
                                </div>

                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold">Periode Tagihan</label>
                                    <input type="text" class="form-control bg-light" value="{{ $data_tagihan->desc_date ?? '-' }}" readonly>
                                </div>
                            </div>
                            <hr class="horizontal dark">
                        </div>

                        <div class="card-footer align-items-center pt-0 pb-2">

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>




    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
<script>
    // $(document).ready(function () {
    //     const abodemen = {{ $data_tagihan->abodemen ?? 0 }};
    //     const form = $('#{{ $dmenu }}-form');
    //     const otherInput = form.find('input[name="other_bill"]');
    //     const taxInput = form.find('input[name="tax"]');
    //     const totalInput = form.find('input[name="total_bill"]');
    //     const editBtn = $('#{{ $dmenu }}-edit');
    //     const saveBtn = $('#{{ $dmenu }}-save');

    //     // awalnya disable semua
    //     form.find('input').attr('disabled', 'disabled');
    //     form.find('select').attr('disabled', 'disabled');
    //     form.find('textarea').attr('disabled', 'disabled');

    //     // format rupiah
    //     function formatRupiah(angka) {
    //         return angka.toLocaleString('id-ID');
    //     }

    //     // hitung tax dan total
    //     function hitung() {
    //         let other = parseInt(otherInput.val().replace(/\./g, '')) || 0;
    //         let tax = Math.round((abodemen + other) * 0.11);
    //         let total = abodemen + other + tax;

    //         taxInput.val(formatRupiah(tax));
    //         totalInput.val(formatRupiah(total));
    //     }

    //     // aktifkan edit
    //     editBtn.on('click', function () {
    //         otherInput.removeAttr('disabled').removeClass('bg-light');
    //         taxInput.attr('readonly', true);
    //         totalInput.attr('readonly', true);
    //         editBtn.hide();
    //         saveBtn.show();
    //     });

    //     // format dan hitung saat ketik
    //     otherInput.on('input', function () {
    //         let val = $(this).val().replace(/\D/g, '');
    //         $(this).val(formatRupiah(parseInt(val || 0)));
    //         hitung();
    //     });

    //     // intercept tombol save
    //     saveBtn.on('click', function (e) {
    //         e.preventDefault();

    //         Swal.fire({
    //             title: 'Konfirmasi Perubahan',
    //             html: `
    //                 <div class="text-start">
    //                     <p>Anda yakin ingin menyimpan perubahan tagihan ini?</p>
    //                     <ul class="list-unstyled">
    //                         <li><strong>Lain-lain:</strong> Rp ${otherInput.val()}</li>
    //                         <li><strong>PPN 11%:</strong> Rp ${taxInput.val()}</li>
    //                         <li><strong>Total:</strong> Rp ${totalInput.val()}</li>
    //                     </ul>
    //                 </div>
    //             `,
    //             icon: 'question',
    //             showCancelButton: true,
    //             confirmButtonText: 'Ya, Simpan',
    //             cancelButtonText: 'Batal',
    //             reverseButtons: true,
    //             customClass: {
    //                 popup: 'rounded-4 shadow-lg',
    //                 confirmButton: 'btn btn-primary px-4 me-2',
    //                 cancelButton: 'btn btn-outline-secondary px-4'
    //             },
    //             buttonsStyling: false
    //         }).then((result) => {
    //             if (result.isConfirmed) {
    //                 // ubah ke number murni sebelum submit
    //                 otherInput.val(otherInput.val().replace(/\./g, ''));
    //                 taxInput.val(taxInput.val().replace(/\./g, ''));
    //                 totalInput.val(totalInput.val().replace(/\./g, ''));

    //                 form.submit();
    //             }
    //         });
    //     });
    // });
</script>
@endpush