@extends('layouts.admin')
@section('title', 'Careers')
@section('page-title', 'Career Fields')

@section('content')
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px">
    <div>
        <h2 style="font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800">Career Fields</h2>
        <p style="color:var(--text-muted);font-size:.85rem;margin-top:4px">{{ $careers->count() }} career fields</p>
    </div>
    <button class="btn btn-primary" onclick="openModal('addCareerModal')">
        <i class="fas fa-plus"></i> Add Career
    </button>
</div>

<div class="card" style="padding:0;margin-bottom:24px">
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Career</th>
                    <th>Category</th>
                    <th>Difficulty</th>
                    <th>Salary Range (PKR)</th>
                    <th>Duration</th>
                    <th>Featured</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($careers as $career)
                <tr>
                    <td>
                        <div style="display:flex;align-items:center;gap:10px">
                            <span style="font-size:1.4rem">{{ $career->icon ?? '💼' }}</span>
                            <div>
                                <div style="font-weight:600;font-size:.9rem">{{ $career->name }}</div>
                                <div style="font-size:.75rem;color:var(--text-muted)">{{ $career->slug }}</div>
                            </div>
                        </div>
                    </td>
                    <td><span class="badge badge-primary">{{ $career->category }}</span></td>
                    <td>
                        <span class="badge {{ $career->difficulty=='easy'?'badge-success':($career->difficulty=='hard'?'badge-danger':'badge-warning') }}">
                            {{ ucfirst($career->difficulty ?? 'moderate') }}
                        </span>
                    </td>
                    <td style="font-size:.83rem;color:var(--accent)">{{ $career->min_salary_pkr ?? '50k' }} — {{ $career->max_salary_pkr ?? '150k' }}</td>
                    <td style="font-size:.83rem;color:var(--text-muted)">{{ $career->years_to_complete ?? 4 }} years</td>
                    <td>
                        <span class="badge {{ $career->is_featured ? 'badge-success' : 'badge-info' }}">{{ $career->is_featured ? '⭐ Yes' : 'No' }}</span>
                    </td>
                    <td>
                        <div style="display:flex;gap:6px">
                            <button onclick="openModal('editCareer{{ $career->id }}')" class="btn btn-ghost btn-sm"><i class="fas fa-edit"></i></button>
                            <form action="{{ route('admin.careers.destroy', $career->id) }}" method="POST" onsubmit="return confirm('Delete this career?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-sm" style="background:rgba(229,62,62,.15);color:#FC8181"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>

                <!-- EDIT CAREER MODAL -->
                <div class="modal-overlay" id="editCareer{{ $career->id }}">
                    <div class="modal">
                        <div class="modal-header">
                            <h3 class="modal-title">Edit — {{ $career->name }}</h3>
                            <button class="modal-close" onclick="closeModal('editCareer{{ $career->id }}')">✕</button>
                        </div>
                        <form action="{{ route('admin.careers.update', $career->id) }}" method="POST">
                            @csrf @method('PUT')
                            <div class="grid-2">
                                <div class="form-group">
                                    <label class="form-label">Career Name</label>
                                    <input type="text" name="name" class="form-control" value="{{ $career->name }}" required>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Icon (emoji)</label>
                                    <input type="text" name="icon" class="form-control" value="{{ $career->icon }}">
                                </div>
                            </div>
                            <div class="grid-2">
                                <div class="form-group">
                                    <label class="form-label">Category</label>
                                    <select name="category" class="form-control">
                                        @foreach(['Engineering','Medical','Information Technology','Business','Law','Arts & Design','Education','Media'] as $cat)
                                        <option value="{{ $cat }}" {{ $career->category==$cat?'selected':'' }}>{{ $cat }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Difficulty</label>
                                    <select name="difficulty" class="form-control">
                                        <option value="easy" {{ $career->difficulty=='easy'?'selected':'' }}>Easy</option>
                                        <option value="moderate" {{ $career->difficulty=='moderate'?'selected':'' }}>Moderate</option>
                                        <option value="hard" {{ $career->difficulty=='hard'?'selected':'' }}>Hard</option>
                                    </select>
                                </div>
                            </div>
                            <div class="grid-2">
                                <div class="form-group">
                                    <label class="form-label">Min Salary (PKR)</label>
                                    <input type="text" name="min_salary_pkr" class="form-control" value="{{ $career->min_salary_pkr }}">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Max Salary (PKR)</label>
                                    <input type="text" name="max_salary_pkr" class="form-control" value="{{ $career->max_salary_pkr }}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">Description</label>
                                <textarea name="description" class="form-control" rows="3" required>{{ $career->description }}</textarea>
                            </div>
                            <div style="display:flex;gap:10px;margin-top:8px">
                                <button type="button" onclick="closeModal('editCareer{{ $career->id }}')" class="btn btn-ghost" style="flex:1">Cancel</button>
                                <button type="submit" class="btn btn-primary" style="flex:2"><i class="fas fa-save"></i> Save Changes</button>
                            </div>
                        </form>
                    </div>
                </div>
                @empty
                <tr><td colspan="7" style="text-align:center;padding:50px;color:var(--text-muted)">No careers added yet</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- ADD CAREER MODAL -->
<div class="modal-overlay" id="addCareerModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Add Career Field</h3>
            <button class="modal-close" onclick="closeModal('addCareerModal')">✕</button>
        </div>
        <form action="{{ route('admin.careers.store') }}" method="POST">
            @csrf
            <div class="grid-2">
                <div class="form-group">
                    <label class="form-label">Career Name</label>
                    <input type="text" name="name" class="form-control" placeholder="e.g. Software Engineer" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Icon (emoji)</label>
                    <input type="text" name="icon" class="form-control" placeholder="💻">
                </div>
            </div>
            <div class="grid-2">
                <div class="form-group">
                    <label class="form-label">Category</label>
                    <select name="category" class="form-control" required>
                        @foreach(['Engineering','Medical','Information Technology','Business','Law','Arts & Design','Education','Media'] as $cat)
                        <option value="{{ $cat }}">{{ $cat }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Difficulty</label>
                    <select name="difficulty" class="form-control">
                        <option value="easy">Easy</option>
                        <option value="moderate" selected>Moderate</option>
                        <option value="hard">Hard</option>
                    </select>
                </div>
            </div>
            <div class="grid-2">
                <div class="form-group">
                    <label class="form-label">Min Salary (PKR)</label>
                    <input type="text" name="min_salary_pkr" class="form-control" placeholder="50,000">
                </div>
                <div class="form-group">
                    <label class="form-label">Max Salary (PKR)</label>
                    <input type="text" name="max_salary_pkr" class="form-control" placeholder="200,000">
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Description</label>
                <textarea name="description" class="form-control" rows="3" placeholder="Brief description of this career..." required></textarea>
            </div>
            <div style="display:flex;gap:10px;margin-top:8px">
                <button type="button" onclick="closeModal('addCareerModal')" class="btn btn-ghost" style="flex:1">Cancel</button>
                <button type="submit" class="btn btn-primary" style="flex:2"><i class="fas fa-plus"></i> Add Career</button>
            </div>
        </form>
    </div>
</div>
@endsection