@extends('layouts.admin')

@section('breadcrumb')
<div class="main-breadcrumb d-flex flex-wrap align-items-center my-4 position-relative gap-3">
    <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-16">Transaction Bulk Transfer</h2>
    <div class="flex-shrink-0">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-end mb-0">
                <li><i class="ri-home-4-line fs-16 me-2 lh-sm text-primary"></i></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Bulk Transfer</li>
            </ol>
        </nav>
    </div>
</div>
@endsection

@section('content')

@if(session('flash_error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="ri-error-warning-line me-2"></i>{{ session('flash_error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif
@if(session('flash_success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="ri-checkbox-circle-line me-2"></i>{!! session('flash_success') !!}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="row justify-content-center">

    @if($deposit_transaction_accounts->count())
    <div class="col-xl-9 col-lg-11">
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-3">Pending Deposit Accounts</h5>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>Currency</th>
                                <th class="text-end">Amount</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>

                        <tbody>
                            @foreach($deposit_transaction_accounts as $account)
                                <tr>
                                    <td>{{ $account->id }}</td>
                                    <td>{{ $account->currency }}</td>
                                    <td class="text-end">
                                        {{ number_format($account->total_amount, 2) }}
                                    </td>
                                    <td class="text-center">
                                        <form method="POST"
                                            action="{{ route('admin.deposit_transaction_accounts.approve', $account->id) }}"
                                            class="approve-form">
                                            @csrf

                                            <button type="submit" class="btn btn-success btn-sm">
                                                <i class="ri-check-line"></i> Approve
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
    @else
        <div class="alert alert-info mt-4">
            No pending deposit accounts found.
        </div>
    @endif
    <div class="col-xl-9 col-lg-11">

        <div class="card mb-4">
            <div class="card-body">

                <div class="row g-3 align-items-end" id="filter-row">

                    <div class="col-md-4">
                        <label class="form-label fw-semibold" for="user_id_select">
                            <i class="ri-user-line me-1 text-primary"></i>User
                        </label>
                        <select id="user_id_select" class="form-select" multiple>
                            @foreach($users as $u)
                                <option value="{{ $u->id }}">
                                    #{{ $u->id }}
                                    @if($u->first_name || $u->last_name)
                                        — {{ trim($u->first_name . ' ' . $u->last_name) }}
                                    @endif
                                    ({{ $u->email }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold" for="from_input">
                            <i class="ri-calendar-line me-1 text-primary"></i>From (IST)
                        </label>
                        <input
                            type="text"
                            id="from_input"
                            class="form-control"
                            placeholder="YYYY-MM-DD HH:MM"
                            value="{{ old('from') }}"
                            autocomplete="off"
                            readonly
                        >
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold" for="to_input">
                            <i class="ri-calendar-check-line me-1 text-primary"></i>To (IST)
                        </label>
                        <input
                            type="text"
                            id="to_input"
                            class="form-control"
                            placeholder="YYYY-MM-DD HH:MM"
                            value="{{ old('to') }}"
                            autocomplete="off"
                            readonly
                        >
                    </div>

                    <div class="col-12 d-flex justify-content-end">
                        <button id="preview-btn" type="button" class="btn btn-primary px-4">
                            <i class="ri-eye-line me-2"></i>Preview Transactions
                        </button>
                    </div>

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

        <div id="preview-card" class="card mb-4" style="display:none;">
            <div class="card-body">
                <div class="row g-3" id="preview-stats">
                    <div class="col-md-4">
                        <div class="rounded-3 p-4 text-center" style="background:var(--bs-primary-bg-subtle, #e8f4fd);">
                            <i class="ri-exchange-dollar-line fs-28 text-primary mb-2 d-block"></i>
                            <div class="fs-12 text-muted mb-1 text-uppercase fw-semibold">Total Sending Amount</div>
                            <div class="fs-22 fw-bold text-primary" id="stat-sending">—</div>
                            <div class="fs-11 text-muted">USD</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="rounded-3 p-4 text-center" style="background:var(--bs-success-bg-subtle, #e8f9ee);">
                            <i class="ri-currency-line fs-28 text-success mb-2 d-block"></i>
                            <div class="fs-12 text-muted mb-1 text-uppercase fw-semibold">Total Recipient Amount</div>
                            <div class="fs-22 fw-bold text-success" id="stat-recipient">—</div>
                            <div class="fs-11 text-muted">INR</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="rounded-3 p-4 text-center" style="background:var(--bs-warning-bg-subtle, #fff8e1);">
                            <i class="ri-list-check-3 fs-28 text-warning mb-2 d-block"></i>
                            <div class="fs-12 text-muted mb-1 text-uppercase fw-semibold">No. of Transactions</div>
                            <div class="fs-22 fw-bold text-warning" id="stat-count">—</div>
                            <div class="fs-11 text-muted">records</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="proceed-card" class="card" style="display:none;">
            <div class="card-body">

                <form id="proceed-form"
                      action="{{ route('admin.transaction_bulk_transfer.proceed') }}"
                      method="POST">
                    @csrf

                    <input type="hidden" name="from"     id="hidden_from">
                    <input type="hidden" name="to"       id="hidden_to">

                    <div class="row g-3 align-items-end">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold" for="limit_amount">
                                <i class="ri-money-dollar-circle-line me-1 text-danger"></i>
                                Amount to Transfer (USD)
                            </label>
                            <div class="input-group">
                                <span class="input-group-text">USD</span>
                                <input
                                    type="number"
                                    name="limit_amount"
                                    id="limit_amount"
                                    class="form-control @error('limit_amount') is-invalid @enderror"
                                    placeholder="e.g. 600000"
                                    min="0.01"
                                    step="0.01"
                                    value="{{ old('limit_amount') }}"
                                    required
                                >
                                @error('limit_amount')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6 d-flex align-items-end">
                            <div class="w-100">
                                <button type="submit" id="proceed-btn" class="btn btn-danger w-100">
                                    <i class="ri-send-plane-line me-2"></i>Proceed — Transfer Now
                                </button>
                            </div>
                        </div>
                    </div>

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

    </div>
</div>

@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    new AirDatepicker('#from_input', {
        locale: {
            days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
            daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            months: [
                'January', 'February', 'March', 'April', 'May', 'June',
                'July', 'August', 'September', 'October', 'November', 'December'
            ],
            monthsShort: [
                'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
            ],
            today: 'Today',
            clear: 'Clear',
            dateFormat: 'yyyy-MM-dd',
            timeFormat: 'HH:mm',
            firstDay: 0
        },
        timepicker: true,
        autoClose: true
    });

    new AirDatepicker('#to_input', {
        locale: {
            days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
            daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            months: [
                'January', 'February', 'March', 'April', 'May', 'June',
                'July', 'August', 'September', 'October', 'November', 'December'
            ],
            monthsShort: [
                'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
            ],
            today: 'Today',
            clear: 'Clear',
            dateFormat: 'yyyy-MM-dd',
            timeFormat: 'HH:mm',
            firstDay: 0
        },
        timepicker: true,
        autoClose: true
    });

    const userEl = document.getElementById('user_id_select');

    const previewBtn   = document.getElementById('preview-btn');
    const previewCard  = document.getElementById('preview-card');
    const proceedCard  = document.getElementById('proceed-card');

    const statSending   = document.getElementById('stat-sending');
    const statRecipient = document.getElementById('stat-recipient');
    const statCount     = document.getElementById('stat-count');

    const hiddenUserIds = document.getElementById('hidden_user_ids');
    const hiddenFrom   = document.getElementById('hidden_from');
    const hiddenTo     = document.getElementById('hidden_to');
    const userChoices = new Choices(userEl, {
        removeItemButton: true,
        searchEnabled: true,
        itemSelectText: '',
        shouldSort: false,
        placeholder: true,
        placeholderValue: 'All Users'
    });

    previewBtn.addEventListener('click', function () {
        const userIds = userChoices.getValue(true);
        const from   = document.getElementById('from_input').value.trim();
        const to     = document.getElementById('to_input').value.trim();


        if (!from) {
            alert('Please select a From date/time.');
            return;
        }
        if (!to) {
            alert('Please select a To date/time.');
            return;
        }

        previewBtn.disabled = true;
        previewBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Loading...';

        fetch('{{ route("admin.transaction_bulk_transfer.preview") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content
                    || '{{ csrf_token() }}'
            },
            body: JSON.stringify({  user_ids: userIds, from: from, to: to })
        })
        .then(r => r.json())
        .then(data => {

            previewBtn.disabled = false;
            previewBtn.innerHTML = '<i class="ri-eye-line me-2"></i>Preview Transactions';

            if (!data.success) {
                alert('Error: ' + (data.message || 'Unknown error'));
                return;
            }

            statSending.textContent   = data.total_sending_amount;
            statRecipient.textContent = data.total_recipient_amount;
            statCount.textContent     = data.transaction_count;

            document.querySelectorAll('.hidden-user-id').forEach(el => el.remove());

            userIds.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'user_ids[]';
                input.value = id;
                input.classList.add('hidden-user-id');
                proceedForm.appendChild(input);
            });
            hiddenFrom.value   = from;
            hiddenTo.value     = to;

            previewCard.style.display = '';
            proceedCard.style.display = '';

            previewCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
        })
        .catch(err => {
            previewBtn.disabled = false;
            previewBtn.innerHTML = '<i class="ri-eye-line me-2"></i>Preview Transactions';
            alert('Request failed: ' + err.message);
        });
    });
const commonAlertOptions = {
    customClass: {
        confirmButton: 'btn btn-danger',
        cancelButton: 'btn btn-secondary'
    },
    buttonsStyling: false
};

const proceedForm = document.getElementById('proceed-form');

if (proceedForm) {
    proceedForm.addEventListener('submit', function (e) {

        e.preventDefault();

        const amount = parseFloat(document.getElementById('limit_amount').value);

        if (isNaN(amount) || amount <= 0) {
            Swal.fire({
                icon: 'warning',
                title: 'Invalid Amount',
                text: 'Please enter a valid amount greater than 0.',
                confirmButtonText: 'OK',
                customClass: {
                    confirmButton: 'btn btn-primary'
                },
                buttonsStyling: false
            });
            return;
        }

        Swal.fire({
            title: 'Proceed with Bulk Transfer?',
            html: `
                <div class="text-start">
                    <p>You are about to transfer transactions up to:</p>

                    <h4 class="text-danger mb-3">
                        USD ${amount.toLocaleString('en-US', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        })}
                    </h4>
                </div>
            `,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Proceed',
            cancelButtonText: 'Cancel',
            reverseButtons: true,
            ...commonAlertOptions
        }).then((result) => {
            if (result.isConfirmed) {
                proceedForm.submit();
            }
        });
    });
}

        document.querySelectorAll('.approve-form').forEach(form => {
            form.addEventListener('submit', function (e) {
                e.preventDefault();

                Swal.fire({
                    title: 'Approve Deposit Account?',
                    text: 'This action will approve the selected deposit account.',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, Approve',
                    cancelButtonText: 'Cancel',
                    reverseButtons: true,
                    customClass: {
                        confirmButton: 'btn btn-success',
                        cancelButton: 'btn btn-secondary'
                    },
                    buttonsStyling: false
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
});
</script>
@endsection