@extends('layouts.app')
@section('title', __('Procedures'))

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
    <h1 class="h4 fw-bold mb-0">🧰 {{ __('Procedures') }}</h1>
    @can('create', App\Models\Procedure::class)
        <button class="btn mb-btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#procModal"
                onclick="procEdit(null)">+ {{ __('Add procedure') }}</button>
    @endcan
</div>

<form class="mb-3" method="GET">
    <input name="q" value="{{ request('q') }}" class="form-control" style="max-width:26rem"
           placeholder="{{ __('Search procedures…') }}">
</form>

<div class="mb-card p-3">
    <table class="table mb-table align-middle mb-0">
        <thead><tr>
            <th>{{ __('Procedure') }}</th><th>{{ __('Category') }}</th>
            <th>{{ __('Price') }}</th><th>{{ __('Duration') }}</th>
            <th>{{ __('Chart effect') }}</th><th></th>
        </tr></thead>
        <tbody>
        @forelse($procedures as $p)
            <tr class="{{ $p->is_active ? '' : 'opacity-50' }}">
                <td>
                    <strong>{{ $p->name_ar }}</strong>
                    <div class="mb-muted small">{{ $p->name_en }}</div>
                </td>
                <td><span class="badge text-bg-light">{{ __(ucfirst($p->category)) }}</span></td>
                <td dir="ltr">{{ number_format($p->default_price) }} IQD</td>
                <td class="mb-muted">{{ $p->default_duration_min }} {{ __('min') }}</td>
                <td>
                    @if($p->default_condition)
                        <span class="status-chip" style="background: {{ $conditions[$p->default_condition]['color'] }}">
                            {{ __($conditions[$p->default_condition]['label']) }}
                        </span>
                    @else — @endif
                </td>
                <td class="text-end">
                    @can('update', $p)
                        <button class="btn btn-sm mb-btn-ghost" data-bs-toggle="modal" data-bs-target="#procModal"
                                onclick='procEdit(@json($p->only(["id","name_en","name_ar","category","code","default_price","default_duration_min","default_condition","is_active"])))'>
                            {{ __('Edit') }}
                        </button>
                    @endcan
                </td>
            </tr>
        @empty
            <tr><td colspan="6" class="mb-muted py-4 text-center">{{ __('No procedures found.') }}</td></tr>
        @endforelse
        </tbody>
    </table>
</div>
{{ $procedures->links() }}

{{-- Add/Edit modal --}}
<div class="modal fade" id="procModal" tabindex="-1">
    <div class="modal-dialog">
        <form class="modal-content mb-card" method="POST" id="procForm" action="{{ route('tenant.procedures.store') }}">
            @csrf
            <input type="hidden" name="_method" id="procMethod" value="POST">
            <div class="modal-header" style="border-color:var(--mb-line)">
                <h2 class="h6 fw-bold mb-0" id="procTitle">{{ __('Add procedure') }}</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">{{ __('Arabic name') }}</label>
                    <input name="name_ar" id="f_name_ar" class="form-control" dir="rtl" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">{{ __('English name') }}</label>
                    <input name="name_en" id="f_name_en" class="form-control" dir="ltr" required>
                </div>
                <div class="row">
                    <div class="col-6 mb-3">
                        <label class="form-label">{{ __('Category') }}</label>
                        <select name="category" id="f_category" class="form-select">
                            @foreach($categories as $cat)
                                <option value="{{ $cat }}">{{ __(ucfirst($cat)) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-6 mb-3">
                        <label class="form-label">{{ __('Code') }}</label>
                        <input name="code" id="f_code" class="form-control" dir="ltr">
                    </div>
                    <div class="col-6 mb-3">
                        <label class="form-label">{{ __('Price (IQD)') }}</label>
                        <input type="number" name="default_price" id="f_price" min="0" step="250" class="form-control" required>
                    </div>
                    <div class="col-6 mb-3">
                        <label class="form-label">{{ __('Duration (min)') }}</label>
                        <input type="number" name="default_duration_min" id="f_duration" min="5" max="480" step="5" class="form-control" required>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">{{ __('Chart effect on completion') }}</label>
                    <select name="default_condition" id="f_condition" class="form-select">
                        <option value="">{{ __('None') }}</option>
                        @foreach($conditions as $key => $c)
                            <option value="{{ $key }}">{{ __($c['label']) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-check">
                    <input type="hidden" name="is_active" value="0">
                    <input class="form-check-input" type="checkbox" name="is_active" value="1" id="f_active" checked>
                    <label class="form-check-label" for="f_active">{{ __('Active') }}</label>
                </div>
            </div>
            <div class="modal-footer" style="border-color:var(--mb-line)">
                <button class="btn mb-btn-primary w-100">{{ __('Save changes') }}</button>
            </div>
        </form>
    </div>
</div>

@push('page-scripts')
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const STORE = @json(route('tenant.procedures.store'));
const UPDATE_BASE = @json(url('procedures'));
function procEdit(p) {
    const form = document.getElementById('procForm');
    document.getElementById('procMethod').value = p ? 'PUT' : 'POST';
    form.action = p ? `${UPDATE_BASE}/${p.id}` : STORE;
    document.getElementById('procTitle').textContent = p ? @json(__('Edit procedure')) : @json(__('Add procedure'));
    document.getElementById('f_name_ar').value = p?.name_ar ?? '';
    document.getElementById('f_name_en').value = p?.name_en ?? '';
    document.getElementById('f_category').value = p?.category ?? 'restorative';
    document.getElementById('f_code').value = p?.code ?? '';
    document.getElementById('f_price').value = p?.default_price ?? 0;
    document.getElementById('f_duration').value = p?.default_duration_min ?? 30;
    document.getElementById('f_condition').value = p?.default_condition ?? '';
    document.getElementById('f_active').checked = p ? !!p.is_active : true;
}
</script>
@endpush
@endsection