@extends('layouts.header')

@section('content')
<main>
    <div class="container-fluid px-4">
        <h1 class="mt-4">Payment</h1>
        <ol class="breadcrumb mb-4">
    <li class="breadcrumb-item"><a href="{{ route('dash') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Payment List</a></li>
   
</ol>

        <div class="row">
           
           <div class="col-xl-12">
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-table me-1"></i>
            Payment Details
        </div>
        <div class="card-body">
            <div class="table-responsive">
                {{-- <div class="entries-per-page">
                    <label for="entriesPerPage">Entries per page:</label>
                    <select id="entriesPerPage">
                        <option value="10" selected>10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <!-- Add more options if needed -->
                    </select>
                    <input type="text" id="paymentSearchInput" class="form-control mb-3 search-box" placeholder="Search..." style="width: 20%;">
                </div> --}}
                <table id="paymentTable" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Serial Number</th>
                            {{-- <th>Payment ID</th> --}}
                            <th>Sponsor Name</th>
                            <th>Student Name</th>
                            <th>Method</th>
                            <th>Amount</th>
                            <th>Balance Amount</th>
                            <th>Extra Amount</th>
                            <th>Received Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                        $serialNumber = 1;
                        @endphp
                        @foreach($payments as $payment)
                        <tr>
                            <td>{{ $serialNumber }}</td>
                            {{-- <td>{{ $payment->id }}</td> --}}
                            <td>{{ $payment->sponsor->fullName }}</td>
                            <td>
                                @foreach($payment->students as $student)
                                    {{ $student->student_name }}<br>
                                @endforeach
                            </td>
                            <td>{{ $payment->method }}</td>
                            <td>₹{{ number_format($payment->amount, 2, '.', ',') }}</td>
                            <td>₹{{ number_format($payment->balance, 2, '.', ',') }}</td>
                            <td>₹{{ number_format($payment->extrapayment, 2, '.', ',') }}</td>

                            <td>{{ $payment->created_at->format('d/m/Y') }}</td>
                            <td>
                                <a href="{{ route('payment.edit', $payment->id) }}" class="btn btn-primary btn-sm">Edit</a>
                                <form action="{{ route('payment.delete', $payment->id) }}" method="POST" style="display: inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                </form>
                            </td>
                        </tr>
                        @php
                        $serialNumber++;
                        @endphp
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
        </div>
        </div>
         @if(session('success'))
    <div id="successMessage" class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
    </main>
@endsection
@push('scripts')
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
 <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap5.min.js"></script> 


<script>
    $(document).ready(function() {
        const entriesPerPageSelect = $('#paymentTable_length select');
        const paymentSearchInput = $('#paymentSearchInput');
        const paymentTable = $('#paymentTable').DataTable();

        // Event listener for changing entries per page
        entriesPerPageSelect.on('change', function() {
            const entriesPerPage = parseInt(entriesPerPageSelect.val());
            paymentTable.page.len(entriesPerPage).draw();
        });

        // Event listener for search input
        paymentSearchInput.on('input', function() {
            paymentTable.search(paymentSearchInput.val()).draw();
        });

        // Adjust width and size of the select element
        entriesPerPageSelect.addClass('form-select-sm'); // Add class for small size
        entriesPerPageSelect.css('width', '80px'); // Set custom width

        // Float search input to the right
        paymentSearchInput.css('float', 'right');
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const successMessage = document.getElementById('success-message');
        if (successMessage) {
            // Display the success message as a centered popup
            successMessage.style.position = 'fixed';
            successMessage.style.top = '50%';
            successMessage.style.left = '50%';
            successMessage.style.transform = 'translate(-50%, -50%)';
            successMessage.style.zIndex = '1000';
            successMessage.style.display = 'block'; // Make sure the message is visible

            // Hide the success message after 5 seconds
            setTimeout(function() {
                successMessage.style.display = 'none';
            }, 5000);
        }
    });
</script>
 {{-- <script>
    $(document).ready(function() {
        const entriesPerPageSelect = $('#paymentTable_length select');
        const paymentSearchInput = $('#paymentSearchInput');
        const paymentTable = $('#paymentTable').DataTable();

        // Event listener for changing entries per page
        entriesPerPageSelect.on('change', function() {
            const entriesPerPage = parseInt(entriesPerPageSelect.val());
            paymentTable.page.len(entriesPerPage).draw();
        });

        // Event listener for search input
        paymentSearchInput.on('input', function() {
            paymentTable.search(paymentSearchInput.val()).draw();
        });

        // Script for displaying success message
        const successMessage = $('#successMessage');
        if (successMessage) {
            successMessage.css({
                position: 'fixed',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                zIndex: '1000'
            });

            setTimeout(function() {
                successMessage.css('display', 'none');
            }, 5000);
        }

        // Adjust width and size of the select element
        entriesPerPageSelect.addClass('form-select-sm'); // Add class for small size
        entriesPerPageSelect.css('width', '80px'); // Set custom width

        // Float search input to the right
        paymentSearchInput.css('float', 'right');
    });
</script> --}}

 <style>
    div#paymentTable_filter {
    float: right;
 }
 div#paymentTable_paginate {
    float: right;
 }
 div#paymentTable_length {
    display: flex;
    align-items: center; /* Vertically center the items */
 }

 div#paymentTable_length label {
    margin-right: 10px; /* Adjust as needed */
 }
 div#paymentTable_length label {
    display: flex;
    /* align-items: center;
    margin-right: 10px; Adjust as needed */
 }

</style>

@endpush