{{-- Common Modals and Offcanvas for Event Create/Edit --}}

<!-- Fee Guidelines Modal -->
<div class="modal fade" id="feeGuidelinesModal" tabindex="-1" aria-labelledby="feeGuidelinesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info-subtle">
                <h5 class="modal-title" id="feeGuidelinesModalLabel">
                    <i class="uil uil-info-circle me-2"></i>Fee Configuration Guidelines
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-primary mb-3">
                    <strong><i class="uil uil-lightbulb-alt me-1"></i>Simplified Fee Entry:</strong> 
                    Enter fees only once per group. The system will automatically apply the same fee to all related sub-options.
                </div>

                <h6 class="fw-bold mb-2"><i class="uil uil-dumbbell me-1"></i>Kyorugi</h6>
                <table class="table table-sm table-bordered mb-3">
                    <thead class="table-light">
                        <tr>
                            <th>Fee Type</th>
                            <th>Applied To</th>
                            <th>Example</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Kyorugi - Male</strong></td>
                            <td>All male kyorugi categories (Fin, Senior, Junior, etc.)</td>
                            <td>Enter ₹500 → applies to all male weight categories</td>
                        </tr>
                        <tr>
                            <td><strong>Kyorugi - Female</strong></td>
                            <td>All female kyorugi categories</td>
                            <td>Enter ₹500 → applies to all female weight categories</td>
                        </tr>
                    </tbody>
                </table>

                <h6 class="fw-bold mb-2"><i class="uil uil-users-alt me-1"></i>Poomsae</h6>
                <table class="table table-sm table-bordered mb-3">
                    <thead class="table-light">
                        <tr>
                            <th>Fee Type</th>
                            <th>Team Size</th>
                            <th>Applied To</th>
                            <th>Example</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>Individual</strong></td>
                            <td>1 person</td>
                            <td>All individual categories (Cadet, Junior, Senior, etc.)</td>
                            <td>Enter ₹300 → each participant pays ₹300</td>
                        </tr>
                        <tr>
                            <td><strong>Pair</strong></td>
                            <td>2 people</td>
                            <td>All pair categories (Junior, Senior, etc.)</td>
                            <td>Enter ₹400 → each person pays ₹200 (₹400 ÷ 2)</td>
                        </tr>
                        <tr>
                            <td><strong>Recognized Team</strong></td>
                            <td>3 people</td>
                            <td>All recognized team categories</td>
                            <td>Enter ₹600 → each person pays ₹200 (₹600 ÷ 3)</td>
                        </tr>
                        <tr>
                            <td><strong>Freestyle Team</strong></td>
                            <td>6 people</td>
                            <td>All freestyle team categories</td>
                            <td>Enter ₹1200 → each person pays ₹200 (₹1200 ÷ 6)</td>
                        </tr>
                    </tbody>
                </table>

                <h6 class="fw-bold mb-2"><i class="uil uil-arrow-growth me-1"></i>Fee Division Logic</h6>
                <ul class="list-unstyled">
                    <li class="mb-2"><i class="uil uil-check-circle text-success me-1"></i><strong>Individual:</strong> Full amount per participant</li>
                    <li class="mb-2"><i class="uil uil-check-circle text-success me-1"></i><strong>Pair (2 members):</strong> Total amount ÷ 2 = per person</li>
                    <li class="mb-2"><i class="uil uil-check-circle text-success me-1"></i><strong>Recognized Team (3 members):</strong> Total amount ÷ 3 = per person</li>
                    <li class="mb-2"><i class="uil uil-check-circle text-success me-1"></i><strong>Freestyle Team (6 members):</strong> Total amount ÷ 6 = per person</li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- State Invitation Modal -->
<div class="modal fade" id="stateInviteModal" tabindex="-1" aria-labelledby="stateInviteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary-subtle">
                <h5 class="modal-title" id="stateInviteModalLabel">
                    <i class="uil uil-envelope me-2"></i>Invite State Admin
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="modalInviteForm">
                @csrf
                <div class="modal-body">
                    <!-- Alert for success/error -->
                    <div id="modalAlert"></div>
                    
                    <div class="alert alert-info border-info mb-3">
                        <small><i class="uil uil-info-circle me-1"></i>An invitation email will be sent to the state admin with a link to set password and complete their profile.</small>
                    </div>
                    
                    <!-- State (readonly) -->
                    <div class="mb-3">
                        <label for="modalStateName" class="form-label">State <span class="text-danger">*</span></label>
                        <input type="text" id="modalStateName" class="form-control-plaintext fw-bold" readonly>
                        <input type="hidden" id="modalStateId" name="state_id">
                    </div>
                    
                    <!-- Email -->
                    <div class="mb-3">
                        <label for="modalEmail" class="form-label">Email Address <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                            <input type="email" id="modalEmail" name="email" class="form-control" placeholder="admin@example.com" required autocomplete="off">
                        </div>
                        <small class="form-text text-muted">Invitation will be sent to this email address</small>
                        <div class="invalid-feedback" id="modal_error_email"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Cancel
                    </button>
                    <button type="submit" id="modalInviteBtn" class="btn btn-primary">
                        <i class="fas fa-paper-plane me-2"></i>Send Invitation
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- State Invitation Offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="stateInvitationOffcanvas" aria-labelledby="stateInvitationOffcanvasLabel" style="width: 60%;">
    <div class="offcanvas-header bg-primary text-white">
        <h5 class="offcanvas-title" id="stateInvitationOffcanvasLabel">
            <i class="uil uil-envelope-add me-2"></i>Invite State Admins
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body p-0">
        <!-- Legends -->
        <div class="alert alert-light m-3 mb-2 border">
            <div class="d-flex flex-wrap gap-3">
                <div class="d-flex align-items-center d-none">
                    <span class="badge badge-phoenix badge-phoenix-success me-1">Active Admin</span>
                    <small class="text-muted">- Admin with complete profile</small>
                </div>
                <div class="d-flex align-items-center">
                    <span class="badge badge-phoenix badge-phoenix-warning me-1">Invitation Sent</span>
                    <small class="text-muted">- Pending activation</small>
                </div>
                <div class="d-flex align-items-center">
                    <span class="badge badge-phoenix badge-phoenix-danger me-1">Link Expired</span>
                    <small class="text-muted">- Resend required</small>
                </div>
                <div class="d-flex align-items-center">
                    <span class="badge badge-phoenix badge-phoenix-danger me-1">No Admin</span>
                    <small class="text-muted">- Never invited</small>
                </div>
            </div>
        </div>
        
        <div class="alert alert-info m-3 mb-0 mt-2 border-info">
            <i class="uil uil-info-circle me-2"></i>
            <strong>Instructions:</strong> Enter email addresses for each state admin and click "Send Invitation". 
            They will receive an email with a link to set their password and complete their profile.
            <br><small class="mt-1 d-block"><i class="uil uil-clock me-1"></i><strong>Note:</strong> Invitation links expire after 24 hours.</small>
        </div>
        
        <div class="table-responsive" style="max-height: calc(100vh - 200px); overflow-y: auto;">
            <table class="table table-hover mb-0" id="stateInvitationTable">
                <thead class="table-light sticky-top">
                    <tr>
                        <th style="width: 25%; padding: 1rem 1.5rem;">State Name</th>
                        <th style="width: 30%; padding: 1rem;">Email Address</th>
                        <th style="width: 20%; padding: 1rem;" class="text-center">Status</th>
                        <th style="width: 25%; padding: 1rem 1.5rem;" class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody id="stateInvitationTableBody">
                    <!-- Rows will be dynamically populated -->
                </tbody>
            </table>
        </div>
    </div>
    <div class="offcanvas-footer border-top p-3 bg-light">
        <div class="d-flex justify-content-between align-items-center">
            <small class="text-muted">
                <i class="uil uil-lightbulb-alt me-1"></i>
                <strong>Tip:</strong> You can send invitations individually as you fill in email addresses.
            </small>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas">
                <i class="uil uil-times me-1"></i>Close
            </button>
        </div>
    </div>
</div>