@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@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">
                        <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">
                            <i class="fas fa-arrow-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                @include('components.alert')

                <div class="row">
                    {{-- Left Column - Informasi Anggota --}}
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-header pb-0">
                                <h6 class="mb-0">Informasi Pelunasan</h6>
                                <p class="text-sm mb-0 text-muted">Data pelunasan dan anggota</p>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        @php
                                            $allowedFieldsLeft = ['nomor_pinjaman', 'id_transaksi', 'nik'];
                                        @endphp
                                        @foreach ($table_header_l as $header)
                                            @php
                                                $primary = false;
                                                foreach ($table_primary as $p) {
                                                    if ($p->field == $header->field) {
                                                        $primary = true;
                                                        break;
                                                    }
                                                }
                                                $fieldValue = $list->{$header->field} ?? ($header->default ?? '');
                                            @endphp
                                            @if (in_array($header->field, $allowedFieldsLeft) && $header->show == '1' && $header->type != 'hidden' && $fieldValue !== '' && $fieldValue !== null)
                                                <div class="form-group">
                                                    <label class="form-control-label">{{ $header->alias }}</label>
                                                    <input class="form-control {{ $primary ? 'bg-dark text-light' : '' }}"
                                                        type="text" value="{{ $fieldValue }}" readonly
                                                        style="{{ $primary ? 'background-color: #f8f9fa; font-weight: bold;' : '' }}">
                                                </div>
                                            @endif
                                        @endforeach

                                        {{-- Nama Lengkap dari relasi anggota --}}
                                        <div class="form-group">
                                            <label class="form-control-label">Nama Lengkap</label>
                                            <input class="form-control" type="text" 
                                                value="{{ $list->anggota->nama_lengkap ?? '-' }}" readonly>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        {{-- Status Pelunasan --}}
                                        <div class="form-group">
                                            <label class="form-control-label">Status Pelunasan</label>
                                            <div>
                                                @if ($list->sts == 'pending')
                                                    <span class="badge bg-warning">Pending</span>
                                                @elseif ($list->sts == 'approve')
                                                    <span class="badge bg-success">Disetujui</span>
                                                @elseif ($list->sts == 'rejected')
                                                    <span class="badge bg-danger">Ditolak</span>
                                                @endif
                                            </div>
                                        </div>

                                        {{-- Periode --}}
                                        <div class="form-group">
                                            <label class="form-control-label">Periode</label>
                                            <input class="form-control" type="text" value="{{ $list->periode ?? '-' }}" readonly>
                                        </div>

                                        {{-- Nominal --}}
                                        <div class="form-group">
                                            <label class="form-control-label">Nominal Pelunasan</label>
                                            <input class="form-control" type="text" 
                                                value="{{ $format->CurrencyFormat($list->nominal) }}" readonly
                                                style="font-weight: bold; color: #198754;">
                                        </div>

                                        {{-- Bukti Pembayaran --}}
                                        <div class="form-group">
                                            <label class="form-control-label">Bukti Pembayaran</label>
                                            @if ($list->bukti && $list->bukti !== 'noimage.png')
                                                <div class="mt-2">
                                                    <a href="{{ asset('storage/' . $list->bukti) }}" target="_blank"
                                                        class="btn btn-sm btn-outline-primary">
                                                        <i class="fas fa-image me-1"></i>
                                                        Lihat Bukti Pembayaran
                                                    </a>
                                                </div>
                                            @else
                                                <p class='text-secondary text-xs mb-0'>
                                                    <i class="fas fa-info-circle me-1"></i>Tidak ada bukti pembayaran
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Right Column - Panel Approval (sama seperti pengajuanpinjaman) --}}
                    <div class="col-lg-4">
                        @if ($authorize->approval == '1' && $list->sts == 'pending')
                            <div class="card mb-4">
                                <div class="card-header pb-0">
                                    <div>
                                        <h6 class="mb-0">Panel Approval</h6>
                                        <p class="text-sm mb-0 text-muted">Proses persetujuan pelunasan</p>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <form method="POST" action="{{ URL::to($url_menu) }}" id="approval-form">
                                        @csrf
                                        <input type="hidden" name="approval_action" value="1">
                                        <input type="hidden" name="id_transaksi" value="{{ $list->id_transaksi }}">

                                        <div class="form-group">
                                            <label class="form-control-label">Keputusan <span class="text-danger">*</span></label>
                                            <div class="mt-2">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="action"
                                                        id="approve" value="approve" required>
                                                    <label class="form-check-label text-success" for="approve">
                                                        <i class="fas fa-check me-1"></i> Setujui
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="radio" name="action"
                                                        id="reject" value="reject" required>
                                                    <label class="form-check-label text-danger" for="reject">
                                                        <i class="fas fa-times me-1"></i> Tolak
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="form-control-label">Catatan Approval <span class="text-danger">*</span></label>
                                            <textarea class="form-control" name="catatan_approval" rows="4" maxlength="500"
                                                placeholder="Berikan catatan terkait keputusan approval..."></textarea>
                                            <small class="text-muted">Maksimal 500 karakter</small>
                                        </div>

                                        <div class="form-group mb-0">
                                            <button type="submit" class="btn btn-primary w-100">
                                                <i class="fas fa-paper-plane me-1"></i>
                                                Proses Approval
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endif

                        {{-- Riwayat Approval (sama seperti pengajuanpinjaman) --}}
                        @if (!empty($approval_history) && count($approval_history) > 0)
                            <div class="card mb-4">
                                <div class="card-header pb-0">
                                    <div>
                                        <h6 class="mb-0">Riwayat Approval</h6>
                                        <p class="text-sm mb-0 text-muted">Timeline persetujuan</p>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="approval-history">
                                        @foreach ($approval_history->reverse() as $index => $history)
                                            @php
                                                $timelineColor = $history->approval_color ?? 'primary';
                                            @endphp
                                            <div class="bg-light border-start border-3 border-{{ $timelineColor }} p-3 mb-3 position-relative">
                                                <div class="position-absolute" style="left: -8px; top: 50%; transform: translateY(-50%);">
                                                    <div class="bg-{{ $timelineColor }} rounded-circle shadow-sm d-flex align-items-center justify-content-center"
                                                        style="width: 16px; height: 16px;">
                                                        <div class="bg-white rounded-circle" style="width: 6px; height: 6px;"></div>
                                                    </div>
                                                </div>

                                                <div class="row align-items-center">
                                                    <div class="col-md-12">
                                                        <h6 class="text-sm font-weight-bold mb-1 text-{{ $timelineColor }}">
                                                            {{ $history->user_display_name ?? $history->username }}
                                                        </h6>
                                                        <p class="text-xs text-muted mb-1">
                                                            {{ $history->formatted_created_at ?? \Carbon\Carbon::parse($history->created_at)->format('d M Y, H:i') }}
                                                        </p>
                                                        @if (isset($history->catatan_approval) && $history->catatan_approval)
                                                            <p class="text-sm text-muted mb-0">
                                                                <i class="fas fa-quote-left me-1"></i>
                                                                <em>{{ $history->catatan_approval }}</em>
                                                            </p>
                                                        @endif
                                                        <span class="badge bg-{{ $timelineColor }} badge-sm mt-2">
                                                            @if ($timelineColor === 'success')
                                                                Disetujui
                                                            @elseif ($timelineColor === 'danger')
                                                                Ditolak
                                                            @else
                                                                Pending
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>


                {{-- Detail Cicilan Yang Akan Dilunasi --}}
                @if ($list->cicilan_data && $list->cicilan_data->count() > 0)
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header pb-0">
                                    <h6 class="mb-0">Detail Cicilan Yang Akan Dilunasi</h6>
                                    <p class="text-sm mb-0 text-muted">Rincian cicilan yang belum dibayar</p>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                <tr>
                                                    <th>Status</th>
                                                    <th>Angsuran Ke</th>
                                                    <th>Pokok</th>
                                                    <th>Bunga</th>
                                                    <th>Total</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($list->cicilan_data as $cicilan)
                                                    @php
                                                        $isBelumBayar = $cicilan->isbayar == '0';
                                                    @endphp

                                                    @if ($isBelumBayar)
                                                        <tr class="table-warning" style="background-color: rgba(255, 193, 7, 0.1) !important;">
                                                            <td class="text-sm">
                                                                <span class="badge badge-sm bg-warning">Belum Bayar</span>
                                                            </td>
                                                            <td class="text-sm font-weight-bold text-warning">
                                                                {{ $cicilan->angsuran_ke }}</td>
                                                            <td class="text-sm text-end text-currency">
                                                                {{ $format->CurrencyFormat($cicilan->nominal_pokok) }}
                                                            </td>
                                                            <td class="text-sm text-end text-currency">
                                                                {{ $format->CurrencyFormat($cicilan->bunga_rp) }}</td>
                                                            <td class="text-sm text-end font-weight-bold text-warning text-currency">
                                                                {{ $format->CurrencyFormat($cicilan->total_angsuran) }}
                                                            </td>
                                                        </tr>
                                                    @else
                                                        <tr>
                                                            <td class="text-sm">
                                                                <span class="badge badge-sm bg-success">Sudah Bayar</span>
                                                            </td>
                                                            <td class="text-sm font-weight-normal">
                                                                {{ $cicilan->angsuran_ke }}
                                                            </td>
                                                            <td class="text-sm text-end text-currency">
                                                                {{ $format->CurrencyFormat($cicilan->nominal_pokok) }}
                                                            </td>
                                                            <td class="text-sm text-end text-currency">
                                                                {{ $format->CurrencyFormat($cicilan->bunga_rp) }}</td>
                                                            <td class="text-sm text-end font-weight-normal text-currency">
                                                                {{ $format->CurrencyFormat($cicilan->total_angsuran) }}
                                                            </td>
                                                        </tr>
                                                    @endif
                                                @endforeach
                                                
                                                {{-- Summary Row --}}
                                                <tr class="table-white" style="background-color: rgba(255, 255, 255, 1) !important; border-top: 3px solid #000000ff;">
                                                    <td colspan="2" class="text-sm font-weight-bold">
                                                        TOTAL PELUNASAN
                                                    </td>
                                                    <td class="text-sm font-weight-bold text-end text-dark">
                                                        {{ $format->CurrencyFormat($list->perhitungan['sisa_pokok']) }}
                                                    </td>
                                                    <td class="text-sm font-weight-bold text-end text-dark">
                                                        {{ $format->CurrencyFormat($list->perhitungan['sisa_bunga']) }}
                                                    </td>
                                                    <td class="text-sm font-weight-bold text-end text-dark">
                                                        {{ $format->CurrencyFormat($list->perhitungan['total_pelunasan']) }}
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

@endsection

@if ($jsmenu == '1')
    @if (view()->exists("js.{$dmenu}"))
        @push('addjs')
            @include('js.' . $dmenu)
        @endpush
    @else
        @push('addjs')
            <script>
                Swal.error('JS Not Found!!', 'Please Create File JS for {{ $dmenu }}');
            </script>
        @endpush
    @endif
@endif