@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
@endpush

@push('scripts')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
@endpush

@section('content')
<style>
    .purchases-dt-container {
        background: white;
        border-radius: 20px;
        padding: 2rem;
        box-shadow: var(--panel-shadow);
        border: 1px solid var(--zoho-border);
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.5rem 1rem;
        border-radius: 10px;
        margin: 0 2px;
        border: 1px solid var(--zoho-border) !important;
        background: white !important;
        color: var(--zoho-text) !important;
        font-weight: 600;
        font-size: 0.85rem;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: var(--zoho-navy) !important;
        color: white !important;
        border-color: var(--zoho-navy) !important;
    }
    .dataTables_wrapper .dataTables_filter input {
        border: 1px solid var(--zoho-border);
        border-radius: 12px;
        padding: 0.6rem 1rem;
        margin-left: 0.5rem;
        background: var(--zoho-bg);
    }
    .dataTables_wrapper .dataTables_length select {
        border: 1px solid var(--zoho-border);
        border-radius: 10px;
        padding: 0.4rem 2rem 0.4rem 1rem;
    }
    table.dataTable thead th {
        border-bottom: 1px solid var(--zoho-border) !important;
        padding: 1.25rem 1rem !important;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #64748b;
        font-weight: 800;
    }
    table.dataTable tbody td {
        padding: 1.25rem 1rem !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.4) !important;
        font-size: 0.9rem;
    }
    .full-screen-container {
        max-width: 100% !important;
        padding: 2rem;
    }
    @media (max-width: 768px) {
        .full-screen-container { padding: 1rem; }
        .purchases-dt-container { border-radius: 0; padding: 1rem; border-left: none; border-right: none; }
    }
</style>

<div class="container-fluid full-screen-container">
    <div class="mb-4 d-flex justify-content-between align-items-end">
        <div>
            <h4 class="fw-bold mb-1">My Purchase History</h4>
            <p class="text-secondary small mb-0">Manage and track your educational investments (Logged in as: {{ auth()->user()->email }})</p>
        </div>
        <form action="{{ route('student.purchases.reset') }}" method="POST" onsubmit="return confirm('Are you sure you want to reset all purchases for testing?')">
            @csrf
            <button type="submit" class="btn btn-outline-danger btn-sm px-3" style="border-radius: 10px; font-weight: 600;">
                <i class="bi bi-arrow-counterclockwise me-1"></i> Reset for Testing
            </button>
        </form>
    </div>

    <div class="purchases-dt-container">
        <div class="table-responsive">
            <table class="table align-middle w-100" id="purchases-table">
                <thead>
                    <tr>
                        <th>ITEM</th>
                        <th>TYPE</th>
                        <th>AMOUNT</th>
                        <th>DATE</th>
                        <th>STATUS</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
    $(document).ready(function() {
        $('#purchases-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('student.purchases.index') }}",
            columns: [
                { data: 'item', name: 'item' },
                { data: 'type', name: 'type', orderable: false, searchable: false },
                { data: 'amount', name: 'amount' },
                { data: 'created_at', name: 'created_at' },
                { data: 'status', name: 'status', orderable: false, searchable: false }
            ],
            language: {
                search: "",
                searchPlaceholder: "Search purchases...",
                lengthMenu: "_MENU_",
                paginate: {
                    previous: '<i class="bi bi-chevron-left"></i>',
                    next: '<i class="bi bi-chevron-right"></i>'
                },
                processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>'
            },
            dom: "<'row mb-3'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                 "<'row'<'col-sm-12'tr>>" +
                 "<'row mt-3'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            order: [[3, 'desc']],
            pageLength: 10,
            responsive: true
        });
    });
</script>
@endpush
@endsection