@extends('layout.layout')

@section('content')
    <div class="container-fluid">

        @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

        <div class="card mb-3">
            <div class="card-body">
                <p class="mb-1 text-muted small">Student</p>
                <a href="{{ route('students.show', $student->id) }}" class="fw-semibold">
                    {{ $student->full_name ?? '' }}
                </a>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                @if ($requests->isEmpty())
                    <div class="card">
                        <div class="card-body text-center py-5">
                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No freeze/unfreeze requests found for this student</p>
                        </div>
                    </div>
                @else
                    <div class="card">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                            <span>All Requests ({{ $requests->total() }})</span>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <th style="width:80px">#</th>
                                            <th>Type</th>
                                            <th>Subject</th>
                                            <th>Description</th>
                                            <th>Status</th>
                                            <th>Priority</th>
                                            <th>Date</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($requests as $req)
                                            @php
                                                $latestStudentVisibleNote = $req->notes->firstWhere('show_to_student', true);
                                            @endphp
                                            <tr>
                                                <td><span class="badge bg-secondary">{{ $req->id }}</span></td>
                                                <td>
                                                    @if ($req->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><strong>{{ $req->subject }}</strong></td>
                                                <td>
                                                    <small class="text-muted">{{ Str::limit($req->description, 50) }}</small>
                                                    @if ($req->status === 'unsolved' && $req->status_note)
                                                        <div class="mt-1">
                                                            <small class="text-danger">
                                                                <strong>Reason:</strong> {{ $req->status_note }}
                                                            </small>
                                                        </div>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if ($req->status === 'pending')
                                                        <span class="badge bg-warning text-dark">
                                                            <i class="fas fa-clock"></i> Pending
                                                        </span>
                                                    @elseif ($req->status === 'solved')
                                                        <span class="badge bg-success">
                                                            <i class="fas fa-check"></i> Solved
                                                        </span>
                                                    @elseif ($req->status === 'unsolved')
                                                        <span class="badge bg-secondary">
                                                            <i class="fas fa-minus"></i> Unsolved
                                                        </span>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if ($req->priority === 'high')
                                                        <span class="badge bg-danger">High</span>
                                                    @elseif ($req->priority === 'medium')
                                                        <span class="badge bg-warning text-dark">Medium</span>
                                                    @else
                                                        <span class="badge bg-info">Low</span>
                                                    @endif
                                                </td>
                                                <td><small>{{ $req->created_at->format('M d, Y') }}</small></td>
                                                <td>
                                                    @if ($req->admin_id == auth()->id() && $req->status === 'pending')
                                                        <div class="d-flex gap-1 flex-wrap">
                                                            @if ($req->type === 'freeze')
                                                                <button
                                                                    type="button"
                                                                    class="btn btn-sm btn-success"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#generateInvoiceModal{{ $req->id }}"
                                                                >
                                                                    <i class="fas fa-file-invoice-dollar"></i> Generate Invoice
                                                                </button>
                                                            @endif

                                                            <button
                                                                type="button"
                                                                class="btn btn-sm btn-secondary"
                                                                data-bs-toggle="modal"
                                                                data-bs-target="#unsolvedModal{{ $req->id }}"
                                                            >
                                                                <i class="fas fa-times"></i> Not Solved
                                                            </button>

                                                            <button
                                                                type="button"
                                                                class="btn btn-sm btn-outline-primary"
                                                                data-bs-toggle="collapse"
                                                                data-bs-target="#studentVisibleReply{{ $req->id }}"
                                                                aria-expanded="false"
                                                                aria-controls="studentVisibleReply{{ $req->id }}"
                                                                @disabled(!$latestStudentVisibleNote)
                                                            >
                                                                <i class="fas fa-eye"></i> &#1573;&#1592;&#1607;&#1575;&#1585; &#1570;&#1582;&#1585; &#1585;&#1583; &#1604;&#1604;&#1591;&#1575;&#1604;&#1576;
                                                            </button>
                                                        </div>

                                                        @if ($req->type === 'freeze')
                                                            <div class="modal fade" id="generateInvoiceModal{{ $req->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', $req->id) }}" method="POST">
                                                                            @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">
                                                                                <div class="alert alert-light border mb-3 py-2">
                                                                                    <small class="text-muted d-block">Student</small>
                                                                                    <strong>{{ $student->full_name ?? '-' }}</strong>
                                                                                </div>

                                                                                <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>

                                                                                <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="{{ $req->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-none online-note-{{ $req->id }}">
                                                                                        <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-{{ $req->id }}">
                                                                                    <label class="form-label fw-semibold small">
                                                                                        Payment Gateway
                                                                                    </label>
                                                                                    <select name="payment_gateway" class="form-select form-select-sm payment-gateway-select-{{ $req->id }}">
                                                                                        <option value="">Select payment gateway</option>
                                                                                    </select>
                                                                                    <small class="text-muted d-block mt-1 payment-gateway-details-{{ $req->id }}"></small>
                                                                                </div>

                                                                                <div class="mb-3 d-none treasury-wrapper-{{ $req->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-{{ $req->id }}">
                                                                                        <option value="">Select treasury</option>
                                                                                    </select>
                                                                                    <small class="text-muted d-block mt-1 treasury-details-{{ $req->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

                                                        <div class="modal fade" id="unsolvedModal{{ $req->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', $req->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>
                                                    @else
                                                        -
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr class="bg-light">
                                                <td colspan="8">
                                                    <div class="py-2 d-flex flex-column gap-3">
                                                        @if ($latestStudentVisibleNote)
                                                            <div class="collapse" id="studentVisibleReply{{ $req->id }}">
                                                                <div class="border rounded bg-white p-3">
                                                                    <div class="d-flex flex-wrap justify-content-between gap-2 mb-2">
                                                                        <div class="fw-semibold text-primary">&#1570;&#1582;&#1585; &#1585;&#1583; &#1592;&#1575;&#1607;&#1585; &#1604;&#1604;&#1591;&#1575;&#1604;&#1576;</div>
                                                                        <div class="text-muted small">
                                                                            {{ $latestStudentVisibleNote->staff?->full_name ?: 'N/A' }}
                                                                            -
                                                                            {{ $latestStudentVisibleNote->created_at?->format('Y-m-d H:i') }}
                                                                        </div>
                                                                    </div>
                                                                    <div>{{ $latestStudentVisibleNote->content }}</div>
                                                                </div>
                                                            </div>
                                                        @endif

                                                        <div class="border rounded bg-white p-3">
                                                            <div class="d-flex flex-wrap justify-content-between gap-2 mb-3">
                                                                <div class="fw-semibold">Notes</div>
                                                                <div class="text-muted small">{{ $req->notes->count() }} note(s)</div>
                                                            </div>

                                                            <form action="{{ route('notes.store') }}" method="POST" class="mb-3">
                                                                @csrf
                                                                <input type="hidden" name="noteable_id" value="{{ $req->id }}">
                                                                <input type="hidden" name="noteable_type" value="{{ get_class($req) }}">

                                                                <div class="mb-2">
                                                                    <textarea
                                                                        name="content"
                                                                        rows="3"
                                                                        class="form-control"
                                                                        placeholder="Add note..."
                                                                        required
                                                                    >{{ old('noteable_id') == $req->id ? old('content') : '' }}</textarea>
                                                                </div>

                                                                <div class="d-flex flex-wrap justify-content-between gap-3 align-items-center">
                                                                    <label class="form-check-label d-flex align-items-center gap-2">
                                                                        <input
                                                                            type="checkbox"
                                                                            name="show_to_student"
                                                                            value="1"
                                                                            class="form-check-input"
                                                                            @checked(old('noteable_id') == $req->id && old('show_to_student'))
                                                                        >
                                                                        <span>&#1578;&#1592;&#1607;&#1585; &#1604;&#1604;&#1591;&#1575;&#1604;&#1576;</span>
                                                                    </label>

                                                                    <button type="submit" class="btn btn-primary btn-sm">
                                                                        <i class="fas fa-plus"></i> Add Note
                                                                    </button>
                                                                </div>
                                                            </form>

                                                            @forelse ($req->notes as $note)
                                                                <div class="border-top pt-3 mt-3">
                                                                    <div class="d-flex flex-wrap justify-content-between gap-2 mb-2">
                                                                        <div class="d-flex flex-wrap gap-2 align-items-center">
                                                                            <span class="fw-semibold">{{ $note->staff?->full_name ?: 'N/A' }}</span>
                                                                            @if ($note->show_to_student)
                                                                                <span class="badge bg-primary">Visible to student</span>
                                                                            @else
                                                                                <span class="badge bg-secondary">Internal only</span>
                                                                            @endif
                                                                        </div>
                                                                        <div class="text-muted small">{{ $note->created_at?->format('Y-m-d H:i') }}</div>
                                                                    </div>
                                                                    <div>{{ $note->content }}</div>
                                                                </div>
                                                            @empty
                                                                <div class="text-muted">No notes yet.</div>
                                                            @endforelse
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <div class="d-flex justify-content-center mt-4">
                                {{ $requests->links() }}
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </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() {
            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 || '';
            }

            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');

                        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