@extends('layout.layout')

@section('title', 'Student Freeze/Unfreeze Requests')

@section('content')
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col-12">
                <div class="mb-3">
                    <i class="fas fa-list"></i> Student Freeze/Unfreeze Requests
                </div>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if (session('paypal_url'))
            <div class="card border-primary mb-3" id="paypal-link-card">
                <div class="card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <iconify-icon icon="logos:paypal" class="fs-4"></iconify-icon>
                        <span class="fw-semibold">PayPal Payment Link</span>
                        <span class="badge bg-success ms-1">Ready</span>
                    </div>
                    <p class="text-muted small mb-2">Copy this link and send it to the student to complete payment.</p>
                    <div class="input-group">
                        <input type="text" class="form-control form-control-sm font-monospace"
                            id="paypal-url-input"
                            value="{{ session('paypal_url') }}"
                            readonly>
                        <button class="btn btn-primary btn-sm" type="button" onclick="copyPaypalUrl()">
                            <i class="fas fa-copy" id="copy-icon"></i>
                            <span id="copy-label">Copy</span>
                        </button>
                        <a href="{{ session('paypal_url') }}" target="_blank" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-external-link-alt"></i> Open
                        </a>
                    </div>
                </div>
            </div>
        @endif

        @if ($requests->isEmpty())
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> No requests found
            </div>
        @else
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped">
                            <thead>
                                <tr>
                                    <th>Student Name</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Requested Date</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($requests as $request)
                                    <tr>
                                        <td>
                                            <a href="{{ route('students.show', $request->student->id) }}">
                                                {{ $request->student->full_name ?? '' }}
                                            </a>
                                        </td>
                                        <td>
                                            @if ($request->type === 'freeze')
                                                <span class="badge bg-danger">
                                                    <i class="fas fa-snowflake"></i> Freeze
                                                </span>
                                            @else
                                                <span class="badge bg-success">
                                                    <i class="fas fa-fire"></i> Unfreeze
                                                </span>
                                            @endif
                                        </td>
                                        <td>
                                            @if ($request->status === 'pending')
                                                <span class="badge bg-warning text-dark">
                                                    <i class="fas fa-clock"></i> Pending
                                                </span>
                                            @elseif ($request->status === 'solved')
                                                <span class="badge bg-success">
                                                    <i class="fas fa-check"></i> Solved
                                                </span>
                                            @elseif ($request->status === 'unsolved')
                                                <span class="badge bg-secondary">
                                                    <i class="fas fa-minus"></i> Unsolved
                                                </span>
                                            @endif
                                        </td>
                                        <td>{{ $request->created_at->format('M d, Y - H:i') }}</td>
                                        <td>
                                            <div class="d-flex gap-1 flex-wrap">
                                                <a href="{{ route('admin.student-requests.show', $request->created_by) }}"
                                                    class="btn btn-sm btn-info">
                                                    Details
                                                </a>

                                                @if ($request->admin_id == auth()->id() && $request->status === 'pending')
                                                    @if ($request->type === 'freeze')
                                                        {{-- Generate Invoice button --}}
                                                        <button type="button" class="btn btn-sm btn-success"
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#generateInvoiceModal{{ $request->id }}">
                                                            <i class="fas fa-file-invoice-dollar"></i> Generate Invoice
                                                        </button>
                                                    @endif

                                                    {{-- Mark as Unsolved button --}}
                                                    <button type="button" class="btn btn-sm btn-secondary"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#unsolvedModal{{ $request->id }}">
                                                        <i class="fas fa-times"></i> Not Solved
                                                    </button>
                                                @endif
                                            </div>

                                            {{-- Generate Invoice Modal --}}
                                            @if ($request->admin_id == auth()->id() && $request->status === 'pending' && $request->type === 'freeze')
                                                <div class="modal fade" id="generateInvoiceModal{{ $request->id }}" tabindex="-1"
                                                    aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered">
                                                        <div class="modal-content">
                                                            <form
                                                                action="{{ route('admin.student-requests.generate-invoice', $request->id) }}"
                                                                method="POST"
                                                                class="generate-invoice-form">
                                                                @csrf
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title">
                                                                        <i class="fas fa-file-invoice-dollar text-success me-2"></i>
                                                                        Generate Freeze Invoice
                                                                    </h5>
                                                                    <button type="button" class="btn-close"
                                                                        data-bs-dismiss="modal"></button>
                                                                </div>
                                                                <div class="modal-body">

                                                                    {{-- Student info --}}
                                                                    <div class="alert alert-light border mb-3 py-2">
                                                                        <small class="text-muted d-block">Student</small>
                                                                        <strong>{{ $request->student->full_name ?? '—' }}</strong>
                                                                    </div>

                                                                    {{-- Freeze fee --}}
                                                                    <div class="card border-0 bg-success bg-opacity-10 rounded-3 mb-3 p-3 d-flex flex-row align-items-center justify-content-between">
                                                                        <div>
                                                                            <small class="text-muted d-block">Freeze Fee</small>
                                                                            <span class="fw-bold fs-5 text-success">
                                                                                ${{ number_format($freezePrice, 2) }}
                                                                            </span>
                                                                        </div>
                                                                        <iconify-icon icon="lucide:receipt" class="text-success fs-3"></iconify-icon>
                                                                    </div>

                                                                    {{-- Payment method --}}
                                                                    <div class="mb-3">
                                                                        <label class="form-label fw-semibold small">
                                                                            Payment Method <span class="text-danger">*</span>
                                                                        </label>
                                                                        <select name="payment_type"
                                                                            class="form-select form-select-sm payment-type-select"
                                                                            data-request-id="{{ $request->id }}" required>
                                                                            <option value="">Select payment method</option>
                                                                            <option value="online">Online payment</option>
                                                                            <option value="instapay">Bank transfer / InstaPay</option>
                                                                        </select>
                                                                        <small class="text-muted mt-1 d-block online-note-{{ $request->id }} d-none">
                                                                            <i class="fas fa-info-circle text-primary"></i>
                                                                            Online payment will auto-solve the request immediately.
                                                                        </small>
                                                                    </div>

                                                                    <div class="mb-3 d-none payment-gateway-wrapper-{{ $request->id }}">
                                                                        <label class="form-label fw-semibold small">
                                                                            Payment Gateway
                                                                        </label>
                                                                        <select name="payment_gateway"
                                                                            class="form-select form-select-sm payment-gateway-select-{{ $request->id }}">
                                                                            <option value="">Select payment gateway</option>
                                                                        </select>
                                                                        <small class="text-muted d-block mt-1 payment-gateway-details-{{ $request->id }}"></small>
                                                                    </div>

                                                                    {{-- Treasury (instapay only) --}}
                                                                    <div class="mb-3 d-none treasury-wrapper-{{ $request->id }}">
                                                                        <label class="form-label fw-semibold small">
                                                                            InstaPay Treasury <span class="text-danger">*</span>
                                                                        </label>
                                                                        <select name="treasury_id"
                                                                            class="form-select form-select-sm treasury-select-{{ $request->id }}">
                                                                            <option value="">Select treasury</option>
                                                                        </select>
                                                                        <small class="text-muted d-block mt-1 treasury-details-{{ $request->id }}"></small>
                                                                    </div>

                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary btn-sm"
                                                                        data-bs-dismiss="modal">Cancel</button>
                                                                    <button type="submit" class="btn btn-success btn-sm">
                                                                        <i class="fas fa-file-invoice-dollar"></i> Generate Invoice
                                                                    </button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif

                                            {{-- Unsolved Modal --}}
                                            @if ($request->admin_id == auth()->id() && $request->status === 'pending')
                                                <div class="modal fade" id="unsolvedModal{{ $request->id }}" tabindex="-1"
                                                    aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered">
                                                        <div class="modal-content">
                                                            <form
                                                                action="{{ route('admin.student-requests.update-status', $request->id) }}"
                                                                method="POST">
                                                                @csrf
                                                                @method('PATCH')
                                                                <input type="hidden" name="status" value="unsolved">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title">Mark as Not Solved</h5>
                                                                    <button type="button" class="btn-close"
                                                                        data-bs-dismiss="modal"></button>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <div class="mb-3">
                                                                        <label class="form-label fw-semibold small">
                                                                            Reason <span class="text-danger">*</span>
                                                                        </label>
                                                                        <textarea name="status_note" class="form-control"
                                                                            rows="3" required
                                                                            placeholder="Explain why this request cannot be solved..."></textarea>
                                                                    </div>
                                                                </div>
                                                                <div class="modal-footer">
                                                                    <button type="button" class="btn btn-secondary btn-sm"
                                                                        data-bs-dismiss="modal">Cancel</button>
                                                                    <button type="submit"
                                                                        class="btn btn-secondary btn-sm">Confirm</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@push('scripts')
    <script>
        function copyPaypalUrl() {
            const input = document.getElementById('paypal-url-input');
            if (!input) return;
            navigator.clipboard.writeText(input.value).then(function() {
                document.getElementById('copy-icon').className = 'fas fa-check';
                document.getElementById('copy-label').textContent = 'Copied!';
                setTimeout(function() {
                    document.getElementById('copy-icon').className = 'fas fa-copy';
                    document.getElementById('copy-label').textContent = 'Copy';
                }, 2500);
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            // Load treasuries once and cache
            let treasuries = null;
            let paymentGateways = null;

            async function loadTreasuries() {
                if (treasuries) return treasuries;
                const res = await fetch('{{ route('invoices.instapay_treasuries') }}');
                const data = await res.json();
                treasuries = data.data ?? [];
                return treasuries;
            }

            async function loadPaymentGateways() {
                if (paymentGateways) return paymentGateways;
                const res = await fetch('{{ route('invoices.payment_gateways') }}');
                const data = await res.json();
                paymentGateways = data.data ?? [];
                return paymentGateways;
            }

            function paymentDetailsText(option) {
                if (!option || !option.value) return '';

                return [
                    option.dataset.currency ? `Currency: ${option.dataset.currency}` : '',
                    option.dataset.bankName ? `Bank: ${option.dataset.bankName}` : '',
                    option.dataset.accountNumber ? `Account number: ${option.dataset.accountNumber}` : '',
                ].filter(Boolean).join(' | ');
            }

            function applyPaymentDetails(select, target) {
                if (!select || !target) return;
                target.textContent = paymentDetailsText(select.selectedOptions?.[0]);
            }

            function fillPaymentOption(option, item) {
                option.dataset.currency = item.currency || '';
                option.dataset.bankName = item.bank_name || '';
                option.dataset.accountNumber = item.account_number || '';
            }

            // Handle payment type change for each modal
            document.querySelectorAll('.payment-type-select').forEach(function(select) {
                select.addEventListener('change', async function() {
                    const requestId = this.dataset.requestId;
                    const treasuryWrapper = document.querySelector('.treasury-wrapper-' + requestId);
                    const treasurySelect = document.querySelector('.treasury-select-' + requestId);
                    const treasuryDetails = document.querySelector('.treasury-details-' + requestId);
                    const gatewayWrapper = document.querySelector('.payment-gateway-wrapper-' + requestId);
                    const gatewaySelect = document.querySelector('.payment-gateway-select-' + requestId);
                    const gatewayDetails = document.querySelector('.payment-gateway-details-' + requestId);
                    const onlineNote = document.querySelector('.online-note-' + requestId);

                    if (this.value === 'instapay') {
                        treasuryWrapper.classList.remove('d-none');
                        treasurySelect.setAttribute('required', 'required');
                        gatewayWrapper?.classList.add('d-none');
                        if (gatewaySelect) {
                            gatewaySelect.value = '';
                            gatewaySelect.required = false;
                            applyPaymentDetails(gatewaySelect, gatewayDetails);
                        }
                        onlineNote.classList.add('d-none');

                        // Populate treasuries if empty
                        if (treasurySelect.options.length <= 1) {
                            const list = await loadTreasuries();
                            list.forEach(function(t) {
                                const opt = document.createElement('option');
                                opt.value = t.id;
                                opt.textContent = t.label;
                                fillPaymentOption(opt, t);
                                treasurySelect.appendChild(opt);
                            });
                        }
                        applyPaymentDetails(treasurySelect, treasuryDetails);
                    } else if (this.value === 'online') {
                        treasuryWrapper.classList.add('d-none');
                        treasurySelect.removeAttribute('required');
                        treasurySelect.value = '';
                        applyPaymentDetails(treasurySelect, treasuryDetails);
                        gatewayWrapper?.classList.remove('d-none');
                        if (gatewaySelect) {
                            gatewaySelect.required = true;
                            if (gatewaySelect.options.length <= 1) {
                                const list = await loadPaymentGateways();
                                list.forEach(function(gateway) {
                                    const opt = document.createElement('option');
                                    opt.value = gateway.value;
                                    opt.textContent = gateway.label;
                                    fillPaymentOption(opt, gateway);
                                    gatewaySelect.appendChild(opt);
                                });
                            }
                            applyPaymentDetails(gatewaySelect, gatewayDetails);
                        }
                        onlineNote.classList.remove('d-none');
                    } else {
                        treasuryWrapper.classList.add('d-none');
                        treasurySelect.removeAttribute('required');
                        treasurySelect.value = '';
                        applyPaymentDetails(treasurySelect, treasuryDetails);
                        gatewayWrapper?.classList.add('d-none');
                        if (gatewaySelect) {
                            gatewaySelect.value = '';
                            gatewaySelect.required = false;
                            applyPaymentDetails(gatewaySelect, gatewayDetails);
                        }
                        onlineNote.classList.add('d-none');
                    }
                });
            });

            document.addEventListener('change', function(event) {
                const gatewaySelect = event.target.closest('[class*="payment-gateway-select-"]');
                const treasurySelect = event.target.closest('[class*="treasury-select-"]');

                if (gatewaySelect) {
                    const requestId = gatewaySelect.className.match(/payment-gateway-select-(\d+)/)?.[1];
                    applyPaymentDetails(gatewaySelect, document.querySelector('.payment-gateway-details-' + requestId));
                }

                if (treasurySelect) {
                    const requestId = treasurySelect.className.match(/treasury-select-(\d+)/)?.[1];
                    applyPaymentDetails(treasurySelect, document.querySelector('.treasury-details-' + requestId));
                }
            });
        });
    </script>
@endpush