@extends('admin.layouts.app')

@section('title', 'Withdrawals')

@section('content')

    <div class="container-fluid">

        <div class="py-3 d-flex justify-content-between align-items-center">

            <div>
                <h4 class="fs-18 fw-semibold mb-0">
                    Withdrawals
                </h4>
            </div>
            <div class="d-flex gap-2">

                {{-- Excel --}}
                <a href="{{ route('admin.export.excel') }}" class="btn btn-success">

                    <i class="mdi mdi-file-excel-box me-1"></i>
                    Export Excel

                </a>

                {{-- PDF --}}
                <a href="{{ route('admin.export.pdf') }}" class="btn btn-danger">

                    <i class="mdi mdi-file-pdf-box me-1"></i>
                    Export PDF

                </a>

            </div>

        </div>


        <div class="card">

            <div class="card-body">

                {{-- Success Message --}}
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}

                        <button type="button" class="btn-close" data-bs-dismiss="alert">
                        </button>
                    </div>
                @endif


                {{-- Error Message --}}
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}

                        <button type="button" class="btn-close" data-bs-dismiss="alert">
                        </button>
                    </div>
                @endif


                <div class="table-responsive">

                    <table class="table table-bordered align-middle datatable">

                        <thead>

                            <tr>
                                <th width="50">#</th>
                                <th>User</th>
                                <th>Amount</th>
                                <th>Method</th>
                                <th>Payment Details</th>
                                <th>Requested On</th>
                                <th>Status</th>
                                <th width="180" class="text-center">
                                    Action
                                </th>
                            </tr>

                        </thead>


                        <tbody>

                            @forelse ($withdrawals as $index => $withdrawal)

                                @php
                                    $details = $withdrawal->payment_details ?? [];
                                @endphp


                                <tr>

                                    {{-- # --}}
                                    <td>
                                        {{ $withdrawals->firstItem() + $loop->index }}
                                    </td>


                                    {{-- User --}}
                                    <td>

                                        <strong>
                                            {{ $withdrawal->user->name ?? 'Unknown' }}
                                        </strong>

                                        <br>

                                        <small class="text-muted">
                                            {{ $withdrawal->user->email ?? '' }}
                                        </small>

                                    </td>


                                    {{-- Amount --}}
                                    <td>

                                        <strong class="text-success">
                                            ₹{{ number_format($withdrawal->amount, 2) }}
                                        </strong>

                                    </td>


                                    {{-- Payment Method --}}
                                    <td>

                                        @if ($withdrawal->payment_method === 'UPI')
                                            <span class="badge bg-info">
                                                UPI
                                            </span>
                                        @else
                                            <span class="badge bg-primary">
                                                Bank Transfer
                                            </span>
                                        @endif

                                    </td>


                                    {{-- Payment Details --}}
                                    <td>

                                        @if ($withdrawal->payment_method === 'UPI')
                                            {{-- UPI ID --}}
                                            <div class="mb-2">

                                                <strong class="d-block">
                                                    UPI ID
                                                </strong>

                                                <span>
                                                    {{ $details['upi_id'] ?? 'N/A' }}
                                                </span>

                                            </div>


                                            {{-- QR Code --}}
                                            <div>

                                                <strong class="d-block mb-1">
                                                    QR Code
                                                </strong>

                                                @if (!empty($details['upi_qr']))
                                                    <a href="{{ asset('storage/' . $details['upi_qr']) }}"
                                                        class="qr-preview"
                                                        data-image="{{ asset('storage/' . $details['upi_qr']) }}"
                                                        data-bs-toggle="modal" data-bs-target="#qrModal">

                                                        <img src="{{ asset('storage/' . $details['upi_qr']) }}"
                                                            alt="UPI QR Code" width="70" height="70"
                                                            style="object-fit: cover; border-radius: 8px; border: 1px solid #ddd; padding: 3px; background: #fff;">

                                                    </a>
                                                @else
                                                    <span class="text-muted">
                                                        QR not available
                                                    </span>
                                                @endif

                                            </div>
                                        @elseif($withdrawal->payment_method === 'Bank Transfer')
                                            {{-- Account Holder --}}
                                            <div class="mb-1">
                                                <strong>Holder:</strong>
                                                {{ $details['account_holder_name'] ?? 'N/A' }}
                                            </div>


                                            {{-- Account Number --}}
                                            <div class="mb-1">
                                                <strong>Account:</strong>
                                                {{ $details['account_number'] ?? 'N/A' }}
                                            </div>


                                            {{-- IFSC --}}
                                            <div class="mb-1">
                                                <strong>IFSC:</strong>
                                                {{ $details['ifsc'] ?? 'N/A' }}
                                            </div>


                                            {{-- Branch --}}
                                            <div>
                                                <strong>Branch:</strong>
                                                {{ $details['branch'] ?? 'N/A' }}
                                            </div>
                                            <div>

                                                <strong class="d-block mb-1">
                                                    QR Code
                                                </strong>

                                                @if (!empty($details['passbook_image']))
                                                    <a href="{{ asset('storage/' . $details['passbook_image']) }}"
                                                        class="passbook-preview"
                                                        data-image="{{ asset('storage/' . $details['passbook_image']) }}"
                                                        data-bs-toggle="modal" data-bs-target="#passbookModal">

                                                        <img src="{{ asset('storage/' . $details['passbook_image']) }}"
                                                            alt="UPI QR Code" width="70" height="70"
                                                            style="object-fit: cover; border-radius: 8px; border: 1px solid #ddd; padding: 3px; background: #fff;">

                                                    </a>
                                                @else
                                                    <span class="text-muted">
                                                        passbook image not available
                                                    </span>
                                                @endif

                                            </div>
                                        @else
                                            <span class="text-muted">
                                                No payment details available.
                                            </span>
                                        @endif

                                    </td>


                                    {{-- Requested On --}}
                                    <td>

                                        {{ $withdrawal->created_at->format('d M Y') }}

                                        <br>

                                        <small class="text-muted">
                                            {{ $withdrawal->created_at->format('h:i A') }}
                                        </small>

                                    </td>


                                    {{-- Status --}}
                                    <td>

                                        @if ($withdrawal->status == 'pending')
                                            <span class="badge bg-warning">
                                                Pending
                                            </span>
                                        @elseif ($withdrawal->status == 'approved')
                                            <span class="badge bg-success">
                                                Approved
                                            </span>
                                        @elseif ($withdrawal->status == 'paid')
                                            <span class="badge bg-primary">
                                                Paid
                                            </span>
                                        @elseif ($withdrawal->status == 'rejected')
                                            <span class="badge bg-danger">
                                                Rejected
                                            </span>
                                        @endif

                                    </td>



                                    {{-- Action --}}
                                    <td class="text-center">


                                        @if ($withdrawal->status == 'pending')
                                            {{-- Approve --}}
                                            <form action="{{ route('admin.withdrawal.update', $withdrawal->id) }}"
                                                method="POST" style="display:inline-block;">

                                                @csrf
                                                @method('PUT')

                                                <input type="hidden" name="status" value="approved">

                                                <button type="submit" class="btn btn-sm btn-success"
                                                    onclick="return confirm('Are you sure you want to approve this withdrawal?')">
                                                    <i class="mdi mdi-check"></i>
                                                    Approve
                                                </button>

                                            </form>


                                            {{-- Reject --}}
                                            <form action="{{ route('admin.withdrawal.update', $withdrawal->id) }}"
                                                method="POST" style="display:inline-block;">

                                                @csrf
                                                @method('PUT')

                                                <input type="hidden" name="status" value="rejected">

                                                <button type="submit" class="btn btn-sm btn-danger"
                                                    onclick="return confirm('Are you sure you want to reject this withdrawal?')">
                                                    <i class="mdi mdi-close"></i>
                                                    Reject
                                                </button>

                                            </form>
                                        @elseif ($withdrawal->status == 'approved' || 'paid')
                                            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                                data-bs-target="#withdrawalActionModal{{ $withdrawal->id }}">

                                                <i class="mdi mdi-message-text-outline"></i>
                                                Action

                                            </button>
                                            <button type="button" class="btn btn-sm btn-primary view-withdrawal"
                                                data-withdrawal-id="{{ $withdrawal->id }}" data-bs-toggle="modal"
                                                data-bs-target="#withdrawalViewModal">

                                                <i class="mdi mdi-eye"></i>
                                            </button>
                                        @elseif ($withdrawal->status == 'rejected')
                                            <span
                                                class="badge bg-danger-subtle text-danger border border-danger-subtle rounded-pill px-3 py-2">

                                                <i class="mdi mdi-close-circle-outline me-1"></i>

                                                Rejected

                                            </span>
                                        @endif

                                    </td>

                                </tr>

                            @empty

                                <tr>

                                    <td colspan="8" class="text-center py-4">

                                        No withdrawals requested yet.

                                    </td>

                                </tr>

                            @endforelse

                        </tbody>

                    </table>

                    {{-- Pagination --}}
                    <div class="mt-3">
                        {{ $withdrawals->links() }}
                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- Action Modals --}}
    @foreach ($withdrawals as $withdrawal)
        @if ($withdrawal->status == 'approved')
            <div class="modal fade" id="withdrawalActionModal{{ $withdrawal->id }}" tabindex="-1" aria-hidden="true">

                <div class="modal-dialog modal-dialog-centered">

                    <div class="modal-content border-0 shadow-lg rounded-4">

                        <div class="modal-header border-0">

                            <div>

                                <h5 class="modal-title fw-bold">
                                    Withdrawal Action
                                </h5>

                                <small class="text-muted">
                                    Withdrawal #{{ $withdrawal->id }}
                                    —
                                    ₹{{ number_format($withdrawal->amount, 2) }}
                                </small>

                            </div>

                            <button type="button" class="btn-close" data-bs-dismiss="modal">
                            </button>

                        </div>

                        <form action="{{ route('admin.withdrawal.action.store', $withdrawal->id) }}" method="POST"
                            enctype="multipart/form-data">

                            @csrf

                            <div class="modal-body p-4">

                                <div class="mb-4">

                                    <label class="form-label fw-semibold">
                                        Admin Remark
                                    </label>

                                    <textarea name="message" class="form-control rounded-3" rows="4" placeholder="Write a remark for the user..."></textarea>

                                    <small class="text-muted">
                                        This message will be visible to the user.
                                    </small>

                                </div>

                                <div class="mb-3">

                                    <label class="form-label fw-semibold">
                                        Upload Document
                                    </label>

                                    <input type="file" name="document" class="form-control rounded-3"
                                        accept=".jpg,.jpeg,.png,.pdf">

                                    <small class="text-muted">
                                        JPG, JPEG, PNG or PDF. Maximum 2 MB.
                                    </small>

                                </div>

                            </div>

                            <div class="modal-footer border-0">

                                <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">

                                    Cancel

                                </button>

                                <button type="submit" class="btn btn-primary rounded-pill px-4">

                                    <i class="mdi mdi-send me-1"></i>
                                    Submit Action

                                </button>

                            </div>

                        </form>

                    </div>

                </div>

            </div>
        @endif
    @endforeach

    {{-- view qr image modal --}}
    <div class="modal fade" id="qrModal" tabindex="-1" aria-labelledby="qrModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content rounded-4 border-0 shadow">

                <div class="modal-header">

                    <h5 class="modal-title" id="qrModalLabel">

                        UPI QR Code

                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>

                </div>


                <div class="modal-body text-center p-4">

                    <img id="qrModalImage" src="" alt="UPI QR Code" class="img-fluid"
                        style="max-width: 350px; max-height: 350px; object-fit: contain;">

                </div>

            </div>

        </div>

    </div>
    {{-- view passbook image modal --}}
    <div class="modal fade" id="passbookModal" tabindex="-1" aria-labelledby="passbookModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content rounded-4 border-0 shadow">

                <div class="modal-header">

                    <h5 class="modal-title" id="passbookModalLabel">

                        Bank Passbook Image

                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>

                </div>


                <div class="modal-body text-center p-4">

                    <img id="passbookModalImage" src="" alt="UPI QR Code" class="img-fluid"
                        style="max-width: 350px; max-height: 350px; object-fit: contain;">

                </div>

            </div>

        </div>

    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const qrLinks = document.querySelectorAll('.qr-preview');
            const passbookLinks = document.querySelectorAll('.passbook-preview');

            const qrModalImage = document.getElementById('qrModalImage');
            const passbookModalImage = document.getElementById('passbookModalImage');


            qrLinks.forEach(function(link) {

                link.addEventListener('click', function() {

                    const imageUrl = this.getAttribute('data-image');

                    qrModalImage.src = imageUrl;

                });

            });
            passbookLinks.forEach(function(link) {

                link.addEventListener('click', function() {

                    const imageUrl = this.getAttribute('data-image');

                    passbookModalImage.src = imageUrl;

                });

            });

        });
    </script>

    {{-- view action modal  --}}
    <div class="modal fade" id="withdrawalViewModal" tabindex="-1" aria-labelledby="withdrawalViewModalLabel"
        aria-hidden="true">

        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">

            <div class="modal-content border-0 shadow-lg rounded-4">

                <div class="modal-header bg-primary text-white border-0">

                    <div>
                        <h5 class="modal-title" id="withdrawalViewModalLabel">
                            <i class="mdi mdi-eye-outline me-1"></i>
                            Withdrawal Details
                        </h5>

                        <small class="opacity-75">
                            Admin remarks & actions
                        </small>
                    </div>

                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal">
                    </button>

                </div>

                <div class="modal-body p-4">

                    <div id="withdrawalModalContent">

                        <div class="text-center py-5">

                            <div class="spinner-border text-primary"></div>

                            <div class="mt-2 text-muted">
                                Loading withdrawal details...
                            </div>

                        </div>

                    </div>

                </div>

                <div class="modal-footer border-0 bg-light">

                    <button type="button" class="btn btn-secondary rounded-pill px-4" data-bs-dismiss="modal">

                        <i class="mdi mdi-close me-1"></i>
                        Close

                    </button>

                </div>

            </div>

        </div>

    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <script>
        $(document).on('click', '.view-withdrawal', function() {

            let withdrawalId = $(this).data('withdrawal-id');

            console.log('Withdrawal ID:', withdrawalId);

            $('#withdrawalModalContent').html(`
        <div class="text-center py-5">

            <div class="spinner-border text-primary"></div>

            <div class="mt-2 text-muted">
                Loading withdrawal details...
            </div>

        </div>
    `);

            $.ajax({

                url: "{{ route('dashboard.withdrawals.ajax') }}",

                type: "GET",

                data: {
                    withdrawal_id: withdrawalId
                },

                success: function(response) {

                    console.log('Response:', response);

                    if (response.success) {

                        $('#withdrawalModalContent').html(response.html);

                    } else {

                        $('#withdrawalModalContent').html(`
                    <div class="alert alert-warning">
                        ${response.message ?? 'No data found.'}
                    </div>
                `);

                    }

                },

                error: function(xhr) {

                    console.log('AJAX Error:', xhr);
                    console.log('Response:', xhr.responseText);

                    $('#withdrawalModalContent').html(`
                <div class="alert alert-danger">
                    Unable to load withdrawal details.
                </div>
            `);

                }

            });

        });
    </script>

    {{-- to update withdrawal status js --}}
    <script>
        $(document).on('change', '.withdrawal-status', function() {

            let select = $(this);

            let withdrawalId = select.data('withdrawal-id');

            let status = select.val();

            let oldStatus = select.data('old-status');

            if (!confirm('Are you sure you want to change the withdrawal status to "' +
                    status.toUpperCase() + '"?')) {

                select.val(oldStatus);

                return;
            }

            select.prop('disabled', true);

            $.ajax({

                url: "{{ url('/withdrawals') }}/" + withdrawalId + "/status",

                type: "PUT",

                data: {

                    _token: "{{ csrf_token() }}",

                    status: status

                },

                success: function(response) {

                    if (response.success) {

                        select.data('old-status', response.status);

                        alert(response.message);

                    } else {

                        alert('Unable to update status.');

                        select.val(oldStatus);
                    }

                },

                error: function(xhr) {

                    console.log(xhr.responseText);

                    alert(
                        xhr.responseJSON?.message ??
                        'Something went wrong while updating status.'
                    );

                    select.val(oldStatus);

                },

                complete: function() {

                    select.prop('disabled', false);

                }

            });

        });
    </script>



@endsection