@extends('admin.admin_dashboard')

@section('admin')
<div class="content-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-10 offset-lg-1">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-sms fa-lg me-2"></i>
                            <h4 class="mb-0">Send SMS to Student</h4>
                        </div>
                    </div>
                    
                    <div class="card-body p-4">
                        {{-- Alert Messages --}}
                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        @if(session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        @if($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <ul class="mb-0">
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        @endif

                        {{-- Student Information Card --}}
                        <div class="alert alert-info border-0 shadow-sm mb-4">
                            <div class="row align-items-center">
                                <div class="col-auto">
                                    <img src="{{ $student->student_photo ? asset('core/storage/app/public/' . $student->student_photo) : asset('core/storage/app/public/1.png') }}"
                                        alt="Student Photo" 
                                        class="rounded border"
                                        style="width: 100px; height: 100px; object-fit: cover;">
                                </div>
                                <div class="col">
                                    <h4 class="mb-2 fw-bold text-dark">
                                        <i class="fas fa-user-graduate me-2 text-primary"></i>
                                        {{ $student->student_name_english ?? 'N/A' }}
                                    </h4>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <p class="mb-1"><strong>Admission Roll:</strong> {{ $student->admission_roll ?? 'N/A' }}</p>
                                            <p class="mb-0"><strong>Class:</strong> {{ $student->classModel->name ?? 'N/A' }}</p>
                                        </div>
                                        <div class="col-md-4">
                                            <p class="mb-1"><strong>Father's Phone:</strong> {{ $student->father_phone ?? 'N/A' }}</p>
                                            <p class="mb-0"><strong>Mother's Phone:</strong> {{ $student->mother_phone ?? 'N/A' }}</p>
                                        </div>
                                        <div class="col-md-4">
                                            <p class="mb-1"><strong>SMS Number:</strong> 
                                                <span class="badge bg-success">{{ $student->sms_number ?? 'Not Set' }}</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- SMS Form --}}
                        <form action="{{ route('student.send_sms.post', $student->id) }}" method="POST" id="smsForm">
                            @csrf
                            
                            {{-- SMS Number Display --}}
                            <div class="mb-4">
                                <label for="phone" class="form-label">
                                    <i class="fas fa-phone me-1"></i>
                                    <strong>SMS Number</strong>
                                    <span class="text-danger">*</span>
                                </label>
                                @if($student->sms_number)
                                    <input type="text" 
                                           name="phone" 
                                           id="phone" 
                                           class="form-control form-control-lg" 
                                           value="{{ $student->sms_number }}" 
                                           readonly
                                           style="background-color: #e9ecef; font-weight: 600; font-size: 18px;">
                                    <small class="text-muted d-block mt-1">
                                        <i class="fas fa-info-circle me-1"></i>
                                        SMS will be sent to this number
                                    </small>
                                @else
                                    <div class="alert alert-warning mb-0">
                                        <i class="fas fa-exclamation-triangle me-2"></i>
                                        <strong>Warning:</strong> SMS number is not set for this student. Please update student information first.
                                    </div>
                                    <input type="hidden" name="phone" value="">
                                @endif
                            </div>

                            {{-- SMS Template Selection --}}
                            <div class="mb-4">
                                <label for="template" class="form-label">
                                    <i class="fas fa-file-alt me-1"></i>
                                    <strong>SMS Template (Optional)</strong>
                                </label>
                                <select id="template" class="form-select form-select-lg">
                                    <option value="">-- Select Template --</option>
                                    @foreach($templates as $template)
                                        <option value="{{ $template->id }}" data-content="{{ $template->content }}">
                                            {{ $template->title }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Select a template to auto-fill the message box</small>
                            </div>

                            {{-- Message Box --}}
                            <div class="mb-4">
                                <label for="message" class="form-label">
                                    <i class="fas fa-comment-dots me-1"></i>
                                    <strong>Message</strong>
                                    <span class="text-danger">*</span>
                                </label>
                                <textarea name="message" 
                                          id="message" 
                                          class="form-control" 
                                          rows="6" 
                                          placeholder="Type your message here..."
                                          required
                                          maxlength="500"></textarea>
                                <div class="d-flex justify-content-between mt-2">
                                    <small class="text-muted">Maximum 500 characters</small>
                                    <small class="text-muted">
                                        <span id="charCount">0</span>/500 characters
                                    </small>
                                </div>
                            </div>

                            {{-- Action Buttons --}}
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ url()->previous() }}" class="btn btn-secondary btn-lg">
                                    <i class="fas fa-times me-2"></i>Cancel
                                </a>
                                <button type="submit" class="btn btn-primary btn-lg" id="sendBtn">
                                    <i class="fas fa-paper-plane me-2"></i>Send SMS
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .card {
        border-radius: 10px;
        border: none;
    }
    
    .card-header {
        border-radius: 10px 10px 0 0 !important;
        padding: 1.5rem;
    }
    
    .form-label strong {
        font-size: 15px;
    }
    
    .form-select, .form-control {
        border: 2px solid #e0e0e0;
        transition: all 0.3s;
    }
    
    .form-select:focus, .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
    }
    
    textarea.form-control {
        resize: none;
        font-size: 14px;
        line-height: 1.6;
    }
</style>

<script>
    // Template selection handler
    document.getElementById('template').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const content = selectedOption.getAttribute('data-content');
        
        if (content) {
            document.getElementById('message').value = content;
            updateCharCount();
        }
    });

    // Character count update
    const messageBox = document.getElementById('message');
    const charCount = document.getElementById('charCount');
    
    function updateCharCount() {
        const length = messageBox.value.length;
        charCount.textContent = length;
        
        if (length > 450) {
            charCount.classList.add('text-danger');
            charCount.classList.remove('text-muted');
        } else {
            charCount.classList.remove('text-danger');
            charCount.classList.add('text-muted');
        }
    }
    
    messageBox.addEventListener('input', updateCharCount);
    
    // Form submission confirmation
    document.getElementById('smsForm').addEventListener('submit', function(e) {
        const phoneInput = document.getElementById('phone');
        const phone = phoneInput ? phoneInput.value : '';
        const message = document.getElementById('message').value.trim();
        
        if (!phone) {
            e.preventDefault();
            alert('SMS number is not available for this student!');
            return false;
        }
        
        if (!message) {
            e.preventDefault();
            alert('Please enter a message!');
            return false;
        }
        
        const confirmed = confirm(`Send SMS to ${phone}?\n\nMessage:\n${message.substring(0, 100)}${message.length > 100 ? '...' : ''}`);
        
        if (!confirmed) {
            e.preventDefault();
            return false;
        }
        
        // Disable button to prevent double submission
        const sendBtn = document.getElementById('sendBtn');
        sendBtn.disabled = true;
        sendBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Sending...';
    });

    // Initialize char count on page load
    updateCharCount();
</script>
@endsection