@extends('layouts.admin')

@section('title', 'Create AYUSH Certification')

@section('content_header')
    <h1>Create AYUSH Certification</h1>
@stop

@section('content')
    <div class="card card-primary">
        <div class="card-header">
            <h3 class="card-title">Add New AYUSH Certification Record</h3>
        </div>
        <form action="{{ route('admin.ayush.certifications.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
                
                <div class="form-group">
                    <label for="client_name">Client Name<span class="text-danger">*</span></label>
                    <input type="text" class="form-control @error('client_name') is-invalid @enderror" id="client_name" name="client_name" value="{{ old('client_name') }}" maxlength="255" onblur="validateField(this, 'client_name')">
                    @error('client_name')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                    <div id="client_name_validation" class="mt-1" style="display: none;">
                        <span class="invalid-feedback" role="alert" style="display:block;"><strong>Please enter a valid client name (maximum 255 characters).</strong></span>
                    </div>
                    <small class="form-text text-muted">Enter the full client name (e.g., M/S. COMPANY NAME LTD)</small>
                </div>

                <div class="form-group">
                    <label for="client_details">Client Details<span class="text-danger">*</span></label>
                    <textarea class="form-control @error('client_details') is-invalid @enderror" id="client_details" name="client_details" rows="4" onblur="validateField(this, 'client_details')" maxlength="1000">{{ old('client_details') }}</textarea>
                    @error('client_details')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                    <div id="client_details_validation" class="mt-1" style="display: none;">
                        <span class="invalid-feedback" role="alert" style="display:block;"><strong>Please enter client details (minimum 10 characters, maximum 1000 characters).</strong></span>
                    </div>
                    <small class="form-text text-muted">Include location, certification type, and certificate number. <span id="client_details_counter">0/1000</span></small>
                </div>

                <div class="form-group">
                    <label for="address">Address</label>
                    <input type="text" class="form-control @error('address') is-invalid @enderror" id="address" name="address" value="{{ old('address') }}" maxlength="255">
                    @error('address')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                    <small class="form-text text-muted">Enter the client's address (optional, maximum 255 characters)</small>
                </div>

                <div class="form-group">
                    <label for="certificate_no">Certificate Number</label>
                    <input type="text" class="form-control @error('certificate_no') is-invalid @enderror" id="certificate_no" name="certificate_no" value="{{ old('certificate_no') }}" maxlength="255" placeholder="e.g., Ayush Premium Mark IRQS/678546345">
                    @error('certificate_no')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                    <small class="form-text text-muted">Enter the certificate number (optional, maximum 255 characters)</small>
                </div>

                <div class="form-group">
                    <label for="dosage_and_product">Dosage and Product<span class="text-danger">*</span></label>
                    <textarea class="form-control @error('dosage_and_product') is-invalid @enderror" id="dosage_and_product" name="dosage_and_product" rows="4" onblur="validateField(this, 'dosage_and_product')" maxlength="1000">{{ old('dosage_and_product') }}</textarea>
                    @error('dosage_and_product')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                    <div id="dosage_and_product_validation" class="mt-1" style="display: none;">
                        <span class="invalid-feedback" role="alert" style="display:block;"><strong>Please enter dosage and product details (minimum 10 characters, maximum 1000 characters).</strong></span>
                    </div>
                    <small class="form-text text-muted">List all products and their quantities. <span id="dosage_and_product_counter">0/1000</span></small>
                </div>

                <div class="form-group">
                    <label for="total">Total<span class="text-danger">*</span></label>
                    <input type="number" class="form-control @error('total') is-invalid @enderror" id="total" name="total" value="{{ old('total') }}" min="0" max="999999" onblur="validateField(this, 'total')">
                    @error('total')
                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                    @enderror
                    <div id="total_validation" class="mt-1" style="display: none;">
                        <span class="invalid-feedback" role="alert" style="display:block;"><strong>Please enter a valid total number (minimum 0, maximum 999,999).</strong></span>
                    </div>
                    <small class="form-text text-muted">Enter the total number of products/certifications</small>
                </div>

                <div class="form-group">
                    <label for="certificate_pdf">Certificate PDF<span class="text-danger">*</span></label>
                    <div class="input-group">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input @error('certificate_pdf') is-invalid @enderror" id="certificate_pdf" name="certificate_pdf" accept=".pdf" onchange="validateFile(this)">
                            <label class="custom-file-label" for="certificate_pdf">Choose file</label>
                        </div>
                    </div>
                    @error('certificate_pdf')
                        <span class="invalid-feedback" role="alert" style="display:block;"><strong>{{ $message }}</strong></span>
                    @enderror
                    <div id="certificate_pdf_validation" class="mt-1" style="display: none;">
                        <span class="invalid-feedback" role="alert" style="display:block;"><strong>Please select a valid PDF file (maximum 10MB).</strong></span>
                    </div>
                    <small class="form-text text-muted">Maximum file size: 10MB. Only PDF files are allowed.</small>
                    <div id="file-info" class="mt-2" style="display: none;">
                        <small class="text-info">Selected file: <span id="file-name"></span> (<span id="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>
                </div>

            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary">Create Certification</button>
                <a href="{{ route('admin.ayush.certifications.index') }}" class="btn btn-default float-right">Cancel</a>
            </div>
        </form>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <style>
        /* Fix file input error visibility */
        .custom-file-input.is-invalid {
            border-color: #dc3545 !important;
        }
        .custom-file-input.is-invalid:focus {
            border-color: #dc3545 !important;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
        }
        .custom-file.is-invalid .custom-file-input {
            border-color: #dc3545 !important;
        }
        .custom-file.is-invalid .custom-file-label {
            border-color: #dc3545 !important;
        }
    </style>
@stop

@section('js')
    <script>
        $(document).ready(function() {
            // Auto-resize textareas
            $('textarea').on('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
                updateCharacterCounter(this);
            });
            
            // 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);
            });
            
            // Apply is-invalid class to custom-file container if there's a validation error
            @if($errors->has('certificate_pdf'))
                $('.custom-file').addClass('is-invalid');
            @endif
            
            // Initialize character counters
            updateCharacterCounter(document.getElementById('client_details'));
            updateCharacterCounter(document.getElementById('dosage_and_product'));
        });
        
        function validateField(input, fieldName) {
            const value = input.value.trim();
            const validationDiv = document.getElementById(fieldName + '_validation');
            let isValid = true;
            let errorMessage = '';
            
            // Remove existing validation classes
            input.classList.remove('is-valid', 'is-invalid');
            validationDiv.style.display = 'none';
            
            switch(fieldName) {
                case 'client_name':
                    if (value.length === 0) {
                        isValid = false;
                        errorMessage = 'Client name is required.';
                    } else if (value.length > 255) {
                        isValid = false;
                        errorMessage = 'Client name must be less than 255 characters.';
                    }
                    break;
                    
                case 'client_details':
                    if (value.length === 0) {
                        isValid = false;
                        errorMessage = 'Client details are required.';
                    } else if (value.length < 10) {
                        isValid = false;
                        errorMessage = 'Client details must be at least 10 characters long.';
                    } else if (value.length > 1000) {
                        isValid = false;
                        errorMessage = 'Client details must be less than 1000 characters.';
                    }
                    break;
                    
                case 'dosage_and_product':
                    if (value.length === 0) {
                        isValid = false;
                        errorMessage = 'Dosage and product details are required.';
                    } else if (value.length < 10) {
                        isValid = false;
                        errorMessage = 'Dosage and product details must be at least 10 characters long.';
                    } else if (value.length > 1000) {
                        isValid = false;
                        errorMessage = 'Dosage and product details must be less than 1000 characters.';
                    }
                    break;
                    
                case 'total':
                    const numValue = parseInt(value);
                    if (value.length === 0) {
                        isValid = false;
                        errorMessage = 'Total is required.';
                    } else if (isNaN(numValue) || numValue < 0) {
                        isValid = false;
                        errorMessage = 'Total must be a positive number.';
                    } else if (numValue > 999999) {
                        isValid = false;
                        errorMessage = 'Total must be less than 1,000,000.';
                    }
                    break;
            }
            
            if (!isValid) {
                input.classList.add('is-invalid');
                validationDiv.querySelector('small').textContent = errorMessage;
                validationDiv.style.display = 'block';
            } else {
                input.classList.add('is-valid');
            }
            
            return isValid;
        }
        
        function updateCharacterCounter(textarea) {
            const fieldName = textarea.id;
            const counter = document.getElementById(fieldName + '_counter');
            if (counter) {
                const currentLength = textarea.value.length;
                const maxLength = textarea.maxLength;
                counter.textContent = `${currentLength}/${maxLength}`;
                
                // Change color based on usage
                if (currentLength > maxLength * 0.9) {
                    counter.style.color = '#dc3545'; // Red
                } else if (currentLength > maxLength * 0.7) {
                    counter.style.color = '#ffc107'; // Yellow
                } else {
                    counter.style.color = '#6c757d'; // Gray
                }
            }
        }
        
        function validateFile(input) {
            const file = input.files[0];
            const fileInfo = document.getElementById('file-info');
            const fileName = document.getElementById('file-name');
            const fileSize = document.getElementById('file-size');
            const validationDiv = document.getElementById('certificate_pdf_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
        document.querySelector('form').addEventListener('submit', function(e) {
            const fields = ['client_name', 'client_details', 'dosage_and_product', 'total'];
            let isValid = true;
            let errorMessages = [];
            
            // Validate all text fields
            fields.forEach(fieldName => {
                const input = document.getElementById(fieldName);
                if (!validateField(input, fieldName)) {
                    isValid = false;
                    errorMessages.push(`${fieldName.replace('_', ' ').toUpperCase()}: Validation failed`);
                }
            });
            
            // Validate file if selected
            const fileInput = document.getElementById('certificate_pdf');
            if (fileInput && fileInput.files.length > 0) {
                if (!validateFile(fileInput)) {
                    isValid = false;
                    errorMessages.push('PDF FILE: Validation failed');
                }
            }
            
            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 = 'Creating...';
            submitBtn.disabled = true;
            
            // Re-enable after 5 seconds as fallback
            setTimeout(() => {
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
            }, 5000);
        });
    </script>
@stop