@extends('layouts.admin')
@section('title','Profession Management')
@section('subtitle','Manage professions, sub-professions, salutations, and visual identity.')
@section('content')
<div class="profession-toolbar">
    <form class="profession-filter" method="get">
        <div>
            <i data-lucide="search"></i>
            <input name="q" value="{{request('q')}}" placeholder="Search professions">
        </div>
        <select name="type">
            <option value="">All types</option>
            <option value="parent" @selected(request('type')==='parent' )>Parent professions</option>
            <option value="sub" @selected(request('type')==='sub' )>Sub-professions</option>
        </select>
        <select name="status">
            <option value="">All statuses</option>
            <option value="1" @selected(request('status')==='1' )>Active</option>
            <option value="0" @selected(request('status')==='0' )>Inactive</option>
        </select>
        <button>Apply Filters</button>
    </form>
    <button class="new-profession-button" type="button" onclick="document.getElementById('create-profession').showModal()">
        <i data-lucide="plus"></i>Add Profession </button>
</div>
<div class="profession-stats">
    <article>
        <i data-lucide="briefcase-business"></i>
        <div>
            <span>Total</span>
            <strong>{{number_format($stats['total'])}}</strong>
        </div>
    </article>
    <article>
        <i data-lucide="network"></i>
        <div>
            <span>Parent Professions</span>
            <strong>{{number_format($stats['parents'])}}</strong>
        </div>
    </article>
    <article>
        <i data-lucide="git-branch"></i>
        <div>
            <span>Sub-professions</span>
            <strong>{{number_format($stats['sub'])}}</strong>
        </div>
    </article>
    <article>
        <i data-lucide="circle-check"></i>
        <div>
            <span>Active</span>
            <strong>{{number_format($stats['active'])}}</strong>
        </div>
    </article>
</div>
<div class="profession-grid">@forelse($professions as $profession) <form class="profession-card" method="post" action="{{route('professions.update',$profession)}}">@csrf @method('put') <div class="profession-card-head">
            <span class="profession-swatch" style="--profession-color:{{$profession->color_hex}}">
                <i data-lucide="briefcase-business"></i>
            </span>
            <div>
                <small>{{$profession->parent_id ? 'SUB-PROFESSION' : 'PARENT PROFESSION'}}</small>
                <h2>{{$profession->name}}</h2>
            </div>
            <span class="profession-state {{$profession->status?'active':'inactive'}}">{{$profession->status?'Active':'Inactive'}}</span>
        </div>
        <div class="profession-fields">
            <label>
                <span>Name</span>
                <input name="name" value="{{$profession->name}}" required>
            </label>
            <div class="field-row">
                <label>
                    <span>Salutation</span>
                    <input name="salutation" value="{{$profession->salutation}}" required>
                </label>
                <label class="color-field">
                    <span>Color</span>
                    <input name="color_hex" type="color" value="{{$profession->color_hex}}">
                    <b>{{$profession->color_hex}}</b>
                </label>
            </div>
            <label>
                <span>Parent Profession</span>
                <select name="parent_id">
                    <option value="0">None — top-level profession</option>@foreach($parents as $parent)@if($parent->id!==$profession->id) <option value="{{$parent->id}}" @selected($profession->parent_id===$parent->id)>{{$parent->name}}</option>@endif @endforeach
                </select>
            </label>
            <label class="status-toggle">
                <input type="hidden" name="status" value="0">
                <input type="checkbox" name="status" value="1" @checked($profession->status)> <span></span>Available in the application </label>
        </div>
        <footer>
            <span>@if($profession->parent_id)Parent: {{$profession->parent?->name??'Unknown'}}@else{{$profession->children_count}} sub-profession{{$profession->children_count===1?'':'s'}} · {{$profession->professionals_count}} professional{{$profession->professionals_count===1?'':'s'}}@endif</span>
            <button>Save Changes</button>
        </footer>
    </form>@empty <div class="empty profession-empty">No professions match these filters.</div>@endforelse </div>
<div class="profession-pagination">{{$professions->onEachSide(1)->links('vendor.pagination.default')}}</div>
<dialog id="create-profession" class="profession-dialog">
    <form method="post" action="{{route('professions.store')}}">@csrf <div class="dialog-head">
            <div>
                <small>NEW RECORD</small>
                <h2>Add Profession</h2>
                <p>Create a parent profession or assign it beneath an existing profession.</p>
            </div>
            <button type="button" onclick="this.closest('dialog').close()" aria-label="Close">
                <i data-lucide="x"></i>
            </button>
        </div>
        <div class="dialog-fields">
            <label>
                <span>Name</span>
                <input name="name" value="{{old('name')}}" required>
            </label>
            <label>
                <span>Salutation</span>
                <input name="salutation" value="{{old('salutation')}}" placeholder="Dr., Atty., Mr. / Mrs." required>
            </label>
            <label>
                <span>Parent Profession</span>
                <select name="parent_id">
                    <option value="0">None — create a top-level profession</option>@foreach($parents as $parent) <option value="{{$parent->id}}">{{$parent->name}}</option>@endforeach
                </select>
            </label>
            <label class="dialog-color">
                <span>Profession Color</span>
                <input name="color_hex" type="color" value="#7bd300">
                <b>#7bd300</b>
            </label>
            <label class="status-toggle">
                <input type="hidden" name="status" value="0">
                <input type="checkbox" name="status" value="1" checked>
                <span></span>Active and available </label>
        </div>
        <footer>
            <button type="button" onclick="this.closest('dialog').close()">Cancel</button>
            <button class="create-button">Create Profession</button>
        </footer>
    </form>
</dialog>
@endsection