@extends('user.layouts.app')
@push('title')
    {{ $pageTitle }}
@endpush
@section('content')
    <!-- Page content area start -->
    <div class="px-24 pb-24 position-relative">
        <!-- Info & Add product button -->
        <div class="d-flex justify-content-between align-items-center g-10 flex-wrap pb-20">
            <div class="">
                <h4 class="fs-24 fw-500 lh-24 text-white">{{ __('Masterclass Registrations') }}</h4>
            </div>
        </div>
        <!-- Table -->
        <div class="p-20 bd-one bd-c-stroke-color bd-ra-12 bg-white overflow-hidden">
            <h4 class="fs-18 fw-600 lh-24 text-textBlack pb-13">{{ __('All Registrations') }}</h4>
            <input type="hidden" id="masterclass-list" value="{{ route('user.masterclass.list') }}">
            <div id="masterclassTable_wrapper" class="dataTables_wrapper no-footer">
                <table class="table zTable zTable-last-item-right dataTable no-footer dtr-inline" id="masterclassTable"
                    aria-describedby="masterclassTable_info">
                    <thead>
                        <tr>
                            <th scope="col" class="sorting_disabled" rowspan="1" colspan="1">
                                <div class="min-w-150">{{ __('Name') }}</div>
                            </th>
                            <th scope="col" class="sorting_disabled" rowspan="1" colspan="1">
                                <div class="min-sm-w-100">{{ __('Email') }}</div>
                            </th>
                            <th scope="col" class="sorting_disabled" rowspan="1" colspan="1">
                                <div class="min-sm-w-100">{{ __('Phone') }}</div>
                            </th>
                            <th scope="col" class="sorting_disabled" rowspan="1" colspan="1">
                                <div class="min-w-120">{{ __('Plan') }}</div>
                            </th>
                            <th scope="col" class="sorting_disabled" rowspan="1" colspan="1">
                                <div class="min-sm-w-100">{{ __('Amount Paid') }}</div>
                            </th>
                            <th scope="col" class="sorting_disabled" rowspan="1" colspan="1">
                                <div class="min-sm-w-100">{{ __('Status') }}</div>
                            </th>
                            <th scope="col" class="sorting_disabled" rowspan="1" colspan="1">
                                <div class="min-w-120">{{ __('Date') }}</div>
                            </th>
                            <th scope="col" class="sorting_disabled" rowspan="1" colspan="1">
                                <div class="min-sm-w-100">{{ __('Action') }}</div>
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <!-- Details Modal -->
    <div class="modal fade" id="detailsModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ __('Registration Details') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="modalContent">
                    <div class="text-center py-5">
                        <div class="spinner-border" role="status"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page content area end -->
@endsection

@push('script')
<script>
(function ($) {
    "use strict";

    $("#masterclassTable").DataTable({
        pageLength: 10,
        ordering: false,
        serverSide: true,
        processing: true,
        searching: false,
        responsive: {
            breakpoints: [
                { name: "desktop", width: Infinity },
                { name: "tablet", width: 1400 },
                { name: "fablet", width: 768 },
                { name: "phone", width: 480 },
            ],
        },
        ajax: $('#masterclass-list').val(),
        language: {
            paginate: {
                previous: "<i class='fa-solid fa-angles-left'></i>",
                next: "<i class='fa-solid fa-angles-right'></i>",
            },
            searchPlaceholder: "Search registrations",
            search: "<span class='searchIcon'><i class='fa-solid fa-magnifying-glass'></i></span>",
        },
        dom: '<>tr<"tableBottom"<"row align-items-center"<"col-sm-6"<"tableInfo"i>><"col-sm-6"<"tablePagi"p>>>><"clear">',
        columns: [
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            { data: 'phone', name: 'phone' },
            { data: 'plan', name: 'plan' },
            { data: 'amount_paid', name: 'amount_paid' },
            { data: 'payment_status', name: 'payment_status' },
            { data: 'created_at', name: 'created_at' },
            { data: 'action', name: 'action' },
        ],
    });

    // View Details
    window.viewDetails = function(id) {
        $('#detailsModal').modal('show');
        
        $.get('/user/masterclass/details/' + id, function(data) {
            let html = `
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <strong>Full Name:</strong><br>${data.full_name}
                    </div>
                    <div class="col-md-6 mb-3">
                        <strong>Email:</strong><br>${data.email}
                    </div>
                    <div class="col-md-6 mb-3">
                        <strong>Phone:</strong><br>${data.phone}
                    </div>
                    <div class="col-md-6 mb-3">
                        <strong>Installment Plan:</strong><br>${data.installment_plan} Installments
                    </div>
                    <div class="col-md-6 mb-3">
                        <strong>Total Amount:</strong><br>GHS ${parseFloat(data.total_amount).toFixed(2)}
                    </div>
                    <div class="col-md-6 mb-3">
                        <strong>Amount Paid:</strong><br>GHS ${parseFloat(data.amount_paid).toFixed(2)}
                    </div>
                    <div class="col-md-6 mb-3">
                        <strong>Amount Per Installment:</strong><br>GHS ${parseFloat(data.amount_per_installment).toFixed(2)}
                    </div>
                    <div class="col-md-6 mb-3">
                        <strong>Installments Paid:</strong><br>${data.installments_paid} of ${data.installment_plan}
                    </div>
                    <div class="col-md-6 mb-3">
                        <strong>Payment Status:</strong><br>
                        ${data.payment_status == 'completed' ? '<span class="badge bg-success">Completed</span>' : 
                          data.payment_status == 'partial' ? '<span class="badge bg-info">Partial</span>' : 
                          '<span class="badge bg-warning">Pending</span>'}
                    </div>
                    <div class="col-md-6 mb-3">
                        <strong>Registration Date:</strong><br>${data.registration_date}
                    </div>
                    <div class="col-md-6 mb-3">
                        <strong>Payment Deadline:</strong><br>${data.payment_deadline}
                    </div>
                    <div class="col-md-6 mb-3">
                        <strong>Access Granted:</strong><br>${data.access_granted ? 'Yes' : 'No'}
                    </div>
                </div>
            `;
            $('#modalContent').html(html);
        });
    };

})(jQuery);
</script>
@endpush