@props([
    'items' => ['Partner', 'Keuangan', 'Riwayat Penarikan'],
    'title' => 'Riwayat Penarikan Dana',
    'subtitle' => 'Lihat histori penarikan dana Anda di sini',
])
@php
    $feature = getData(); // Dapatkan instance DataFetcher sekali
@endphp

@push('styles')
    <link href="{{ asset('assets/plugins/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet" />
    <style>
        /* Base Card Styles */
        .summary-card {
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            border-radius: .5rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }

        /* Large Card Specific Styles */
        .summary-card.large-card {
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 1rem;
            background-color: #d1ecf1;
            /* Light blue background */
            border-color: #bee5eb;
            /* Light blue border */
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
            height: 100%;
            /* Fill column height */
            justify-content: center;
            /* Vertically center content */
        }

        .summary-card.large-card .icon-circle {
            width: 70px;
            height: 70px;
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .summary-card.large-card .card-title {
            font-size: 1.25rem;
            color: #0c5460;
        }

        .summary-card.large-card .card-text.h3 {
            font-size: 2.5rem;
            font-weight: bold;
            color: #0c5460;
        }

        .summary-card.large-card .card-text.small-desc {
            font-size: 1rem;
            /* Adjust font size for better readability on large card */
            color: #3a8e9e;
            /* Darker blue for description */
        }


        /* Small Card Icon Circle Colors */
        .summary-card .icon-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            color: #ffffff;
            flex-shrink: 0;
        }

        .icon-circle.bg-info-dark {
            background-color: #0d6efd !important;
        }

        /* For balance card */
        .icon-circle.bg-blue {
            background-color: #007bff !important;
        }

        .icon-circle.bg-success {
            background-color: #28a745 !important;
        }

        .icon-circle.bg-danger {
            background-color: #dc3545 !important;
        }

        .icon-circle.bg-secondary {
            background-color: #6c757d !important;
        }

        .icon-circle.bg-primary {
            background-color: #007bff !important;
        }

        .icon-circle.bg-warning-dark {
            background-color: #ffc107 !important;
            color: #343a40 !important;
        }

        /* New color for pending */


        .summary-card .card-title {
            font-size: 1rem;
            color: #6c757d;
            margin-bottom: 0.25rem;
        }

        .summary-card .card-text.h3 {
            font-size: 1.75rem;
            margin-bottom: 0.5rem;
            color: #343a40;
        }

        .summary-card .card-text.small-desc {
            font-size: 0.875rem;
            color: #999;
            margin-bottom: 0;
        }

        /* Filter & Table Specific Styles */
        .filter-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }

        .filter-group .form-control {
            height: calc(1.5em + .75rem + 2px);
        }

        .filter-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .pagination-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
        }

        .pagination-container nav {
            margin-bottom: 0;
        }

        /* Grid for Cards */
        .card-grid-container {
            display: grid;
            grid-template-columns: 1.2fr 2fr;
            /* Sedikit lebih lebar untuk kartu besar, 2 bagian untuk kartu kecil */
            gap: 1rem;
            margin-bottom: 1.5rem;
            align-items: stretch;
            /* Memastikan semua item dalam grid memiliki tinggi yang sama */
        }

        .small-cards-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            /* 2 kolom untuk kartu kecil */
            gap: 1rem;
            /* Remove height: 100%; here to allow natural growth if content is larger */
        }

        @media (max-width: 992px) {

            /* Adjust for smaller screens (Bootstrap's lg breakpoint) */
            .card-grid-container {
                grid-template-columns: 1fr;
                /* Stack cards on smaller screens */
            }

            .small-cards-grid {
                grid-template-columns: 1fr 1fr;
                /* Keep 2 columns for small cards if space allows */
            }
        }

        @media (max-width: 768px) {

            /* Adjust for medium screens (Bootstrap's md breakpoint) */
            .small-cards-grid {
                grid-template-columns: 1fr;
                /* Stack small cards on very small screens */
            }
        }
    </style>
@endpush

@extends('layouts.dashboard.app')

@section('content')
    <x-breadcrumb :items="$items" :title="$title" :subtitle="$subtitle" />

    <div class="card-grid-container">
        {{-- Kartu Besar: Saldo Tersedia untuk Penarikan --}}
        <div>
            <div class="summary-card large-card">
                <div class="icon-circle bg-info-dark">
                    <i class="fa fa-wallet"></i>
                </div>
                <div>
                    <h5 class="card-title">Saldo Tersedia untuk Penarikan</h5>
                    <p class="card-text h3">Rp {{ number_format($availableBalance, 0, ',', '.') }}</p>
                    <p class="card-text small-desc">Dana bersih yang siap Anda tarik ke rekening bank Anda.</p>
                </div>
            </div>
        </div>

        {{-- Grid untuk Kartu-kartu Kecil --}}
        <div class="small-cards-grid">
            <div class="summary-card">
                <div class="icon-circle bg-primary">
                    <i class="fa fa-clipboard-list"></i>
                </div>
                <div>
                    <h5 class="card-title">Total Permintaan Penarikan</h5>
                    <p class="card-text h3">{{ $totalWithdrawalsCount }}</p>
                    <p class="card-text small-desc">Jumlah seluruh permintaan penarikan yang diajukan.</p>
                </div>
            </div>
            <div class="summary-card">
                <div class="icon-circle bg-success">
                    <i class="fa fa-check-circle"></i>
                </div>
                <div>
                    <h5 class="card-title">Jumlah Disetujui</h5>
                    <p class="card-text h3">Rp {{ number_format($approvedWithdrawalsAmount, 0, ',', '.') }}</p>
                    <p class="card-text small-desc">{{ $approvedWithdrawalsCount }} permintaan telah disetujui dan dikirim.
                    </p>
                </div>
            </div>
            <div class="summary-card">
                <div class="icon-circle bg-danger">
                    <i class="fa fa-times-circle"></i>
                </div>
                <div>
                    <h5 class="card-title">Jumlah Ditolak</h5>
                    <p class="card-text h3">Rp {{ number_format($rejectedWithdrawalsAmount, 0, ',', '.') }}</p>
                    <p class="card-text small-desc">{{ $rejectedWithdrawalsCount }} permintaan telah ditolak.</p>
                </div>
            </div>
            <div class="summary-card">
                <div class="icon-circle bg-warning-dark"> {{-- Menggunakan warna berbeda untuk pending --}}
                    <i class="fa fa-hourglass-half"></i>
                </div>
                <div>
                    <h5 class="card-title">Permintaan Pending</h5>
                    <p class="card-text h3">{{ $pendingWithdrawalsCount }}</p>
                    <p class="card-text small-desc">Total permintaan yang sedang dalam proses.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-inverse">
        <div class="panel-heading">
            <h4 class="panel-title">{{ $title ?? '' }}</h4>
            <div class="panel-heading-btn">
                <a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand">
                    <i class="fa fa-expand"></i>
                </a>
                <a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload">
                    <i class="fa fa-redo"></i>
                </a>
            </div>
        </div>
        <div class="panel-body">
            <div class="row align-items-center mb-3">
                <div class="col-md-6">
                    <a href="{{ route('partner.withdrawal.request') }}"
                        class="btn btn-success @disabled(!$feature->can('withdrawal.request'))">
                        <i class="fa fa-hand-holding-usd me-2"></i> AJUKAN PENARIKAN BARU
                    </a>

                </div>
                <div class="col-md-6 text-end">
                    @if ($pendingWithdrawalsCount > 0)
                        <h5 class="mb-0 text-warning">
                            <i class="fa fa-exclamation-circle me-1"></i> **{{ $pendingWithdrawalsCount }} Permintaan
                            Pending**
                            <span class="d-block text-muted small">(Total Rp
                                {{ number_format($totalPendingWithdrawalsAmount, 0, ',', '.') }} sedang diproses)</span>
                        </h5>
                    @endif
                </div>
            </div>

            <form method="GET" action="{{ route('partner.withdrawal.histories') }}" class="mb-4">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label for="filter-status" class="form-label">Filter Status</label>
                        <select name="status" id="filter-status" class="form-control form-control-sm">
                            <option value="">-- Semua Status --</option>
                            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Disetujui
                            </option>
                            <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Ditolak
                            </option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="filter-daterange" class="form-label">Rentang Waktu</label>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                            <input type="text" name="daterange" class="form-control" id="filter-daterange"
                                autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                                value="{{ request('daterange') }}" placeholder="Pilih Rentang Waktu">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary btn-sm me-2">
                            <i class="fa fa-filter me-1"></i> Terapkan Filter
                        </button>
                        <a href="{{ route('partner.withdrawal.histories') }}" class="btn btn-default btn-sm">
                            <i class="fa fa-redo me-1"></i> Reset
                        </a>
                    </div>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th width="1%">#</th>
                            <th>Jumlah Penarikan</th>
                            <th>Status</th>
                            <th>Catatan</th>
                            <th>Tanggal Diajukan</th>
                            <th>Tanggal Disetujui</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($withdrawalHistories as $withdrawal)
                            @php
                                $timezoneMap = [
                                    'wib' => 'Asia/Jakarta',
                                    'wita' => 'Asia/Makassar',
                                    'wit' => 'Asia/Jayapura',
                                ];
                                $tzKey = strtolower($withdrawal->timezone ?? 'wib');
                                $tz = $timezoneMap[$tzKey] ?? 'Asia/Jakarta';

                                $statusBadgeClass = '';
                                switch ($withdrawal->status) {
                                    case 'pending':
                                        $statusBadgeClass = 'bg-warning text-dark';
                                        break;
                                    case 'approved':
                                        $statusBadgeClass = 'bg-success';
                                        break;
                                    case 'rejected':
                                        $statusBadgeClass = 'bg-danger';
                                        break;
                                    default:
                                        $statusBadgeClass = 'bg-secondary';
                                        break;
                                }
                            @endphp
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>Rp {{ number_format($withdrawal->amount, 0, ',', '.') }}</td>
                                <td>
                                    <span class="badge {{ $statusBadgeClass }}">
                                        {{ ucfirst($withdrawal->status) }}
                                    </span>
                                </td>
                                <td>{{ $withdrawal->notes ?? '-' }}</td>
                                <td>
                                    {{ $withdrawal->created_at->setTimezone($tz)->format('d-m-Y H:i') }}
                                    <small class="text-muted">{{ strtoupper($withdrawal->timezone ?? 'WIB') }}</small>
                                </td>
                                <td>
                                    @if ($withdrawal->approved_at)
                                        {{ \Carbon\Carbon::parse($withdrawal->approved_at)->setTimezone($tz)->format('d-m-Y H:i') }}
                                        <small class="text-muted">{{ strtoupper($withdrawal->timezone ?? 'WIB') }}</small>
                                    @else
                                        -
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center text-muted py-4">Belum ada riwayat penarikan dana yang
                                    sesuai dengan filter.</td>
                            </tr>
                        @endforelse
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="1">Total yang Ditampilkan:</th>
                            <th>Rp {{ number_format($totalWithdrawalsAmountInTable, 0, ',', '.') }}</th>
                            <th colspan="2"></th>
                            <th>Total Permintaan (Filter):</th>
                            <th>{{ $withdrawalHistories->total() }}</th> {{-- Menggunakan total dari paginator untuk total di footer tabel --}}
                        </tr>
                    </tfoot>
                </table>
            </div>

            <div class="pagination-container">
                <div>Menampilkan {{ $withdrawalHistories->firstItem() }} hingga {{ $withdrawalHistories->lastItem() }}
                    dari
                    {{ $withdrawalHistories->total() }} riwayat penarikan</div>
                <div>{{ $withdrawalHistories->appends(request()->query())->links() }}</div>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/plugins/moment/min/moment.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <script>
        $(function() {
            $('#filter-daterange').daterangepicker({
                timePicker: false,
                showDropdowns: true,
                autoUpdateInput: false,
                autoApply: false,
                locale: {
                    format: 'YYYY-MM-DD',
                    separator: ' - ',
                    cancelLabel: 'Clear',
                    applyLabel: 'Terapkan',
                    customRangeLabel: 'Custom'
                },
                ranges: {
                    'Hari Ini': [moment(), moment()],
                    'Kemarin': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    '7 Hari Terakhir': [moment().subtract(6, 'days'), moment()],
                    '30 Hari Terakhir': [moment().subtract(29, 'days'), moment()],
                    'Bulan Ini': [moment().startOf('month'), moment().endOf('month')],
                    'Bulan Lalu': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            });

            var initialDateRange = "{{ request('daterange') }}";
            if (initialDateRange) {
                $('#filter-daterange').val(initialDateRange);
            }

            $('#filter-daterange').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format(
                    'YYYY-MM-DD'));
            });

            $('#filter-daterange').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });
        });
    </script>
@endpush