<?php $__env->startSection('styles'); ?>
<style>
    .form-control:focus, .form-select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
    }
    .color-preview-box {
        width: 45px;
        height: 45px;
        padding: 0;
        border: none;
        border-radius: 8px;
        cursor: pointer;
    }
    .color-preview-box::-webkit-color-swatch-wrapper {
        padding: 0;
    }
    .color-preview-box::-webkit-color-swatch {
        border: none;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .icon-preview-box {
        transition: all 0.4s ease;
    }
    .icon-preview-box:hover {
        transform: scale(1.05);
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="fw-bold mb-0 text-gray-800">
        <i class="bi bi-pencil-square text-warning me-2"></i>Edit Skill: HTML5
    </h4>
    <div class="d-flex gap-2">
        <a href="<?php echo e(url('/skills/show')); ?>" class="btn btn-outline-primary rounded-pill px-4 fw-medium shadow-sm">
            <i class="bi bi-eye me-1"></i> View
        </a>
        <a href="<?php echo e(url('/skills')); ?>" class="btn btn-light shadow-sm rounded-pill px-4 fw-medium text-secondary hover-primary">
            <i class="bi bi-arrow-left me-1"></i> Back
        </a>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-4 p-md-5">
                <form action="#" method="POST">
                    <!-- Spoofing method and token for UI demonstration -->
                    <input type="hidden" name="_method" value="PUT">
                    
                    <div class="row g-4 mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary">Skill Name <span class="text-danger">*</span></label>
                            <div class="input-group shadow-sm rounded-3 overflow-hidden">
                                <span class="input-group-text bg-light border-0"><i class="bi bi-laptop text-primary"></i></span>
                                <input type="text" class="form-control border-0 bg-light" id="skillName" value="HTML5" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary">Category <span class="text-danger">*</span></label>
                            <div class="input-group shadow-sm rounded-3 overflow-hidden">
                                <span class="input-group-text bg-light border-0"><i class="bi bi-collection text-primary"></i></span>
                                <select class="form-select border-0 bg-light" id="skillCategory" required>
                                    <option value="Frontend" selected>Frontend</option>
                                    <option value="Backend">Backend</option>
                                    <option value="Database">Database</option>
                                    <option value="Tools">Tools</option>
                                    <option value="Design">Design</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row g-4 mb-4">
                        <div class="col-md-12">
                            <label class="form-label fw-semibold text-secondary">Icon Class (Bootstrap Icons) <span class="text-danger">*</span></label>
                            <div class="input-group shadow-sm rounded-3 overflow-hidden">
                                <span class="input-group-text bg-light border-0"><i class="bi bi-star text-primary"></i></span>
                                <input type="text" class="form-control border-0 bg-light" id="skillIcon" value="bi-filetype-html" required>
                            </div>
                            <div class="form-text mt-2"><a href="https://icons.getbootstrap.com/" target="_blank" class="text-decoration-none text-primary fw-medium"><i class="bi bi-box-arrow-up-right me-1"></i> Browse Bootstrap Icons</a></div>
                        </div>
                    </div>

                    <div class="row g-4 mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary">Primary Color</label>
                            <div class="d-flex align-items-center bg-light p-2 rounded-3 shadow-sm">
                                <input type="color" class="form-control form-control-color color-preview-box me-3" id="primaryColor" value="#e34f26" title="Choose primary color">
                                <input type="text" class="form-control border-0 bg-transparent fw-medium" id="primaryColorText" value="#e34f26">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary">Alternate Color</label>
                            <div class="d-flex align-items-center bg-light p-2 rounded-3 shadow-sm">
                                <input type="color" class="form-control form-control-color color-preview-box me-3" id="altColor" value="#f76342" title="Choose alternate color">
                                <input type="text" class="form-control border-0 bg-transparent fw-medium" id="altColorText" value="#f76342">
                            </div>
                        </div>
                    </div>

                    <div class="row g-4 mb-5">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary">Sort Order</label>
                            <div class="input-group shadow-sm rounded-3 overflow-hidden">
                                <span class="input-group-text bg-light border-0"><i class="bi bi-sort-numeric-down text-primary"></i></span>
                                <input type="number" class="form-control border-0 bg-light" min="0" value="1">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold text-secondary">Status</label>
                            <div class="form-check form-switch mt-2 d-flex align-items-center">
                                <input class="form-check-input mt-0" type="checkbox" role="switch" id="statusSwitch" checked style="width: 3em; height: 1.5em; cursor: pointer;">
                                <label class="form-check-label ms-3 fw-bold text-success" for="statusSwitch" id="statusLabel">Active</label>
                            </div>
                        </div>
                    </div>

                    <hr class="mb-4 border-light">

                    <div class="d-flex justify-content-between align-items-center">
                        <button type="button" class="btn btn-outline-danger rounded-pill px-4 fw-medium">
                            <i class="bi bi-trash3 me-1"></i> Delete Skill
                        </button>
                        <div>
                            <button type="button" class="btn btn-light rounded-pill px-4 me-2 fw-medium text-secondary">Reset Changes</button>
                            <button type="submit" class="btn btn-warning shadow-sm rounded-pill px-5 fw-bold text-dark">
                                <i class="bi bi-save me-2"></i>Update Skill
                            </button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-4 position-sticky" style="top: 20px;">
            <div class="card-header bg-white border-bottom-0 pt-4 pb-0 px-4">
                <h6 class="fw-bold text-secondary mb-0"><i class="bi bi-magic me-2 text-warning"></i>Live Preview</h6>
            </div>
            <div class="card-body p-4 text-center">
                <div class="skill-preview-card p-4 rounded-4 shadow-sm" style="background: white; border: 1px solid #f1f5f9;">
                    <div id="previewIconBox" class="icon-preview-box rounded-4 mx-auto d-flex align-items-center justify-content-center shadow-lg mb-4" style="width: 90px; height: 90px; background: linear-gradient(135deg, #e34f26, #f76342); color: white;">
                        <i id="previewIcon" class="bi bi-filetype-html" style="font-size: 2.5rem;"></i>
                    </div>
                    <h4 id="previewName" class="fw-bold mb-2 text-dark">HTML5</h4>
                    <span id="previewCategory" class="badge bg-primary bg-opacity-10 text-primary rounded-pill px-3 py-2 mb-4 fw-medium" style="background-color: rgba(227, 79, 38, 0.1); color: #e34f26;">Frontend</span>
                    
                    <div class="progress bg-light" style="height: 8px; border-radius: 4px; overflow: hidden;">
                        <div id="previewBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%; background: linear-gradient(90deg, #e34f26, #f76342);" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="mt-4 text-center text-muted small bg-light p-3 rounded-3">
                    <p class="mb-0"><i class="bi bi-info-circle-fill text-primary me-2"></i>Edit the form to see changes instantly.</p>
                </div>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const skillName = document.getElementById('skillName');
        const skillCategory = document.getElementById('skillCategory');
        const skillIcon = document.getElementById('skillIcon');
        const primaryColor = document.getElementById('primaryColor');
        const altColor = document.getElementById('altColor');
        const primaryColorText = document.getElementById('primaryColorText');
        const altColorText = document.getElementById('altColorText');
        
        const previewName = document.getElementById('previewName');
        const previewCategory = document.getElementById('previewCategory');
        const previewIcon = document.getElementById('previewIcon');
        const previewIconBox = document.getElementById('previewIconBox');
        const previewBar = document.getElementById('previewBar');
        const statusSwitch = document.getElementById('statusSwitch');
        const statusLabel = document.getElementById('statusLabel');

        function updatePreview() {
            previewName.textContent = skillName.value || 'Skill Name';
            previewCategory.textContent = skillCategory.value || 'Category';
            
            // Handle icon change
            const iconClass = skillIcon.value || 'bi-code-square';
            previewIcon.className = 'bi ' + iconClass;
            
            // Handle colors
            const pColor = primaryColor.value;
            const aColor = altColor.value;
            
            primaryColorText.value = pColor;
            altColorText.value = aColor;
            
            const gradient = `linear-gradient(135deg, ${pColor}, ${aColor})`;
            const gradientHorizontal = `linear-gradient(90deg, ${pColor}, ${aColor})`;
            
            previewIconBox.style.background = gradient;
            previewBar.style.background = gradientHorizontal;
            
            // Adjust category badge color based on primary color
            previewCategory.style.backgroundColor = pColor + '1A'; // 10% opacity
            previewCategory.style.color = pColor;
        }

        // Add event listeners
        skillName.addEventListener('input', updatePreview);
        skillCategory.addEventListener('change', updatePreview);
        skillIcon.addEventListener('input', updatePreview);
        
        primaryColor.addEventListener('input', updatePreview);
        altColor.addEventListener('input', updatePreview);
        
        primaryColorText.addEventListener('input', function() {
            primaryColor.value = this.value;
            updatePreview();
        });
        
        altColorText.addEventListener('input', function() {
            altColor.value = this.value;
            updatePreview();
        });

        statusSwitch.addEventListener('change', function() {
            if(this.checked) {
                statusLabel.textContent = 'Active';
                statusLabel.classList.replace('text-danger', 'text-success');
            } else {
                statusLabel.textContent = 'Inactive';
                statusLabel.classList.replace('text-success', 'text-danger');
            }
        });
    });
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\portfolio\resources\views/Skills/edit.blade.php ENDPATH**/ ?>