@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card-custom">
            <div class="card-header-custom">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="mb-0">
                        <i class="fas fa-file-invoice-dollar mr-2"></i>
                        Fee Challans Management
                    </h3>
                    <span class="badge badge-light">
                        Total: {{ $challans->count() }} Challans
                    </span>
                </div>
            </div>
            
            <div class="card-body-custom">
    @if(session('success'))
                    <div class="alert alert-success alert-custom fade-in">
                        <i class="fas fa-check-circle mr-2"></i>
            {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
        </div>
    @endif
    
    <div class="table-responsive" style="overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #dee2e6; border-radius: 8px;">
                    <table class="table table-custom table-aligned" style="min-width: 700px; margin-bottom: 0;">
                        <thead>
                            <tr>
                                <th class="text-center" style="width: 80px;"><i class="fas fa-hashtag mr-1"></i>ID</th>
                                <th class="text-left" style="width: 150px;"><i class="fas fa-user mr-1"></i>Student Info</th>
                                <th class="text-left" style="width: 200px;"><i class="fas fa-tag mr-1"></i>Fee Type</th>
                                <th class="text-right" style="width: 120px;"><i class="fas fa-dollar-sign mr-1"></i>Amount</th>
                                <th class="text-center" style="width: 140px;"><i class="fas fa-id-card mr-1"></i>CNIC</th>
                                <th class="text-center" style="width: 130px;"><i class="fas fa-phone mr-1"></i>Mobile</th>
                                <th class="text-center" style="width: 120px;"><i class="fas fa-calendar-alt mr-1"></i>Expiry</th>
                                <th class="text-center" style="width: 120px;"><i class="fas fa-clock mr-1"></i>Created</th>
                                <th class="text-center" style="width: 100px;"><i class="fas fa-cogs mr-1"></i>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($challans as $challan)
                                <tr class="fade-in">
                                    <td class="text-center">
                                        <span class="badge badge-primary badge-custom">
                                            #{{ $challan->id }}
                                        </span>
                                    </td>
                                    <td class="text-left">
                                        <strong class="text-truncate d-block" style="max-width: 140px;" title="{{ $challan->student_info }}">
                                            {{ $challan->student_info }}
                                        </strong>
                                    </td>
                                    <td class="text-left" style="max-width: 200px; word-wrap: break-word;">
                                        <span class="badge badge-info badge-custom" title="{{ $challan->feeType->name }}" style="white-space: normal; word-wrap: break-word; max-width: 100%;">
                                            {{ $challan->feeType->name }}
                                        </span>
                                    </td>
                                    <td class="text-right">
                                        <span class="text-success font-weight-bold">
                                            Rs. {{ number_format($challan->amount) }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <code class="text-truncate d-block" style="max-width: 120px;" title="{{ $challan->cnic }}">
                                            {{ $challan->cnic }}
                                        </code>
                                    </td>
                                    <td class="text-center">
                                        <span title="{{ $challan->mobile_no }}">
                                            {{ $challan->mobile_no }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <div class="d-flex flex-column align-items-center">
                                            @if($challan->expiry_date < now())
                                                <span class="badge badge-danger badge-custom mb-1">
                                                    <i class="fas fa-exclamation-triangle mr-1"></i>Expired
                                                </span>
                                            @elseif($challan->expiry_date < now()->addDays(7))
                                                <span class="badge badge-warning badge-custom mb-1">
                                                    <i class="fas fa-clock mr-1"></i>Soon
                                                </span>
                                            @else
                                                <span class="badge badge-success badge-custom mb-1">
                                                    <i class="fas fa-check mr-1"></i>Active
                                                </span>
                                            @endif
                                            <small class="text-muted">{{ $challan->expiry_date->format('d M Y') }}</small>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <div class="d-flex flex-column align-items-center">
                                            <small class="text-muted">{{ $challan->created_at->format('d M Y') }}</small>
                                            <small class="text-muted">{{ $challan->created_at->format('H:i A') }}</small>
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <button class="btn btn-sm print-btn" 
                                                data-challan-id="{{ $challan->id }}"
                                                data-student-info="{{ $challan->student_info }}"
                                                data-fee-type="{{ $challan->feeType->name }}"
                                                data-amount="{{ number_format($challan->amount) }}"
                                                data-cnic="{{ $challan->cnic }}"
                                                data-mobile-no="{{ $challan->mobile_no }}"
                                                data-expiry-date="{{ $challan->expiry_date->format('d-m-Y') }}"
                                                data-created-at="{{ $challan->created_at->format('d-m-Y H:i') }}">
                                            <i class="fas fa-print mr-1"></i>Print
                                        </button>
                                    </td>
                    </tr>
                @empty
                    <tr>
                                    <td colspan="9" class="text-center py-5">
                                        <div class="text-muted">
                                            <i class="fas fa-inbox fa-3x mb-3"></i>
                                            <h5>No Challans Found</h5>
                                            <p>Start by creating your first fee challan.</p>
                                            <a href="{{ route('challans.create') }}" class="btn btn-custom btn-primary-custom">
                                                <i class="fas fa-plus mr-2"></i>Create New Challan
                                            </a>
                                        </div>
                                    </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
        </div>
    </div>
</div>

<!-- Hidden print template -->
<div id="printTemplate" style="display:none;">
    <div style="padding:20px; font-family:Arial, sans-serif;">
        <h2 style="text-align:center; border-bottom:1px solid #ddd; padding-bottom:10px;">Fee Challan</h2>
        
        <table style="width:100%; border-collapse:collapse; margin-top:20px;">
            <tr>
                <td style="padding:8px; border:1px solid #ddd; width:30%;"><strong>Challan ID:</strong></td>
                <td style="padding:8px; border:1px solid #ddd;" id="printChallanId"></td>
            </tr>
            <tr>
                <td style="padding:8px; border:1px solid #ddd;"><strong>Student Name/Roll No:</strong></td>
                <td style="padding:8px; border:1px solid #ddd;" id="printStudentInfo"></td>
            </tr>
            <tr>
                <td style="padding:8px; border:1px solid #ddd;"><strong>Fee Type:</strong></td>
                <td style="padding:8px; border:1px solid #ddd;" id="printFeeType"></td>
            </tr>
            <tr>
                <td style="padding:8px; border:1px solid #ddd;"><strong>Amount:</strong></td>
                <td style="padding:8px; border:1px solid #ddd;" id="printAmount"></td>
            </tr>
            <tr>
                <td style="padding:8px; border:1px solid #ddd;"><strong>CNIC:</strong></td>
                <td style="padding:8px; border:1px solid #ddd;" id="printCnic"></td>
            </tr>
            <tr>
                <td style="padding:8px; border:1px solid #ddd;"><strong>Mobile No:</strong></td>
                <td style="padding:8px; border:1px solid #ddd;" id="printMobileNo"></td>
            </tr>
            <tr>
                <td style="padding:8px; border:1px solid #ddd;"><strong>Expiry Date:</strong></td>
                <td style="padding:8px; border:1px solid #ddd;" id="printExpiryDate"></td>
            </tr>
            <tr>
                <td style="padding:8px; border:1px solid #ddd;"><strong>Created At:</strong></td>
                <td style="padding:8px; border:1px solid #ddd;" id="printCreatedAt"></td>
            </tr>
        </table>
        
        <div style="margin-top:30px; text-align:center;">
            <p style="border-top:1px solid #ddd; padding-top:10px;">
                <strong>Note:</strong> This is a computer generated challan and doesn't require signature.
            </p>
        </div>
    </div>
</div>

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Print Challan functionality
        document.querySelectorAll('.print-btn').forEach(button => {
            button.addEventListener('click', function() {
                const printTemplate = document.getElementById('printTemplate').cloneNode(true);
                printTemplate.style.display = 'block';
                
                // Fill in the data
                printTemplate.querySelector('#printChallanId').textContent = this.dataset.challanId;
                printTemplate.querySelector('#printStudentInfo').textContent = this.dataset.studentInfo;
                printTemplate.querySelector('#printFeeType').textContent = this.dataset.feeType;
                printTemplate.querySelector('#printAmount').textContent = 'Rs. ' + this.dataset.amount;
                printTemplate.querySelector('#printCnic').textContent = this.dataset.cnic;
                printTemplate.querySelector('#printMobileNo').textContent = this.dataset.mobileNo;
                printTemplate.querySelector('#printExpiryDate').textContent = this.dataset.expiryDate;
                printTemplate.querySelector('#printCreatedAt').textContent = this.dataset.createdAt;
                
                // Create a new window for printing
                const printWindow = window.open('', '_blank');
                printWindow.document.write(`
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <title>Fee Challan - ${this.dataset.challanId}</title>
                        <style>
                            body { font-family: Arial, sans-serif; margin: 0; padding: 20px; }
                            table { width: 100%; border-collapse: collapse; margin-top: 20px; }
                            th, td { padding: 8px; border: 1px solid #ddd; }
                            th { text-align: left; background-color: #f2f2f2; }
                            @media print {
                                body { padding: 0; }
                                .no-print { display: none; }
                            }
                        </style>
                    </head>
                    <body>
                `);
                printWindow.document.write(printTemplate.innerHTML);
                printWindow.document.write('</body></html>');
                printWindow.document.close();
                
                // Trigger print after the content is loaded
                printWindow.onload = function() {
                    setTimeout(() => {
                        printWindow.print();
                        printWindow.close();
                    }, 200);
                };
            });
        });
    });
</script>
@endsection
@endsection