@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">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-arrow-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->edit == '1' && ($table_detail->status ?? '0') === '0')
                            <a class="btn btn-warning mb-0"
                                href="{{ URL::to($url_menu . '/edit/' . encrypt($table_detail->nomor_pinjaman)) }}">
                                <i class="fas fa-edit me-1"></i>
                                <span class="font-weight-bold">Edit</span>
                            </a>
                        @endif
                    </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">
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-header pb-0">
                                <div>
                                    <h6 class="mb-0">Detail Pengajuan Pinjaman</h6>
                                    <p class="text-sm mb-0 text-muted">Informasi lengkap pengajuan</p>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        @foreach ($table_header_l as $header)
                                            @php
                                                $fieldValue = $table_detail->{$header->field} ?? '';
                                                $primary = false;
                                                foreach ($table_primary as $p) {
                                                    if ($p->field == $header->field) {
                                                        $primary = true;
                                                        break;
                                                    }
                                                }
                                            @endphp
                                            @if ($header->show == '1' && $header->type != 'hidden' && $fieldValue !== '' && $fieldValue !== null)
                                                <div class="form-group">
                                                    <label class="form-control-label">{{ $header->alias }}</label>
                                                    @php
                                                        $displayValue = '';
                                                        if ($header->type == 'currency') {
                                                            $displayValue = $format->CurrencyFormat(
                                                                $fieldValue,
                                                                $header->decimals ?? 0,
                                                            );
                                                        } elseif (
                                                            $header->type == 'date' ||
                                                            $header->type == 'datetime'
                                                        ) {
                                                            $displayValue = $format->DateFormat($fieldValue);
                                                        } elseif ($header->type == 'enum') {
                                                            if ($header->query != '') {
                                                                $data_query = DB::select($header->query);
                                                                $displayValue = $fieldValue;
                                                                foreach ($data_query as $q) {
                                                                    $sAsArray = array_values((array) $q);
                                                                    if ($fieldValue == $sAsArray[0]) {
                                                                        $displayValue = $sAsArray[1];
                                                                        break;
                                                                    }
                                                                }
                                                            } else {
                                                                $displayValue = ucfirst($fieldValue);
                                                            }
                                                        } elseif ($header->type == 'join') {
                                                            if ($header->query != '' && $fieldValue) {
                                                                try {
                                                                    $joinResult = DB::select($header->query . "'" . $fieldValue . "'");
                                                                    $displayValue = $joinResult[0]->nama_lengkap ?? $fieldValue;
                                                                } catch (\Exception $e) {
                                                                    $displayValue = $fieldValue;
                                                                }
                                                            } else {
                                                                $displayValue = $fieldValue;
                                                            }
                                                        } elseif ($header->type == 'text') {
                                                            $displayValue = $fieldValue;
                                                        } else {
                                                            $displayValue = $fieldValue;
                                                        }
                                                    @endphp
                                                    <input class="form-control {{ $primary ? 'bg-dark text-light' : '' }}"
                                                        type="text" disabled value="{{ $displayValue }}">

                                                    @if ($header->type == 'image' && $fieldValue && $fieldValue !== 'noimage.png')
                                                        <div class="mt-2">
                                                            <a href="{{ asset('storage/' . $fieldValue) }}" target="_blank"
                                                                class="btn btn-sm btn-outline-primary">
                                                                <i class="fas fa-image me-1"></i>
                                                                Lihat {{ $header->alias }}
                                                            </a>
                                                        </div>
                                                    @endif

                                                    @if ($header->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>
                                                            {{ '*) ' . $header->note }}
                                                        </p>
                                                    @endif
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>

                                    <div class="col-md-6">
                                        @foreach ($table_header_r as $header)
                                            @php
                                                $fieldValue = $table_detail->{$header->field} ?? '';
                                                $primary = false;
                                                foreach ($table_primary as $p) {
                                                    if ($p->field == $header->field) {
                                                        $primary = true;
                                                        break;
                                                    }
                                                }
                                            @endphp
                                            @if ($header->show == '1' && $header->type != 'hidden' && $fieldValue !== '' && $fieldValue !== null)
                                                <div class="form-group">
                                                    <label class="form-control-label">{{ $header->alias }}</label>

                                                    @if ($header->type == 'text')
                                                        <textarea class="form-control {{ $primary ? 'bg-dark text-light' : '' }}" disabled>{{ $fieldValue }}</textarea>
                                                    @else
                                                        @php
                                                            $displayValueR = '';
                                                            if ($header->type == 'currency') {
                                                                $displayValueR = $format->CurrencyFormat(
                                                                    $fieldValue,
                                                                    $header->decimals ?? 0,
                                                                );
                                                            } elseif (
                                                                $header->type == 'date' ||
                                                                $header->type == 'datetime'
                                                            ) {
                                                                $displayValueR = $format->DateFormat($fieldValue);
                                                            } elseif ($header->type == 'enum') {
                                                                if ($header->query != '') {
                                                                    $data_query = DB::select($header->query);
                                                                    $displayValueR = $fieldValue;
                                                                    foreach ($data_query as $q) {
                                                                        $sAsArray = array_values((array) $q);
                                                                        if ($fieldValue == $sAsArray[0]) {
                                                                            $displayValueR = $sAsArray[1];
                                                                            break;
                                                                        }
                                                                    }
                                                                } else {
                                                                    $displayValueR = ucfirst($fieldValue);
                                                                }
                                                            } elseif ($header->type == 'join') {
                                                                if ($header->query != '' && $fieldValue) {
                                                                    try {
                                                                        $joinResult = DB::select($header->query . "'" . $fieldValue . "'");
                                                                        $displayValueR = $joinResult[0]->nama_lengkap ?? $fieldValue;
                                                                    } catch (\Exception $e) {
                                                                        $displayValueR = $fieldValue;
                                                                    }
                                                                } else {
                                                                    $displayValueR = $fieldValue;
                                                                }
                                                            } else {
                                                                $displayValueR = $fieldValue;
                                                            }
                                                        @endphp
                                                        <input
                                                            class="form-control {{ $primary ? 'bg-dark text-light' : '' }}"
                                                            type="text" disabled value="{{ $displayValueR }}">
                                                    @endif

                                                    @if ($header->type == 'image' && $fieldValue && $fieldValue !== 'noimage.png')
                                                        <div class="mt-2">
                                                            <a href="{{ asset('storage/' . $fieldValue) }}" target="_blank"
                                                                class="btn btn-sm btn-outline-primary">
                                                                <i class="fas fa-image me-1"></i>
                                                                Lihat {{ $header->alias }}
                                                            </a>
                                                        </div>
                                                    @endif

                                                    @if ($header->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>
                                                            {{ '*) ' . $header->note }}
                                                        </p>
                                                    @endif
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>

                                @if (isset($breakdownCicilan) && !empty($breakdownCicilan['cicilan_data']))
                                    @php
                                        $cicilanData = $breakdownCicilan['cicilan_data'];
                                        $totalPokok = $breakdownCicilan['total_pokok'];
                                        $totalBunga = $breakdownCicilan['total_bunga'];
                                        $grandTotal = $breakdownCicilan['grand_total'];
                                        $bungaRatePercent = $breakdownCicilan['bunga_rate_percent'];
                                    @endphp
                                    <div class="row mt-4">
                                        <div class="col-12">
                                            <h6 class="mb-3">Breakdown Cicilan</h6>
                                            <p class="text-sm text-muted mb-3">Simulasi angsuran dengan bunga flat {{ $bungaRatePercent }}% per bulan</p>

                                            <div class="table-responsive">
                                                <table class="table display" id="table_cicilan_pinjaman">
                                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                        <tr>
                                                            <th>Bulan Ke</th>
                                                            <th>Saldo Awal</th>
                                                            <th>Angsuran Pokok</th>
                                                            <th>Angsuran Bunga</th>
                                                            <th>Total Angsuran</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($cicilanData as $cicilan)
                                                            <tr>
                                                                <td class="text-sm font-weight-bold text-center">{{ $cicilan['bulan'] }}</td>
                                                                <td class="text-sm text-end">{{ $format->CurrencyFormat($cicilan['saldo_awal']) }}</td>
                                                                <td class="text-sm text-end text-primary">{{ $format->CurrencyFormat($cicilan['angsuran_pokok']) }}</td>
                                                                <td class="text-sm text-end text-warning">{{ $format->CurrencyFormat($cicilan['angsuran_bunga']) }}</td>
                                                                <td class="text-sm text-end text-success font-weight-bold">{{ $format->CurrencyFormat($cicilan['total_angsuran']) }}</td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                    <tfoot>
                                                        <tr class="bg-light">
                                                            <th class="text-sm font-weight-bold">Total</th>
                                                            <th></th>
                                                            <th class="text-sm text-end text-primary font-weight-bold">{{ $format->CurrencyFormat($totalPokok) }}</th>
                                                            <th class="text-sm text-end text-warning font-weight-bold">{{ $format->CurrencyFormat($totalBunga) }}</th>
                                                            <th class="text-sm text-end text-success font-weight-bold">{{ $format->CurrencyFormat($grandTotal) }}</th>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                {{-- Container untuk Cicilan Belum Bayar (Top Up) --}}
                                <div id="pinjamanAktifInfo" class="d-none">
                                    <div class="row mt-4">
                                        <div class="col-12">
                                            
                                                <h6 class="mb-1 text-warning">
                                                    <i class="fas fa-info-circle me-2"></i>Sisa Cicilan Yang Belum Dibayar
                                                </h6>
                                                <small class="text-muted">Pinjaman Sebelumnya: <span id="nomorPinjamanAktif">-</span></small>
                                                
                                                <div id="listCicilanBelumBayar" class="mt-3">
                                                </div>
                                            
                                        </div>
                                    </div>
                                </div>

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

                    <div class="col-lg-4">
                        @php
                            $userLevel = \App\Helpers\Koperasi\Pengajuan\ApprovalHelper::getUserLevel(
                                $user_login->idroles,
                            );
                            $canApprove =
                                $userLevel &&
                                \App\Helpers\Koperasi\Pengajuan\ValidationHelper::canBeApproved(
                                    $table_detail,
                                    $userLevel,
                                );
                        @endphp
                        @if (
                            $authorize->approval == '1' &&
                                $canApprove &&
                                $user_login->idroles !== \App\Helpers\Koperasi\Constants\KoperasiConstants::ROLE_ADMIN_TRANSFER)
                            <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 pinjaman</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="nomor_pinjaman"
                                            value="{{ $table_detail->nomor_pinjaman }}">

                                        <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">
                                                    <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">
                                                    <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


                        @php
                            if (!empty($table_detail->nominal_transfer) && $table_detail->nominal_transfer > 0) {
                                $nominalPencairan = $table_detail->nominal_transfer;
                                $sisaCicilan = 0;
                            } else {
                                $transferCalculation = \App\Helpers\Koperasi\Pengajuan\CalculationHelper::calculateTransfer(
                                    $table_detail->nik,
                                    (float) $table_detail->nominal_pinjaman,
                                    $table_detail->jenis_pengajuan
                                );
                                $nominalPencairan = $transferCalculation['nominal_transfer'];
                                $sisaCicilan = $transferCalculation['sisa_cicilan_total'];
                            }
                        @endphp

                        @php
                            $canTransfer =
                                $user_login->idroles === 'atrans' &&
                                \App\Helpers\Koperasi\Pengajuan\ValidationHelper::canBeTransferred($table_detail);
                        @endphp
                        @if ($canTransfer)
                            <div class="card">
                                <div class="card-header pb-0">
                                    <div>
                                        <h6 class="mb-0">Panel Transfer</h6>
                                        <p class="text-sm mb-0 text-muted">Upload bukti transfer dana</p>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <form method="POST" action="{{ URL::to($url_menu) }}" id="transfer-form"
                                        enctype="multipart/form-data">
                                        @csrf
                                        <input type="hidden" name="transfer_action" value="1">
                                        <input type="hidden" name="nomor_pinjaman"
                                            value="{{ $table_detail->nomor_pinjaman }}">
                                        <input type="hidden" name="nominal_pencairan" id="nominalPencairanInput"
                                            value="{{ $nominalPencairan }}">
                                        <input type="hidden" name="sisa_cicilan" id="sisaCicilanInput"
                                            value="{{ $sisaCicilan }}">

                                        @foreach ($table_header_transfer as $header)
                                            @if ($header->field == 'nominal_transfer')
                                                <div class="form-group">
                                                    <label class="form-control-label">
                                                        {{ $header->alias }}
                                                        @if (str_contains($header->validate, 'required'))
                                                            <span class="text-danger">*</span>
                                                        @endif
                                                    </label>
                                                    <input type="number" class="form-control"
                                                        name="{{ $header->field }}" value="{{ $nominalPencairan ?? 0 }}"
                                                        step="0.01" min="0" readonly
                                                        {{ str_contains($header->validate, 'required') ? 'required' : '' }}>
                                                    @error($header->field)
                                                        <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                                    @enderror
                                                </div>
                                            @elseif ($header->field == 'bukti_transfer')
                                                <div class="form-group">
                                                    @if ($header->type != 'hidden')
                                                        <label class="form-control-label">
                                                            {{ $header->alias }}
                                                            @if (str_contains($header->validate, 'required'))
                                                                <span class="text-danger">*</span>
                                                            @endif
                                                        </label>
                                                    @endif

                                                    @if ($header->type == 'image')
                                                        <div class="col-sm-auto mb-3">
                                                            <div class="position-relative">
                                                                <div>
                                                                    <label for="{{ $header->field }}"
                                                                        style="left: -5px !important;"
                                                                        id="{{ $header->field }}edit"
                                                                        class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                                        <i class="fa fa-pen top-0"
                                                                            data-bs-toggle="tooltip"
                                                                            data-bs-placement="top" title=""
                                                                            aria-hidden="true"
                                                                            data-bs-original-title="Edit Image"
                                                                            aria-label="Edit Image"></i>
                                                                        <span class="sr-only">Edit Image</span>
                                                                    </label>
                                                                    <span
                                                                        class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                        <img src="{{ asset('storage/noimage.png') }}"
                                                                            id="{{ $header->field }}preview"
                                                                            alt="image"
                                                                            class="w-30 border-radius-lg shadow-sm">
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <input class="form-control" type="file"
                                                            id="{{ $header->field }}" name="{{ $header->field }}"
                                                            style="display: none;"
                                                            accept="image/jpeg,image/png,image/jpg,application/pdf">
                                                        <p class='text-primary text-xs pt-3 mb-0'>Maksimal Size :
                                                            <b>{{ $header->length }} KB</b>
                                                        </p>
                                                        <p class='text-primary text-xs pt-1'>Format File :
                                                            <b>PNG,JPG,JPEG,PDF</b>
                                                        </p>
                                                    @else
                                                        <input type="file" class="form-control"
                                                            name="{{ $header->field }}"
                                                            {{ str_contains($header->validate, 'required') ? 'required' : '' }}
                                                            accept=".jpg,.jpeg,.png,.pdf">
                                                        <small class="text-muted">
                                                            @php
                                                                preg_match(
                                                                    '/mimes:([^|]+)/',
                                                                    $header->validate,
                                                                    $matches,
                                                                );
                                                                $formats = isset($matches[1])
                                                                    ? strtoupper(str_replace(',', ', ', $matches[1]))
                                                                    : 'JPG, PNG, PDF';
                                                                $maxSize = $header->length
                                                                    ? $header->length / 1024 . 'MB'
                                                                    : '2MB';
                                                            @endphp
                                                            Format: {{ $formats }} (Max: {{ $maxSize }})
                                                        </small>
                                                    @endif

                                                    @error($header->field)
                                                        <p class='text-danger text-xs pt-1'> {{ $message }} </p>
                                                    @enderror

                                                    @if ($header->note != '')
                                                        <p class='text-secondary text-xs pt-1 px-1'>
                                                            {{ '*) ' . $header->note }}
                                                        </p>
                                                    @endif
                                                </div>
                                            @endif
                                        @endforeach

                                        <div class="form-group mb-0">
                                            <button type="submit" class="btn btn-success w-100" id="btn-transfer">
                                                <i class="fas fa-upload me-1"></i>
                                                Konfirmasi Transfer
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endif

                        @if ($table_detail->tanggal_transfer)
                            <div class="card">
                                <div class="card-header pb-0">
                                    <div>
                                        <h6 class="mb-0">Status Transfer</h6>
                                        <p class="text-sm mb-0 text-muted">Dana telah ditransfer</p>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <ul class="list-group">
                                        @foreach ($table_header_transfer as $header)
                                            @if ($table_detail->{$header->field})
                                                <li class="list-group-item border-0 ps-0 text-sm">
                                                    <strong class="d-inline-block"
                                                        style="width: 140px;">{{ $header->alias }}</strong><strong> :
                                                    </strong>
                                                    @if ($header->type == 'currency')
                                                        <span class="text-success font-weight-bold">
                                                            {{ $format->CurrencyFormat($table_detail->{$header->field}) }}
                                                        </span>
                                                    @elseif ($header->type == 'datetime')
                                                        {{ $format->DateFormat($table_detail->{$header->field}) }}
                                                    @elseif ($header->type == 'image' && $header->field == 'bukti_transfer')
                                                        <div class="mt-2">
                                                            @php
                                                                $extension = strtolower(
                                                                    pathinfo(
                                                                        $table_detail->{$header->field},
                                                                        PATHINFO_EXTENSION,
                                                                    ),
                                                                );
                                                                $isImage = in_array($extension, ['jpg', 'jpeg', 'png']);
                                                            @endphp

                                                            @if ($isImage)
                                                                <div class="col-sm-auto mb-3">
                                                                    <div class="position-relative">
                                                                        <div>
                                                                            <span
                                                                                class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                                <img src="{{ asset('storage/' . $table_detail->{$header->field}) }}"
                                                                                    alt="{{ $header->alias }}"
                                                                                    class="w-30 border-radius-lg shadow-sm"
                                                                                    style="cursor: pointer;"
                                                                                    onclick="showImageModal('{{ asset('storage/' . $table_detail->{$header->field}) }}', '{{ $header->alias }} {{ $table_detail->nomor_pinjaman }}')">
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif

                                                            <div class="mt-2">
                                                                <a href="{{ asset('storage/' . $table_detail->{$header->field}) }}"
                                                                    target="_blank"
                                                                    class="btn btn-outline-primary btn-sm">
                                                                    <i
                                                                        class="fas fa-{{ $isImage ? 'image' : 'file-pdf' }} me-1"></i>
                                                                    {{ $isImage ? 'Lihat Gambar' : 'Lihat PDF' }}
                                                                    {{ $header->alias }}
                                                                </a>

                                                                <a href="{{ asset('storage/' . $table_detail->{$header->field}) }}"
                                                                    download class="btn btn-outline-secondary btn-sm ms-2">
                                                                    <i class="fas fa-download me-1"></i>
                                                                    Download
                                                                </a>
                                                            </div>
                                                        </div>
                                                    @else
                                                        {{ $table_detail->{$header->field} ?: '-' }}
                                                    @endif
                                                </li>
                                            @endif
                                        @endforeach
                                    </ul>

                                    {{-- Upload Ulang Bukti Transfer (hanya untuk atrans) --}}
                                    @if ($user_login->idroles === 'atrans' && 
                                         $table_detail->bukti_transfer && 
                                         empty($table_detail->kesalahan_bukti_transfer))
                                        <div class="border-top pt-3 mt-3">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" type="checkbox" id="enableReupload">
                                                <label class="form-check-label text-warning font-weight-bold" for="enableReupload">
                                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                                    Upload ulang bukti transfer (jika ada kesalahan)
                                                </label>
                                                <small class="d-block text-muted ms-4">
                                                    Centang jika ingin mengunggah bukti transfer yang benar. Upload ulang hanya dapat dilakukan 1 kali.
                                                </small>
                                            </div>

                                            <div id="reuploadForm" style="display: none;">
                                                <form method="POST" action="{{ URL::to($url_menu) }}" enctype="multipart/form-data">
                                                    @csrf
                                                    <input type="hidden" name="reupload_action" value="1">
                                                    <input type="hidden" name="nomor_pinjaman" value="{{ $table_detail->nomor_pinjaman }}">

                                                    <div class="form-group">
                                                        <label class="form-control-label">
                                                            Bukti Transfer Baru <span class="text-danger">*</span>
                                                        </label>
                                                        
                                                        <div class="col-sm-auto mb-3">
                                                            <div class="position-relative">
                                                                <div>
                                                                    <label for="kesalahan_bukti_transfer"
                                                                        style="left: -5px !important;"
                                                                        id="kesalahan_bukti_transferedit"
                                                                        class="btn btn-xxl btn-icon-only bg-warning position-absolute bottom-0 mb-n2">
                                                                        <i class="fa fa-pen top-0 text-white"
                                                                            data-bs-toggle="tooltip"
                                                                            data-bs-placement="top" title=""
                                                                            aria-hidden="true"
                                                                            data-bs-original-title="Edit Image"
                                                                            aria-label="Edit Image"></i>
                                                                        <span class="sr-only">Edit Image</span>
                                                                    </label>
                                                                    <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                        <img src="{{ asset('storage/noimage.png') }}"
                                                                            id="kesalahan_bukti_transferpreview"
                                                                            alt="image"
                                                                            class="w-30 border-radius-lg shadow-sm">
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <input class="form-control" type="file"
                                                            id="kesalahan_bukti_transfer" 
                                                            name="kesalahan_bukti_transfer"
                                                            style="display: none;"
                                                            accept="image/jpeg,image/png,image/jpg"
                                                            required>
                                                        
                                                        <p class='text-success text-xs pt-3 mb-0'>Maksimal Size :
                                                            <b>2048 KB</b>
                                                        </p>
                                                        <p class='text-success text-xs pt-1'>Format File :
                                                            <b>PNG,JPG,JPEG</b>
                                                        </p>
                                                    </div>

                                                    <div class="d-flex gap-2">
                                                        <button type="submit" class="btn btn-warning">
                                                            <i class="fas fa-upload me-1"></i>
                                                            Upload Bukti Baru
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    @endif

                                    {{-- Tampilkan info jika sudah pernah upload ulang --}}
                                    @if ($table_detail->kesalahan_bukti_transfer)
                                        <div class="border-top pt-3 mt-3">
                                            <h6 class="mb-3">
                                                <i class="fas fa-history me-1 text-warning"></i>
                                                Bukti Transfer (Upload Ulang)
                                            </h6>
                                            
                                            @php
                                                $reuploadExtension = strtolower(pathinfo($table_detail->kesalahan_bukti_transfer, PATHINFO_EXTENSION));
                                                $isReuploadImage = in_array($reuploadExtension, ['jpg', 'jpeg', 'png']);
                                            @endphp
                                            
                                            <ul class="list-group">
                                                <li class="list-group-item border-0 ps-0 text-sm">
                                                    <strong class="d-inline-block" style="width: 140px;">Tanggal Upload</strong><strong> : </strong>
                                                    <span class="text-warning font-weight-bold">
                                                        {{ $format->DateFormat($table_detail->tanggal_salah_transfer) }}
                                                    </span>
                                                </li>
                                                <li class="list-group-item border-0 ps-0 text-sm">
                                                    <strong class="d-inline-block" style="width: 140px;">Bukti Transfer</strong><strong> : </strong>
                                                    <div class="mt-2">
                                                        @if ($isReuploadImage)
                                                            <div class="col-sm-auto mb-3">
                                                                <div class="position-relative">
                                                                    <div>
                                                                        <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                                            <img src="{{ asset('storage/' . $table_detail->kesalahan_bukti_transfer) }}"
                                                                                alt="Bukti Transfer Upload Ulang"
                                                                                class="w-30 border-radius-lg shadow-sm"
                                                                                style="cursor: pointer;"
                                                                                onclick="showImageModal('{{ asset('storage/' . $table_detail->kesalahan_bukti_transfer) }}', 'Bukti Transfer Upload Ulang {{ $table_detail->nomor_pinjaman }}')">
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endif

                                                        <div class="mt-2">
                                                            <a href="{{ asset('storage/' . $table_detail->kesalahan_bukti_transfer) }}"
                                                                target="_blank"
                                                                class="btn btn-outline-warning btn-sm">
                                                                <i class="fas fa-{{ $isReuploadImage ? 'image' : 'file' }} me-1"></i>
                                                                {{ $isReuploadImage ? 'Lihat Gambar' : 'Lihat File' }} (Upload Ulang)
                                                            </a>

                                                            <a href="{{ asset('storage/' . $table_detail->kesalahan_bukti_transfer) }}"
                                                                download class="btn btn-outline-secondary btn-sm ms-2">
                                                                <i class="fas fa-download me-1"></i>
                                                                Download
                                                            </a>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endif

                        @if (!empty($approval_history) && count($approval_history) > 0)
                            <div class="card mb-4 mt-4">
                                <div class="card-header pb-0">
                                    <div>
                                        <h6 class="mb-0">Riwayat Pengajuan</h6>
                                        <p class="text-sm mb-0 text-muted">Timeline pengajuan</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-3">
                                                        <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-0">
                                                            {{ $history->formatted_created_at ?? \Carbon\Carbon::parse($history->created_at)->format('d M Y, H:i') }}
                                                        </p>
                                                    </div>
                                                    <div class="col-md-6">
                                                        @if (isset($history->clean_action))
                                                            <p class="text-sm mb-1 font-weight-bold text-dark">
                                                                {{ $history->clean_action }}
                                                            </p>
                                                            @if ($history->nomor_pinjaman)
                                                                <p class="text-xs text-muted mb-1">
                                                                    Nomor: {{ $history->nomor_pinjaman }}
                                                                </p>
                                                            @endif
                                                            @if ($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
                                                        @else
                                                            <p class="text-sm mb-0 text-dark">{{ $history->description }}
                                                            </p>
                                                        @endif
                                                    </div>
                                                    <div class="col-md-3 text-end">
                                                        <span class="badge bg-{{ $timelineColor }} badge-sm">
                                                            @if ($timelineColor === 'success')
                                                                Disetujui
                                                            @elseif ($timelineColor === 'danger')
                                                                Ditolak
                                                            @elseif ($timelineColor === 'info')
                                                                Transfer
                                                            @elseif ($timelineColor === 'warning')
                                                                Upload Ulang
                                                            @else
                                                                Pending
                                                            @endif
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    @if (count($approval_history) === 0)
                                        <div class="text-center py-5">
                                            <div class="mb-3">
                                                <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center"
                                                    style="width: 80px; height: 80px;">
                                                    <span class="text-muted" style="font-size: 2rem;">
                                                        <i class="fas fa-history"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <h6 class="text-muted mb-1">Belum ada riwayat approval</h6>
                                            <p class="text-muted text-sm mb-0">Riwayat akan muncul setelah ada aktivitas
                                                approval</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @else
                            <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 pengajuan</p>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="text-center py-5">
                                        <div class="mb-3">
                                            <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center"
                                                style="width: 80px; height: 80px;">
                                                <span class="text-muted" style="font-size: 2rem;">
                                                    <i class="fas fa-history"></i>
                                                </span>
                                            </div>
                                        </div>
                                        <h6 class="text-muted mb-1">Belum ada riwayat approval</h6>
                                        <p class="text-muted text-sm mb-0">Riwayat akan muncul setelah ada aktivitas
                                            approval</p>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @php

                            $anggota = \App\Models\MstAnggota::where('nik', $table_detail->nik)->first();
                            $fotoKtp = $anggota->foto_ktp ?? 'noimage.png';
                        @endphp
                        <div class="card mb-4">
                            <div class="card-header pb-0">
                                <div>
                                    <h6 class="mb-0">Foto KTP Anggota</h6>
                                    <p class="text-sm mb-0 text-muted">
                                        {{ $anggota->nama_lengkap ?? 'Nama tidak ditemukan' }}</p>
                                </div>
                            </div>
                            <div class="card-body">
                                @if ($fotoKtp && $fotoKtp !== 'noimage.png')
                                    <div class="text-center">
                                        <img src="{{ asset('storage/' . $fotoKtp) }}"
                                            alt="Foto KTP {{ $anggota->nama_lengkap ?? 'Anggota' }}"
                                            class="img-fluid rounded border shadow-sm"
                                            style="max-height: 200px; width: auto; cursor: pointer;"
                                            onclick="showImageModal('{{ asset('storage/' . $fotoKtp) }}', 'Foto KTP {{ $anggota->nama_lengkap ?? 'Anggota' }}')">
                                        <div class="mt-3">
                                            <a href="{{ asset('storage/' . $fotoKtp) }}" target="_blank"
                                                class="btn btn-outline-primary btn-sm">
                                                <i class="fas fa-external-link-alt me-1"></i>
                                                Buka di Tab Baru
                                            </a>
                                        </div>
                                    </div>
                                @else
                                    <div class="text-center py-5">
                                        <div class="mb-3">
                                            <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center"
                                                style="width: 80px; height: 80px;">
                                                <span class="text-muted" style="font-size: 2rem;">
                                                    <i class="fas fa-person"></i>
                                                </span>
                                            </div>
                                        </div>
                                        <h6 class="text-muted mb-1">Foto KTP belum tersedia</h6>
                                        <p class="text-muted text-sm mb-0">Anggota belum mengupload foto KTP</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .approval-step {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .approval-step .step-circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #e9ecef;
            color: #6c757d;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .approval-step.active .step-circle {
            background: #0d6efd;
            color: white;
        }

        .approval-step.current .step-circle {
            background: #ffc107;
            color: #000;
            border: 2px solid #ff6b35;
        }

        .approval-step.active.current .step-circle {
            background: #28a745;
            color: white;
        }


        .timeline,
        .timeline-sm {
            position: relative;
        }

        .timeline {
            padding-left: 20px;
        }

        .timeline-sm {
            padding-left: 25px;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(180deg, #0d6efd 0%, #6c757d 100%);
        }

        .timeline-sm::before {
            content: '';
            position: absolute;
            left: 10px;
            top: 0;
            bottom: 0;
            width: 3px;
            border-radius: 2px;
            background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%);
        }

        .timeline-item {
            position: relative;
            margin-bottom: 25px;
            padding-bottom: 20px;
        }

        .timeline-item:last-child {
            margin-bottom: 0;
        }

        .timeline-item.timeline-item-last::after {
            display: none;
        }

        .timeline-marker {
            position: absolute;
            left: -20px;
            top: 5px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 3px solid #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            z-index: 1;
        }

        .timeline-content {
            padding: 15px;
            background: #fff;
            border-radius: 12px;
            border-left: 4px solid #e3f2fd;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .timeline-content:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
            transform: translateY(-2px);
        }


        .image-modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
        }

        .modal-content-image {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            max-height: 80%;
            border-radius: 10px;
        }

        .close-modal {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
        }

        .close-modal:hover,
        .close-modal:focus {
            color: #bbb;
            text-decoration: none;
        }

        .bg-gray-100 {
            background-color: #f8f9fa !important;
            border-left: 3px solid #dee2e6;
        }
    </style>

    {{-- Script untuk Upload Ulang Bukti Transfer --}}
    @push('js')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const enableReuploadCheckbox = document.getElementById('enableReupload');
                const reuploadForm = document.getElementById('reuploadForm');
                const cancelReuploadBtn = document.getElementById('cancelReupload');
                const fileInput = document.getElementById('kesalahan_bukti_transfer');
                const previewImg = document.getElementById('kesalahan_bukti_transferpreview');

                // Toggle form visibility
                if (enableReuploadCheckbox) {
                    enableReuploadCheckbox.addEventListener('change', function() {
                        if (this.checked) {
                            reuploadForm.style.display = 'block';
                        } else {
                            reuploadForm.style.display = 'none';
                            // Reset form
                            if (fileInput) fileInput.value = '';
                            if (previewImg) previewImg.src = '{{ asset("storage/noimage.png") }}';
                        }
                    });
                }

                // Cancel button
                if (cancelReuploadBtn) {
                    cancelReuploadBtn.addEventListener('click', function() {
                        if (enableReuploadCheckbox) enableReuploadCheckbox.checked = false;
                        if (reuploadForm) reuploadForm.style.display = 'none';
                        if (fileInput) fileInput.value = '';
                        if (previewImg) previewImg.src = '{{ asset("storage/noimage.png") }}';
                    });
                }

                // Preview image
                if (fileInput) {
                    fileInput.addEventListener('change', function(e) {
                        const file = e.target.files[0];
                        if (file) {
                            // Validasi ukuran file (max 2MB)
                            if (file.size > 2048 * 1024) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'File Terlalu Besar',
                                    text: 'Ukuran file maksimal 2MB',
                                    confirmButtonColor: '#028284'
                                });
                                fileInput.value = '';
                                if (previewImg) previewImg.src = '{{ asset("storage/noimage.png") }}';
                                return;
                            }

                            // Validasi tipe file
                            const validTypes = ['image/jpeg', 'image/jpg', 'image/png'];
                            if (!validTypes.includes(file.type)) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Format File Tidak Valid',
                                    text: 'Hanya file JPG, JPEG, dan PNG yang diperbolehkan',
                                    confirmButtonColor: '#028284'
                                });
                                fileInput.value = '';
                                if (previewImg) previewImg.src = '{{ asset("storage/noimage.png") }}';
                                return;
                            }

                            // Show preview
                            const reader = new FileReader();
                            reader.onload = function(e) {
                                if (previewImg) previewImg.src = e.target.result;
                            };
                            reader.readAsDataURL(file);
                        } else {
                            if (previewImg) previewImg.src = '{{ asset("storage/noimage.png") }}';
                        }
                    });
                }
            });
        </script>
    @endpush

@endsection
@if ($jsmenu == '1')
    @if (view()->exists("js.{$dmenu}"))
        @push('addjs')
            @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