@extends('adminlte::page')

@section('title', 'Upload AYUSH Transparency PDFs')

@section('content_header')
    <h1>Upload AYUSH Transparency PDFs</h1>
@stop

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Upload Transparency Section PDFs</h3>
        </div>
        <div class="card-body">
             @if($errors->any())
                 <div class="alert alert-danger">
                     <ul class="mb-0">
                         @foreach($errors->all() as $error)
                             <li>{{ $error }}</li>
                         @endforeach
                     </ul>
                 </div>
             @endif
             
            <form action="{{ route('admin.ayush.transparency.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <div class="form-group">
                    <label for="suspended_clients_pdf">Suspended Clients PDF</label>
                    <div class="input-group">
                        <div class="custom-file">
                             <input type="file" class="custom-file-input @error('suspended_clients_pdf') is-invalid @enderror" id="suspended_clients_pdf" name="suspended_clients_pdf" accept=".pdf" onchange="validateFile(this, 'suspended')" onblur="validateField(this, 'suspended_clients_pdf')">
                            <label class="custom-file-label" for="suspended_clients_pdf">Choose file</label>
                        </div>
                    </div>
                    @error('suspended_clients_pdf')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                     <div id="suspended_clients_pdf_validation" class="mt-1" style="display: none;">
                         <small class="text-danger">Please select a valid PDF file (maximum 10MB).</small>
                     </div>
                    <small class="form-text text-muted">Maximum file size: 10MB. Only PDF files are allowed.</small>
                     <div id="suspended-file-info" class="mt-2" style="display: none;">
                         <small class="text-info">Selected file: <span id="suspended-file-name"></span> (<span id="suspended-file-size"></span>)</small>
                     </div>
                </div>

                <div class="form-group">
                    <label for="withdrawn_clients_pdf">Withdrawal Clients PDF</label>
                    <div class="input-group">
                        <div class="custom-file">
                             <input type="file" class="custom-file-input @error('withdrawn_clients_pdf') is-invalid @enderror" id="withdrawn_clients_pdf" name="withdrawn_clients_pdf" accept=".pdf" onchange="validateFile(this, 'withdrawn')" onblur="validateField(this, 'withdrawn_clients_pdf')">
                            <label class="custom-file-label" for="withdrawn_clients_pdf">Choose file</label>
                        </div>
                    </div>
                    @error('withdrawn_clients_pdf')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                     <div id="withdrawn_clients_pdf_validation" class="mt-1" style="display: none;">
                         <small class="text-danger">Please select a valid PDF file (maximum 10MB).</small>
                     </div>
                    <small class="form-text text-muted">Maximum file size: 10MB. Only PDF files are allowed.</small>
                     <div id="withdrawn-file-info" class="mt-2" style="display: none;">
                         <small class="text-info">Selected file: <span id="withdrawn-file-name"></span> (<span id="withdrawn-file-size"></span>)</small>
                     </div>
                </div>

                <div class="form-group">
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input" id="is_active" name="is_active" {{ old('is_active') ? 'checked' : '' }}>
                        <label class="custom-control-label" for="is_active">Active</label>
                    </div>
                     <small class="form-text text-muted">Enable this to make the transparency records visible on the website.</small>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Upload PDFs</button>
                    <a href="{{ route('admin.ayush.transparency.index') }}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
    <script>
        $(document).ready(function() {
            // Bootstrap custom file input functionality
            $('.custom-file-input').on('change', function() {
                let fileName = $(this).val().split('\\').pop();
                $(this).next('.custom-file-label').addClass("selected").html(fileName);
                
                // Validate file on change
                validateFile(this, this.name.replace('_clients_pdf', ''));
            });
            
                         // Form submission validation
             $('form').on('submit', function(e) {
                 const fileInputs = ['suspended_clients_pdf', 'withdrawn_clients_pdf'];
                 let isValid = true;
                 let errorMessages = [];
                 
                 // Validate only file inputs if files are selected
                 fileInputs.forEach(fieldName => {
                     const input = document.getElementById(fieldName);
                     if (input && input.files.length > 0) {
                         if (!validateFile(input, fieldName.replace('_clients_pdf', ''))) {
                             isValid = false;
                             errorMessages.push(`${fieldName.replace('_', ' ').toUpperCase()}: Invalid file`);
                         }
                     }
                 });
                 
                 if (!isValid) {
                     e.preventDefault();
                     const errorText = errorMessages.join('\n');
                     alert('Please fix the following validation errors before submitting:\n\n' + errorText);
                     return false;
                 }
                 
                 // Show loading state
                 const submitBtn = document.querySelector('button[type="submit"]');
                 const originalText = submitBtn.textContent;
                 submitBtn.textContent = 'Uploading...';
                 submitBtn.disabled = true;
                 
                 // Re-enable after 5 seconds as fallback
                 setTimeout(() => {
                     submitBtn.textContent = originalText;
                     submitBtn.disabled = false;
                 }, 5000);
             });
        });
        
                 function validateField(input, fieldName) {
             // Only validate file inputs, not checkboxes
             if (fieldName === 'is_active') {
                 return true; // Checkbox is always valid
             }
             
             const validationDiv = document.getElementById(fieldName + '_validation');
             if (!validationDiv) return true; // No validation div means no validation needed
             
             let isValid = true;
             let errorMessage = '';
             
             // Remove existing validation classes
             input.classList.remove('is-valid', 'is-invalid');
             validationDiv.style.display = 'none';
             
             // Only validate if it's a file input with files
             if (input.type === 'file' && input.files.length > 0) {
                 // File validation is handled by validateFile function
                 return validateFile(input, fieldName.replace('_clients_pdf', ''));
             }
             
             return isValid;
         }
        
        function validateFile(input, type) {
            const file = input.files[0];
            const fileInfo = document.getElementById(type + '-file-info');
            const fileName = document.getElementById(type + '-file-name');
            const fileSize = document.getElementById(type + '-file-size');
            const validationDiv = document.getElementById(input.name + '_validation');
            
            // Remove existing validation classes
            input.classList.remove('is-valid', 'is-invalid');
            validationDiv.style.display = 'none';
            
            if (file) {
                // Show file info
                fileName.textContent = file.name;
                fileSize.textContent = formatFileSize(file.size);
                fileInfo.style.display = 'block';
                
                // Validate file type
                if (file.type !== 'application/pdf') {
                    input.classList.add('is-invalid');
                    validationDiv.querySelector('small').textContent = 'Please select a valid PDF file.';
                    validationDiv.style.display = 'block';
                    input.value = '';
                    fileInfo.style.display = 'none';
                    return false;
                }
                
                // Validate file size (10MB = 10 * 1024 * 1024 bytes)
                const maxSize = 10 * 1024 * 1024;
                if (file.size > maxSize) {
                    input.classList.add('is-invalid');
                    validationDiv.querySelector('small').textContent = 'File size must be less than 10MB.';
                    validationDiv.style.display = 'block';
                    input.value = '';
                    fileInfo.style.display = 'none';
                    return false;
                }
                
                // File is valid
                input.classList.add('is-valid');
            } else {
                fileInfo.style.display = 'none';
            }
        }
        
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        
                 // Form submission validation - simplified
         document.querySelector('form').addEventListener('submit', function(e) {
             // Only validate file inputs if files are selected
             const fileInputs = ['suspended_clients_pdf', 'withdrawn_clients_pdf'];
             let isValid = true;
             let errorMessages = [];
             
             fileInputs.forEach(fieldName => {
                 const input = document.getElementById(fieldName);
                 if (input && input.files.length > 0) {
                     if (!validateFile(input, fieldName.replace('_clients_pdf', ''))) {
                         isValid = false;
                         errorMessages.push(`${fieldName.replace('_', ' ').toUpperCase()}: Invalid file`);
                     }
                 }
             });
             
             if (!isValid) {
                 e.preventDefault();
                 const errorText = errorMessages.join('\n');
                 alert('Please fix the following validation errors before submitting:\n\n' + errorText);
                 return false;
             }
             
             // Show loading state
             const submitBtn = document.querySelector('button[type="submit"]');
             const originalText = submitBtn.textContent;
             submitBtn.textContent = 'Uploading...';
             submitBtn.disabled = true;
             
             // Re-enable after 5 seconds as fallback
             setTimeout(() => {
                 submitBtn.textContent = originalText;
                 submitBtn.disabled = false;
             }, 5000);
        });
    </script>
@stop