@extends('layouts.admin')
@section('title') Manage Payments @endsection

@section('style')
<style>
    .badge-big {
        font-size: 12px !important;
        padding: 8px 0 !important;
        width: 140px;
        border-radius: 6px;
        font-weight: 700;
        letter-spacing: 0.5px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        text-transform: uppercase;
    }
    
    .btn-view-custom {
        font-size: 13px !important;
        padding: 6px 15px !important;
        border-radius: 50px !important;
        border: 1px solid #343a40 !important; 
        color: #343a40 !important;
        background-color: transparent !important;
        font-weight: 600;
        transition: all 0.3s ease;
        white-space: nowrap;
        outline: none !important;
        box-shadow: none !important;
    }

    .btn-view-custom:hover {
        background-color: #343a40 !important;
        color: #fff !important;
        border: 1px solid #343a40 !important;
    }

    .property-list-table tbody td {
        vertical-align: middle !important;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12 mt-5">
        
        {{-- Large Alert Bar removed from here to hide the 'Black Circle' --}}

        <div class="bg-white card-box table-responsive border-20">
            <table id="dataTable" class="table property-list-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Date Submitted</th>
                        <th>User Details</th>
                        <th>Plan</th>
                        <th>Amount</th>
                        <th>Proof</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @if($payments->count() > 0)
                        @foreach($payments as $pay)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>
                                <div class="fw-bold text-dark" style="font-size: 1.1rem;">
                                    {{ \Carbon\Carbon::parse($pay->created_at)->format('d M Y') }}
                                </div>
                                <div class="text-muted" style="font-size: 0.9rem;">
                                    {{ \Carbon\Carbon::parse($pay->created_at)->format('h:i A') }}
                                </div>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" 
                                         style="width: 50px; height: 50px; font-weight: bold; font-size: 20px;">
                                        {{ strtoupper(substr($pay->user_name, 0, 1)) }}
                                    </div>
                                    <div>
                                        <span class="fw-bold d-block text-dark" style="font-size: 1.1rem;">
                                            {{ $pay->user_name }}
                                        </span>
                                        <span class="text-muted d-block" style="font-size: 0.9rem;">
                                            {{ $pay->email }}
                                        </span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @php $isYearly = $pay->amount > 20; @endphp
                                @if($isYearly)
                                    <span class="badge bg-warning text-dark badge-big">
                                        <i class="fa-regular fa-calendar-check"></i> YEARLY
                                    </span>
                                @else
                                    <span class="badge bg-info text-dark badge-big">
                                        <i class="fa-regular fa-calendar"></i> MONTHLY
                                    </span>
                                @endif
                            </td>
                            <td>
                                <h5 class="mb-0 text-success fw-bold" style="font-size: 1.1rem;">
                                    ${{ number_format($pay->amount, 2) }}
                                </h5>
                            </td>
                            <td>
                                <div style="width: 160px; height: 110px; overflow: hidden; border-radius: 10px; border: 1px solid #ddd; cursor: pointer;">
                                    <img src="{{ asset('uploads/payment_slips/'.$pay->payment_proof) }}" 
                                         class="img-fluid w-100 h-100"
                                         style="object-fit: cover; transition: transform 0.3s ease;"
                                         data-bs-toggle="modal" 
                                         data-bs-target="#slipModal"
                                         onclick="showSlip(this.src)"
                                         onmouseover="this.style.transform='scale(1.1)'"
                                         onmouseout="this.style.transform='scale(1)'">
                                </div>
                            </td>
                            <td>
                                <div class="d-flex gap-2 justify-content-center">
                                    <a href="{{ route('admin.payment.approve', $pay->id) }}" 
                                       class="btn btn-success text-white" 
                                       style="padding: 6px 22px; border-radius: 6px;"
                                       onclick="return confirm('Approve this payment?')">
                                        <i class="fa fa-check"></i>
                                    </a>
                                    <a href="{{ route('admin.payment.reject', $pay->id) }}" 
                                       class="btn btn-danger text-white" 
                                       style="padding: 6px 22px; border-radius: 6px;"
                                       onclick="return confirm('Reject this payment?')">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    @endif
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- MODAL --}}
<div class="modal fade" id="slipModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl"> 
    <div class="modal-content border-20" style="overflow: hidden;">
      <div class="modal-header">
        <h5 class="modal-title">Payment Proof</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center bg-light p-0">
        <img src="" id="modalImage" class="img-fluid" style="width: 100%; max-height: 85vh; object-fit: contain;">
      </div>
    </div>
  </div>
</div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        $('#dataTable').DataTable({
            dom: "<'row'<'col-md-4 col-sm-12'f><'col-md-5 col-sm-12 text-center'B><'col-md-3 col-sm-12'l>>" +
                 "<'row'<'col-12'tr>>" +
                 "<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
            buttons: [
                { extend: 'copy', className: 'btn btn-sm btn-primary' },
                { extend: 'excel', className: 'btn btn-sm btn-primary' },
                { extend: 'pdf', className: 'btn btn-sm btn-primary' },
                { extend: 'print', className: 'btn btn-sm btn-primary' }
            ],
            columnDefs: [
                { orderable: false, targets: [5, 6] }, 
            ],
            order: [[ 1, "desc" ]] 
        });
    });

    function showSlip(imageUrl) {
        document.getElementById('modalImage').src = imageUrl;
    }
</script>
@endsection