@extends('technician.layouts.app')
@section('title', 'My Profile')
@section('content')
<style>
    .profile-hero{display:flex;align-items:center;gap:18px;background:linear-gradient(120deg,#14213d,#253b67);color:#fff;border-radius:18px;padding:25px;margin-bottom:20px;box-shadow:0 10px 28px #14213d20}.profile-avatar{width:68px;height:68px;flex:0 0 68px;display:grid;place-items:center;border-radius:50%;background:#fca311;color:#14213d;font-size:27px;font-weight:800}.profile-hero h1{margin:0 0 5px;font-size:25px}.profile-hero p{margin:0;color:#dbeafe}.availability-badge{display:inline-flex;align-items:center;gap:7px;margin-top:11px;padding:6px 11px;border-radius:20px;background:#ffffff18;font-size:12px;font-weight:800}.availability-badge i{font-size:8px;color:#4ade80}.profile-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px}.profile-panel{background:#fff;border-radius:15px;padding:22px;box-shadow:0 5px 20px #14213d10}.profile-panel-title{display:flex;align-items:center;gap:10px;margin-bottom:18px}.profile-panel-title i{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#fff3dd;color:#c87500}.profile-panel-title h2{font-size:17px;margin:0}.availability-options{display:grid;gap:10px;margin-bottom:18px}.availability-option{display:flex;align-items:center;gap:12px;border:1px solid #e2e8f0;border-radius:11px;padding:13px;cursor:pointer;transition:.2s}.availability-option:hover{border-color:#fca311;background:#fffaf1}.availability-option:has(input:checked){border-color:#fca311;background:#fff7e8;box-shadow:0 0 0 2px #fca31120}.availability-option input{accent-color:#fca311}.availability-option strong{display:block;font-size:14px}.availability-option small{display:block;color:#64748b;margin-top:2px}.profile-info{display:grid;gap:3px}.profile-info-row{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid #edf0f5}.profile-info-row:last-child{border:0}.profile-info-row>i{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:9px;background:#f1f5f9;color:#14213d}.profile-info-row span{display:block;color:#64748b;font-size:12px;margin-bottom:3px}.profile-info-row strong{font-size:14px;overflow-wrap:anywhere}@media(max-width:700px){.profile-grid{grid-template-columns:1fr}.profile-hero{align-items:flex-start}.profile-avatar{width:56px;height:56px;flex-basis:56px;font-size:22px}}
</style>
<div class="profile-hero">
    <div class="profile-avatar">{{ strtoupper(substr($technician->technician_name, 0, 1)) }}</div>
    <div><h1>{{ $technician->technician_name }}</h1><p>Technician account and work availability</p><span class="availability-badge"><i class="fas fa-circle"></i> {{ $technician->availability }}</span></div>
</div>
@if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
<div class="profile-grid">
    <section class="profile-panel">
        <div class="profile-panel-title"><i class="fas fa-user-clock"></i><div><h2>Availability Status</h2></div></div>
        <form method="POST" action="{{ route('technician.profile.availability') }}">@csrf @method('PUT')
            <div class="availability-options">
                @foreach(['Available' => ['Ready to receive new jobs','fa-circle-check'], 'Busy' => ['Currently attending work','fa-briefcase'], 'On Leave' => ['Not available for assignments','fa-calendar-xmark']] as $availability => [$description, $icon])
                    <label class="availability-option"><input type="radio" name="availability" value="{{ $availability }}" {{ $technician->availability === $availability ? 'checked' : '' }} required><i class="fas {{ $icon }}"></i><span><strong>{{ $availability }}</strong><small>{{ $description }}</small></span></label>
                @endforeach
            </div>
            <button class="tech-button" type="submit"><i class="fas fa-floppy-disk"></i> Update Availability</button>
        </form>
    </section>
    <section class="profile-panel">
        <div class="profile-panel-title"><i class="fas fa-id-card"></i><div><h2>Personal Information</h2></div></div>
        <div class="profile-info">
            <div class="profile-info-row"><i class="fas fa-user"></i><div><span>Full Name</span><strong>{{ $technician->technician_name }}</strong></div></div>
            <div class="profile-info-row"><i class="fas fa-phone"></i><div><span>Mobile Number</span><strong>{{ $technician->mobile }}</strong></div></div>
            <div class="profile-info-row"><i class="fas fa-envelope"></i><div><span>Email Address</span><strong>{{ $technician->email }}</strong></div></div>
            <div class="profile-info-row"><i class="fas fa-location-dot"></i><div><span>Address</span><strong>{{ $technician->address ?: 'Not provided' }}</strong></div></div>
        </div>
    </section>
</div>
@endsection