@extends('layouts.recruiter')
@section('title', 'Company Profile — JOBES')

@section('recruiter_content')
<div class="card-recruiter-panel animate__animated animate__fadeIn">
    <h5 class="fw-800 text-dark mb-4" style="font-size:1.1rem; border-left:3px solid #0d9488; padding-left:10px;">Company Profile</h5>
    
<style>
    .hover-opacity-100:hover, .group:hover .hover-opacity-100 { opacity: 1 !important; }
    .opacity-0 { opacity: 0; }
    .transition-all-300 { transition: all 0.3s ease; }
    .hover-scale { transition: transform 0.3s ease; }
    .hover-scale:hover { transform: scale(1.1); }
</style>

    <form method="POST" action="{{ route('recruiter.company.update') }}" enctype="multipart/form-data">
        @csrf
        
        <!-- Beautiful Interactive Banner & Logo Custom Editor Card -->
        <div class="card border-0 rounded-4 shadow-sm overflow-hidden bg-white mb-4 position-relative" style="border: 1px solid #f1f5f9 !important;">
            <!-- Banner Container with Hover Effect -->
            <div class="position-relative overflow-hidden group" style="height: 180px; background: {{ $company->banner ? 'url('.$company->banner_url.')' : 'linear-gradient(135deg, #0d9488 0%, #0284c7 100%)' }}; background-size: cover; background-position: center; transition: all 0.3s ease;">
                <!-- Floating banner grid pattern if no banner exists -->
                @if(!$company->banner)
                    <div class="position-absolute inset-0 opacity-10" style="background-image: radial-gradient(#fff 1.5px, transparent 1.5px); background-size: 20px 20px;"></div>
                @endif
                
                <!-- Banner Upload Overlay Button -->
                <div class="position-absolute inset-0 bg-dark bg-opacity-50 d-flex align-items-center justify-content-center opacity-0 hover-opacity-100 transition-all-300" style="cursor: pointer;" onclick="document.getElementById('bannerInput').click();">
                    <div class="text-white text-center">
                        <div class="rounded-circle bg-white bg-opacity-25 p-3 mb-2 d-inline-flex align-items-center justify-content-center hover-scale" style="width: 50px; height: 50px;">
                            <i class="fas fa-camera fs-5"></i>
                        </div>
                        <div class="small fw-700">Change Cover Banner</div>
                        <div class="text-white-50" style="font-size:0.7rem;">Recommended: 1200x400 px (Max 4MB)</div>
                    </div>
                </div>
                
                <!-- Hidden File Input for Banner -->
                <input type="file" name="banner" id="bannerInput" class="d-none" accept="image/*" onchange="previewImage(this, 'bannerPreview')">
            </div>

            <!-- Overlapping Logo Card & Controls Row -->
            <div class="px-4 pb-4 position-relative" style="margin-top: -50px; z-index: 10;">
                <div class="d-flex flex-column flex-md-row align-items-start align-items-md-end gap-3 justify-content-between flex-wrap">
                    <!-- Logo & Text Info -->
                    <div class="d-flex align-items-end gap-3 flex-wrap text-start">
                        <!-- Logo container with custom upload hover overlay -->
                        <div class="position-relative rounded-circle bg-white p-1 shadow-sm overflow-hidden group" style="width: 100px; height: 100px; border: 4px solid #fff; flex-shrink: 0; transition: all 0.3s ease;">
                            <img src="{{ $company->logo_url }}" id="logoPreviewImg" alt="Company Logo" class="rounded-circle" style="width: 100%; height: 100%; object-fit: contain; background: #f8fafc;">
                            
                            <!-- Logo Upload Overlay -->
                            <div class="position-absolute inset-0 bg-dark bg-opacity-50 d-flex align-items-center justify-content-center opacity-0 hover-opacity-100 transition-all-300" style="cursor: pointer; border-radius: 50%;" onclick="document.getElementById('logoInput').click();">
                                <div class="text-white text-center p-1">
                                    <i class="fas fa-camera small"></i>
                                    <div class="fw-700" style="font-size: 0.65rem; line-height: 1.1; margin-top: 2px;">Change Logo</div>
                                </div>
                            </div>
                            
                            <!-- Hidden File Input for Logo -->
                            <input type="file" name="logo" id="logoInput" class="d-none" accept="image/*" onchange="previewImage(this, 'logoPreview')">
                        </div>
                        
                        <div class="text-start mb-1">
                            <h4 class="fw-800 text-dark mb-1" style="font-size: 1.25rem; letter-spacing: -0.5px;">
                                {{ $company->name ?? 'Company Name' }}
                            </h4>
                            <p class="text-muted small fw-600 mb-0 d-flex align-items-center gap-1.5">
                                <i class="far fa-building text-teal-accent"></i>
                                {{ $company->industry ?? 'Industry not set' }}
                            </p>
                        </div>
                    </div>

                    <!-- Instant status label or helper instructions -->
                    <div class="mb-1 text-md-end">
                        <span class="badge bg-teal-accent-light text-teal-accent px-3 py-2 fw-800" style="border-radius: 30px; font-size: 0.75rem;">
                            <i class="fas fa-info-circle me-1"></i> Click on banner or logo to upload
                        </span>
                    </div>
                </div>
            </div>
        </div>
        
        @if($errors->any())
            <div class="alert alert-danger border-0 mb-4 shadow-xs" style="background:#fee2e2; color:#991b1b; border-radius:10px;">
                <ul class="mb-0 small fw-600 text-start">
                    @foreach($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        
        <div class="row g-3">
            <div class="col-md-6 col-12">
                <label class="form-label text-muted small fw-700">Company Name *</label>
                <input type="text" name="name" class="form-control form-ctrl-light" value="{{ $company->name ?? '' }}" required>
            </div>
            <div class="col-md-6 col-12">
                <label class="form-label text-muted small fw-700">Industry</label>
                <input type="text" name="industry" class="form-control form-ctrl-light" value="{{ $company->industry ?? '' }}" placeholder="e.g. Information Technology">
            </div>
            <div class="col-md-6 col-12">
                <label class="form-label text-muted small fw-700">Website URL</label>
                <input type="url" name="website" class="form-control form-ctrl-light" value="{{ $company->website ?? '' }}" placeholder="https://yourcompany.com">
            </div>
            <div class="col-md-6 col-12">
                <label class="form-label text-muted small fw-700">Company Contact Email</label>
                <input type="email" name="email" class="form-control form-ctrl-light" value="{{ $company->email ?? '' }}" placeholder="hr@company.com">
            </div>
            <div class="col-md-4 col-12">
                <label class="form-label text-muted small fw-700">City</label>
                <input type="text" name="city" class="form-control form-ctrl-light" value="{{ $company->city ?? '' }}">
            </div>
            <div class="col-md-4 col-12">
                <label class="form-label text-muted small fw-700">State</label>
                <input type="text" name="state" class="form-control form-ctrl-light" value="{{ $company->state ?? '' }}">
            </div>
            <div class="col-md-4 col-12">
                <label class="form-label text-muted small fw-700">Company Size</label>
                <select name="company_size" class="form-select form-ctrl-light">
                    <option value="">Select Size</option>
                    @foreach(['1-10','11-50','51-200','201-500','501-1000','1000+'] as $s)
                        <option value="{{ $s }}" {{ ($company->company_size ?? '') === $s ? 'selected' : '' }}>
                            {{ $s }} employees
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-12">
                <label class="form-label text-muted small fw-700">About Company</label>
                <textarea name="description" class="form-control form-ctrl-light" rows="6" placeholder="Tell job seekers about your company, culture, and mission...">{{ $company->description ?? '' }}</textarea>
            </div>
            <div class="col-md-4 col-12">
                <label class="form-label text-muted small fw-700">LinkedIn URL</label>
                <input type="url" name="linkedin" class="form-control form-ctrl-light" value="{{ $company->linkedin ?? '' }}" placeholder="https://linkedin.com/company/...">
            </div>
            <div class="col-md-4 col-12">
                <label class="form-label text-muted small fw-700">Twitter URL</label>
                <input type="url" name="twitter" class="form-control form-ctrl-light" value="{{ $company->twitter ?? '' }}" placeholder="https://twitter.com/...">
            </div>
            <div class="col-md-4 col-12">
                <label class="form-label text-muted small fw-700">Founded Year</label>
                <input type="number" name="founded_year" class="form-control form-ctrl-light" value="{{ $company->founded_year ?? '' }}" placeholder="e.g. 2015" min="1900" max="{{ date('Y') }}">
            </div>
        </div>
        
        <div class="text-start border-top pt-4 mt-4" style="border-top-color:#f1f5f9 !important;">
            <button type="submit" class="btn btn-teal-gradient px-5 py-2.5">
                <i class="fas fa-save me-2"></i> Save Company Profile
            </button>
        </div>
    </form>
</div>

<script>
function previewImage(input, target) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            if (target === 'logoPreview') {
                document.getElementById('logoPreviewImg').src = e.target.result;
            } else if (target === 'bannerPreview') {
                input.parentElement.style.backgroundImage = "url('" + e.target.result + "')";
            }
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endsection