@extends('layouts.applicant.applicant')

@section('title', 'Add Personal Information')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.index') }}">My Applications</a></li>
    <li class="breadcrumb-item"><a href="{{ route('applicant.applications.show', $application) }}">{{ $application->application_number }}</a></li>
    <li class="breadcrumb-item active">Add Personal Information</li>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Add Personal Information</h1>
            <p class="text-muted">Application: {{ $application->application_number }}</p>
        </div>
        <div>
            <a href="{{ route('applicant.applications.step', [$application, 'personal-information']) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back
            </a>
        </div>
    </div>

    <!-- Personal Information Form -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-user me-2"></i>Personal Information Details
            </h6>
        </div>
        <div class="card-body">
            <form action="{{ route('applicant.personal-information.store', $application) }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <!-- Basic Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Basic Information</h5>
                    </div>
                    
                    <div class="col-md-2 mb-3">
                        <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
                        <select name="title" id="title" class="form-control @error('title') is-invalid @enderror" required>
                            <option value="">Select Title</option>
                            <option value="Mr" {{ old('title') == 'Mr' ? 'selected' : '' }}>Mr</option>
                            <option value="Ms" {{ old('title') == 'Ms' ? 'selected' : '' }}>Ms</option>
                            <option value="Mrs" {{ old('title') == 'Mrs' ? 'selected' : '' }}>Mrs</option>
                            <option value="Dr" {{ old('title') == 'Dr' ? 'selected' : '' }}>Dr</option>
                            <option value="Prof" {{ old('title') == 'Prof' ? 'selected' : '' }}>Prof</option>
                        </select>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="first_name" class="form-label">First Name <span class="text-danger">*</span></label>
                        <input type="text" name="first_name" id="first_name" 
                               class="form-control @error('first_name') is-invalid @enderror" 
                               value="{{ old('first_name') }}" required>
                        @error('first_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="middle_name" class="form-label">Middle Name</label>
                        <input type="text" name="middle_name" id="middle_name" 
                               class="form-control @error('middle_name') is-invalid @enderror" 
                               value="{{ old('middle_name') }}">
                        @error('middle_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label for="last_name" class="form-label">Last Name <span class="text-danger">*</span></label>
                        <input type="text" name="last_name" id="last_name" 
                               class="form-control @error('last_name') is-invalid @enderror" 
                               value="{{ old('last_name') }}" required>
                        @error('last_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="date_of_birth" class="form-label">Date of Birth <span class="text-danger">*</span></label>
                        <input type="date" name="date_of_birth" id="date_of_birth" 
                               class="form-control @error('date_of_birth') is-invalid @enderror" 
                               value="{{ old('date_of_birth') }}" required>
                        @error('date_of_birth')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="gender" class="form-label">Gender <span class="text-danger">*</span></label>
                        <select name="gender" id="gender" class="form-control @error('gender') is-invalid @enderror" required>
                            <option value="">Select Gender</option>
                            <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                            <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                            <option value="Other" {{ old('gender') == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('gender')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="category" class="form-label">Category <span class="text-danger">*</span></label>
                        <select name="category" id="category" class="form-control @error('category') is-invalid @enderror" required>
                            <option value="">Select Category</option>
                            <option value="General" {{ old('category') == 'General' ? 'selected' : '' }}>General</option>
                            <option value="SC" {{ old('category') == 'SC' ? 'selected' : '' }}>SC</option>
                            <option value="ST" {{ old('category') == 'ST' ? 'selected' : '' }}>ST</option>
                            <option value="OBC" {{ old('category') == 'OBC' ? 'selected' : '' }}>OBC</option>
                            <option value="EWS" {{ old('category') == 'EWS' ? 'selected' : '' }}>EWS</option>
                            <option value="PwD" {{ old('category') == 'PwD' ? 'selected' : '' }}>PwD</option>
                        </select>
                        @error('category')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="marital_status" class="form-label">Marital Status <span class="text-danger">*</span></label>
                        <select name="marital_status" id="marital_status" class="form-control @error('marital_status') is-invalid @enderror" required>
                            <option value="">Select Status</option>
                            <option value="Single" {{ old('marital_status') == 'Single' ? 'selected' : '' }}>Single</option>
                            <option value="Married" {{ old('marital_status') == 'Married' ? 'selected' : '' }}>Married</option>
                            <option value="Divorced" {{ old('marital_status') == 'Divorced' ? 'selected' : '' }}>Divorced</option>
                            <option value="Widowed" {{ old('marital_status') == 'Widowed' ? 'selected' : '' }}>Widowed</option>
                        </select>
                        @error('marital_status')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Contact Information</h5>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                        <input type="email" name="email" id="email" 
                               class="form-control @error('email') is-invalid @enderror" 
                               value="{{ old('email') }}" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                        <input type="tel" name="phone" id="phone" 
                               class="form-control @error('phone') is-invalid @enderror" 
                               value="{{ old('phone') }}" required>
                        @error('phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label for="alternate_phone" class="form-label">Alternate Phone</label>
                        <input type="tel" name="alternate_phone" id="alternate_phone" 
                               class="form-control @error('alternate_phone') is-invalid @enderror" 
                               value="{{ old('alternate_phone') }}">
                        @error('alternate_phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Address Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Address Information</h5>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="permanent_address" class="form-label">Permanent Address <span class="text-danger">*</span></label>
                        <textarea name="permanent_address" id="permanent_address" rows="3"
                                  class="form-control @error('permanent_address') is-invalid @enderror" required>{{ old('permanent_address') }}</textarea>
                        @error('permanent_address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="current_address" class="form-label">Current Address <span class="text-danger">*</span></label>
                        <textarea name="current_address" id="current_address" rows="3"
                                  class="form-control @error('current_address') is-invalid @enderror" required>{{ old('current_address') }}</textarea>
                        @error('current_address')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-check mt-2">
                            <input class="form-check-input" type="checkbox" id="same_as_permanent">
                            <label class="form-check-label" for="same_as_permanent">
                                Same as permanent address
                            </label>
                        </div>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="city" class="form-label">City <span class="text-danger">*</span></label>
                        <input type="text" name="city" id="city" 
                               class="form-control @error('city') is-invalid @enderror" 
                               value="{{ old('city') }}" required>
                        @error('city')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="state" class="form-label">State <span class="text-danger">*</span></label>
                        <input type="text" name="state" id="state" 
                               class="form-control @error('state') is-invalid @enderror" 
                               value="{{ old('state') }}" required>
                        @error('state')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="pincode" class="form-label">Pincode <span class="text-danger">*</span></label>
                        <input type="text" name="pincode" id="pincode" 
                               class="form-control @error('pincode') is-invalid @enderror" 
                               value="{{ old('pincode') }}" required>
                        @error('pincode')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label for="country" class="form-label">Country <span class="text-danger">*</span></label>
                        <input type="text" name="country" id="country" 
                               class="form-control @error('country') is-invalid @enderror" 
                               value="{{ old('country', 'India') }}" required>
                        @error('country')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="nationality" class="form-label">Nationality <span class="text-danger">*</span></label>
                        <input type="text" name="nationality" id="nationality" 
                               class="form-control @error('nationality') is-invalid @enderror" 
                               value="{{ old('nationality', 'Indian') }}" required>
                        @error('nationality')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Identity Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Identity Information</h5>
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="aadhar_number" class="form-label">Aadhar Number</label>
                        <input type="text" name="aadhar_number" id="aadhar_number" 
                               class="form-control @error('aadhar_number') is-invalid @enderror" 
                               value="{{ old('aadhar_number') }}" maxlength="12">
                        @error('aadhar_number')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="col-md-6 mb-3">
                        <label for="pan_number" class="form-label">PAN Number</label>
                        <input type="text" name="pan_number" id="pan_number" 
                               class="form-control @error('pan_number') is-invalid @enderror" 
                               value="{{ old('pan_number') }}" maxlength="10" style="text-transform: uppercase;">
                        @error('pan_number')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- File Uploads -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="text-primary border-bottom pb-2">Upload Documents</h5>
                    </div>
                    
                    <!-- Photograph Upload -->
                    <div class="col-md-6 mb-3">
                        <label for="photo" class="form-label">Photograph <span class="text-danger">*</span></label>
                        <input type="file" name="photo" id="photo" 
                               class="form-control @error('photo') is-invalid @enderror" 
                               accept="image/jpeg,image/png,image/jpg" required>
                        @error('photo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Upload passport size photograph (JPEG, PNG, JPG). Max size: 2MB</div>
                        
                        <!-- Photo Preview and Crop -->
                        <div id="photo-preview-container" class="mt-3" style="display: none;">
                            <div class="card border-primary">
                                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0"><i class="fas fa-image me-2"></i>Photo Preview & Crop</h6>
                                    <button type="button" class="btn btn-sm btn-light" id="crop-photo-btn">
                                        <i class="fas fa-crop me-1"></i>Crop Photo
                                    </button>
                                </div>
                                <div class="card-body text-center">
                                    <img id="photo-preview" src="" alt="Photo Preview" style="max-width: 100%; max-height: 300px;">
                                    <div class="mt-2">
                                        <small class="text-muted">Recommended size: 150x200 pixels (passport size)</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Hidden input for cropped photo data -->
                        <input type="hidden" name="photo_cropped" id="photo-cropped">
                    </div>
                    
                    <!-- Signature Upload -->
                    <div class="col-md-6 mb-3">
                        <label for="signature" class="form-label">Signature <span class="text-danger">*</span></label>
                        <input type="file" name="signature" id="signature" 
                               class="form-control @error('signature') is-invalid @enderror" 
                               accept="image/jpeg,image/png,image/jpg" required>
                        @error('signature')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Upload signature image (JPEG, PNG, JPG). Max size: 1MB</div>
                        
                        <!-- Signature Preview and Crop -->
                        <div id="signature-preview-container" class="mt-3" style="display: none;">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0"><i class="fas fa-signature me-2"></i>Signature Preview & Crop</h6>
                                    <button type="button" class="btn btn-sm btn-light" id="crop-signature-btn">
                                        <i class="fas fa-crop me-1"></i>Crop Signature
                                    </button>
                                </div>
                                <div class="card-body text-center">
                                    <img id="signature-preview" src="" alt="Signature Preview" style="max-width: 100%; max-height: 200px;">
                                    <div class="mt-2">
                                        <small class="text-muted">Recommended size: 300x100 pixels</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Hidden input for cropped signature data -->
                        <input type="hidden" name="signature_cropped" id="signature-cropped">
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="d-flex justify-content-end">
                    <a href="{{ route('applicant.applications.step', [$application, 'personal-information']) }}" class="btn btn-secondary me-2">
                        <i class="fas fa-times me-1"></i>Cancel
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>Save Personal Information
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Photo Crop Modal -->
<div class="modal fade" id="photoCropModal" tabindex="-1" aria-labelledby="photoCropModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="photoCropModalLabel">
                    <i class="fas fa-crop me-2"></i>Crop Photograph
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <small class="text-muted">Drag to move, use corners to resize. Recommended ratio: 3:4 (passport size)</small>
                </div>
                <div class="crop-container">
                    <img id="photo-crop-image" src="" alt="Photo to crop" style="max-width: 100%;">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
                <button type="button" class="btn btn-primary" id="apply-photo-crop">
                    <i class="fas fa-check me-1"></i>Apply Crop
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Signature Crop Modal -->
<div class="modal fade" id="signatureCropModal" tabindex="-1" aria-labelledby="signatureCropModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="signatureCropModalLabel">
                    <i class="fas fa-crop me-2"></i>Crop Signature
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <small class="text-muted">Drag to move, use corners to resize. Recommended ratio: 3:1 (signature)</small>
                </div>
                <div class="crop-container">
                    <img id="signature-crop-image" src="" alt="Signature to crop" style="max-width: 100%;">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Cancel
                </button>
                <button type="button" class="btn btn-success" id="apply-signature-crop">
                    <i class="fas fa-check me-1"></i>Apply Crop
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.card-header {
    background-color: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
}

.form-label {
    font-weight: 600;
    color: #5a5c69;
}

.border-bottom {
    border-bottom: 2px solid #e3e6f0 !important;
}

.crop-container {
    max-height: 400px;
    overflow: hidden;
}

.cropper-container {
    max-height: 400px;
}

#photo-preview, #signature-preview {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.image-upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: border-color 0.3s ease;
}

.image-upload-area:hover {
    border-color: #667eea;
}

.image-upload-area.dragover {
    border-color: #667eea;
    background-color: #f8f9fc;
}
</style>
@endsection

@push('styles')
<!-- Cropper.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
@endpush

@push('scripts')
<!-- Cropper.js JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Variables for croppers
    let photoCropper = null;
    let signatureCropper = null;
    
    // Same as permanent address checkbox
    const sameAsPermanent = document.getElementById('same_as_permanent');
    const permanentAddress = document.getElementById('permanent_address');
    const currentAddress = document.getElementById('current_address');
    
    sameAsPermanent.addEventListener('change', function() {
        if (this.checked) {
            currentAddress.value = permanentAddress.value;
        }
    });
    
    // Update current address when permanent address changes and checkbox is checked
    permanentAddress.addEventListener('input', function() {
        if (sameAsPermanent.checked) {
            currentAddress.value = this.value;
        }
    });
    
    // PAN number uppercase
    const panInput = document.getElementById('pan_number');
    panInput.addEventListener('input', function() {
        this.value = this.value.toUpperCase();
    });
    
    // Photo upload and preview
    const photoInput = document.getElementById('photo');
    const photoPreview = document.getElementById('photo-preview');
    const photoPreviewContainer = document.getElementById('photo-preview-container');
    const photoCropBtn = document.getElementById('crop-photo-btn');
    const photoCropModal = new bootstrap.Modal(document.getElementById('photoCropModal'));
    const photoCropImage = document.getElementById('photo-crop-image');
    const applyPhotoCrop = document.getElementById('apply-photo-crop');
    const photoCroppedInput = document.getElementById('photo-cropped');
    
    photoInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            if (file.size > 2 * 1024 * 1024) { // 2MB limit
                alert('Photo file size should not exceed 2MB');
                this.value = '';
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                photoPreview.src = e.target.result;
                photoCropImage.src = e.target.result;
                photoPreviewContainer.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            photoPreviewContainer.style.display = 'none';
        }
    });
    
    // Photo crop functionality
    photoCropBtn.addEventListener('click', function() {
        photoCropModal.show();
        
        // Initialize cropper when modal is shown
        document.getElementById('photoCropModal').addEventListener('shown.bs.modal', function() {
            if (photoCropper) {
                photoCropper.destroy();
            }
            
            photoCropper = new Cropper(photoCropImage, {
                aspectRatio: 3 / 4, // Passport size ratio
                viewMode: 1,
                dragMode: 'move',
                autoCropArea: 0.8,
                restore: false,
                guides: true,
                center: true,
                highlight: false,
                cropBoxMovable: true,
                cropBoxResizable: true,
                toggleDragModeOnDblclick: false,
            });
        }, { once: true });
    });
    
    // Apply photo crop
    applyPhotoCrop.addEventListener('click', function() {
        if (photoCropper) {
            const canvas = photoCropper.getCroppedCanvas({
                width: 150,
                height: 200,
                imageSmoothingEnabled: true,
                imageSmoothingQuality: 'high',
            });
            
            const croppedDataURL = canvas.toDataURL('image/jpeg', 0.8);
            photoPreview.src = croppedDataURL;
            photoCroppedInput.value = croppedDataURL;
            
            photoCropModal.hide();
        }
    });
    
    // Signature upload and preview
    const signatureInput = document.getElementById('signature');
    const signaturePreview = document.getElementById('signature-preview');
    const signaturePreviewContainer = document.getElementById('signature-preview-container');
    const signatureCropBtn = document.getElementById('crop-signature-btn');
    const signatureCropModal = new bootstrap.Modal(document.getElementById('signatureCropModal'));
    const signatureCropImage = document.getElementById('signature-crop-image');
    const applySignatureCrop = document.getElementById('apply-signature-crop');
    const signatureCroppedInput = document.getElementById('signature-cropped');
    
    signatureInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            if (file.size > 1 * 1024 * 1024) { // 1MB limit
                alert('Signature file size should not exceed 1MB');
                this.value = '';
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                signaturePreview.src = e.target.result;
                signatureCropImage.src = e.target.result;
                signaturePreviewContainer.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            signaturePreviewContainer.style.display = 'none';
        }
    });
    
    // Signature crop functionality
    signatureCropBtn.addEventListener('click', function() {
        signatureCropModal.show();
        
        // Initialize cropper when modal is shown
        document.getElementById('signatureCropModal').addEventListener('shown.bs.modal', function() {
            if (signatureCropper) {
                signatureCropper.destroy();
            }
            
            signatureCropper = new Cropper(signatureCropImage, {
                aspectRatio: 3 / 1, // Signature ratio
                viewMode: 1,
                dragMode: 'move',
                autoCropArea: 0.8,
                restore: false,
                guides: true,
                center: true,
                highlight: false,
                cropBoxMovable: true,
                cropBoxResizable: true,
                toggleDragModeOnDblclick: false,
            });
        }, { once: true });
    });
    
    // Apply signature crop
    applySignatureCrop.addEventListener('click', function() {
        if (signatureCropper) {
            const canvas = signatureCropper.getCroppedCanvas({
                width: 300,
                height: 100,
                imageSmoothingEnabled: true,
                imageSmoothingQuality: 'high',
            });
            
            const croppedDataURL = canvas.toDataURL('image/jpeg', 0.8);
            signaturePreview.src = croppedDataURL;
            signatureCroppedInput.value = croppedDataURL;
            
            signatureCropModal.hide();
        }
    });
    
    // Clean up croppers when modals are hidden
    document.getElementById('photoCropModal').addEventListener('hidden.bs.modal', function() {
        if (photoCropper) {
            photoCropper.destroy();
            photoCropper = null;
        }
    });
    
    document.getElementById('signatureCropModal').addEventListener('hidden.bs.modal', function() {
        if (signatureCropper) {
            signatureCropper.destroy();
            signatureCropper = null;
        }
    });
    
    // Drag and drop functionality
    function setupDragAndDrop(inputElement, previewContainer) {
        const dropArea = inputElement.closest('.mb-3');
        
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });
        
        function highlight(e) {
            dropArea.classList.add('dragover');
        }
        
        function unhighlight(e) {
            dropArea.classList.remove('dragover');
        }
        
        dropArea.addEventListener('drop', handleDrop, false);
        
        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            
            if (files.length > 0) {
                inputElement.files = files;
                inputElement.dispatchEvent(new Event('change'));
            }
        }
    }
    
    // Setup drag and drop for both inputs
    setupDragAndDrop(photoInput, photoPreviewContainer);
    setupDragAndDrop(signatureInput, signaturePreviewContainer);
});
</script>
@endpush