@extends('layouts.admin')
@section('title', 'Medicine Directory')
@section('page', 'medicine')
@section('content')
<div class="page-content">
    <div class="page-head">
        <div>
            <div class="breadcrumbs"><a href="{{ route('admin.dashboard') }}">Dashboard</a> <i class="bi bi-chevron-right"></i> Medicine Directory</div>
            <h1 class="page-title">Medicine Directory & Disease Prescriptions</h1>
            <p class="page-subtitle">Add, manage and standardize medicines with active chemical composition, dose, frequency and clinical indications.</p>
        </div>
        <button class="btn-primary-teal" type="button" onclick="resetMed()" data-bs-toggle="modal" data-bs-target="#medicineModal"><i class="bi bi-plus-lg me-1"></i> Add Medicine to Directory</button>
    </div>

    <div class="stats-grid">
        <div class="stat-card"><div class="stat-icon stat-blue"><i class="bi bi-capsule"></i></div><div><div class="stat-label">Total Medicines</div><div class="stat-number">{{ $medicines->total() }}</div><div class="stat-meta">Active in directory</div></div></div>
        <div class="stat-card"><div class="stat-icon stat-green"><i class="bi bi-file-earmark-text"></i></div><div><div class="stat-label">With Composition</div><div class="stat-number">{{ $medicines->filter(fn($m)=>$m->compositions->count())->count() }}</div><div class="stat-meta">documented</div></div></div>
        <div class="stat-card"><div class="stat-icon stat-green"><i class="bi bi-beaker"></i></div><div><div class="stat-label">Categories</div><div class="stat-number">{{ $categories->count() }}</div><div class="stat-meta">drug categories</div></div></div>
        <div class="stat-card"><div class="stat-icon stat-purple"><i class="bi bi-people"></i></div><div><div class="stat-label">Prescribing Contributors</div><div class="stat-number">{{ \App\Models\User::whereIn('role',['doctor','admin'])->count() }}</div><div class="stat-meta">Doctors & Admins</div></div></div>
    </div>

    <form method="GET" class="card-admin filter-card">
        <div class="filter-top">
            <div class="input-icon search-control"><i class="bi bi-search"></i><input name="search" value="{{ request('search') }}" class="form-control" placeholder="Search by Medicine Name, Composition or Brand..."></div>
            <select name="category" class="form-select" style="width:200px" onchange="this.form.submit()">
                <option value="">All Drug Categories</option>
                @foreach($categories as $c)<option value="{{ $c }}" @selected(request('category')===$c)>{{ $c }}</option>@endforeach
            </select>
            <button class="btn-outline-soft" type="submit">Filter</button>
        </div>
    </form>

    <div class="d-flex justify-content-between align-items-center my-2"><div>Showing <strong>{{ $medicines->count() }}</strong> of {{ $medicines->total() }} medicines</div></div>

    <div class="medicine-grid">
        @forelse($medicines as $m)
            @php $comp = $m->compositions->map(fn($c)=>trim($c->chemical.' '.$c->strength))->join(' + '); @endphp
            <article class="card-admin med-card">
                <div class="med-top">
                    <span class="category-badge">{{ $m->drug_category ?? 'General' }}</span>
                    <span class="{{ $m->addedBy && $m->addedBy->isAdmin() ? 'admin-badge' : 'author-badge' }}"><i class="bi bi-person-heart"></i> {{ $m->addedBy?->name ?? 'Clinic Admin' }}</span>
                </div>
                <div class="med-title"><i class="bi bi-link-45deg text-primary"></i> {{ $m->name }}@if($m->brand_name) <small class="text-secondary">({{ $m->brand_name }})</small>@endif</div>
                <div class="composition"><div class="composition-label"><i class="bi bi-beaker"></i> Active Chemical Composition</div><div class="composition-text">{{ $comp ?: '—' }}</div></div>
                <div class="clinical"><i class="bi bi-bookmark"></i> Disease / Clinical Indication:</div>
                <span class="disease-tag">{{ $m->indication ?? 'General Condition' }}</span>
                <div class="med-meta-grid">
                    <div class="meta-box"><div class="meta-label">Default Dose & Frequency</div><div class="meta-value">{{ $m->default_dosage ?? '1 Tablet' }} • {{ $m->default_frequency ?? 'OD' }}</div></div>
                    <div class="meta-box"><div class="meta-label">Standard Course</div><div class="meta-value"><i class="bi bi-clock"></i> {{ $m->default_duration ?? '5 days' }}</div></div>
                </div>
                <div class="instructions"><strong>Instructions:</strong> {{ $m->instructions ?? 'Follow the prescribed instructions carefully.' }}</div>
                <div class="med-actions">
                    <span class="status-pill {{ $m->status ? 'status-paid' : 'status-pending' }}">{{ $m->status ? 'Active' : 'Inactive' }}</span>
                    <div class="action-icons">
                        <button type="button" title="Edit" data-bs-toggle="modal" data-bs-target="#medicineModal" onclick='editMed(@json($m->load("compositions")))'><i class="bi bi-pencil"></i></button>
                        <form method="POST" action="{{ route('admin.medicines.destroy', $m) }}" class="d-inline" onsubmit="return confirm('Remove this medicine?')">@csrf @method('DELETE')<button type="submit" title="Delete"><i class="bi bi-trash"></i></button></form>
                    </div>
                </div>
            </article>
        @empty
            <div class="empty-state"><i class="bi bi-capsule"></i><h6>No medicines yet</h6><p>Add one to build your directory.</p></div>
        @endforelse
    </div>
    <div class="pagination-admin mt-3">
        <span>Page {{ $medicines->currentPage() }} of {{ $medicines->lastPage() }}</span>
        <div class="d-flex gap-1">
            <a class="page-btn {{ $medicines->onFirstPage()?'disabled':'' }}" href="{{ $medicines->previousPageUrl() ?? '#' }}">‹</a>
            <a class="page-btn {{ $medicines->hasMorePages()?'':'disabled' }}" href="{{ $medicines->nextPageUrl() ?? '#' }}">›</a>
        </div>
    </div>
</div>

<div class="modal fade" id="medicineModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl medicine-modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title-wrap"><div class="modal-icon"><i class="bi bi-link-45deg"></i></div>
                    <div><div class="modal-title" id="medModalTitle">Add New Medicine to Directory</div><div class="modal-subtitle">Configure chemical composition and clinical indication.</div></div>
                </div><button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" id="medForm" action="{{ route('admin.medicines.store') }}">
                @csrf
                <input type="hidden" name="_method" id="med-method" value="POST">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6"><label class="form-label fw-bold">Medicine Name <span class="required">*</span></label><input name="name" id="med-name" class="form-control" required placeholder="e.g. Augmentin 625 Duo"></div>
                        <div class="col-md-3"><label class="form-label fw-bold">Brand Name</label><input name="brand_name" id="med-brand" class="form-control"></div>
                        <div class="col-md-3"><label class="form-label fw-bold">Drug Category</label><input name="drug_category" id="med-category" class="form-control" placeholder="e.g. Antibiotic"></div>
                    </div>
                    <div class="section-box mt-3">
                        <div class="section-title amber"><i class="bi bi-beaker"></i> Active Chemical Composition & Strength</div>
                        <div id="compRows" class="mt-2"></div>
                        <button type="button" class="btn-outline-soft mt-2" id="addComp"><i class="bi bi-plus-lg me-1"></i>Add Composition</button>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-4"><label class="form-label">Default Dosage</label><input name="default_dosage" id="med-dosage" class="form-control" placeholder="1 Tablet"></div>
                        <div class="col-md-4"><label class="form-label">Frequency</label><input name="default_frequency" id="med-frequency" class="form-control" placeholder="Twice daily"></div>
                        <div class="col-md-4"><label class="form-label">Duration</label><input name="default_duration" id="med-duration" class="form-control" placeholder="5 days"></div>
                        <div class="col-md-6"><label class="form-label">Disease / Clinical Indication</label><input name="indication" id="med-indication" class="form-control"></div>
                        <div class="col-md-3"><label class="form-label">Access Level</label><select name="access_level" id="med-access" class="form-select"><option value="all">All</option><option value="doctor">Doctor</option><option value="admin">Admin</option></select></div>
                        <div class="col-md-3 d-flex align-items-end"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="status" id="med-status" value="1" checked><label class="form-check-label">Active</label></div></div>
                        <div class="col-12"><label class="form-label">Instructions</label><textarea name="instructions" id="med-instructions" class="form-control" rows="2"></textarea></div>
                    </div>
                </div>
                <div class="modal-footer"><button class="btn-secondary-outline" type="button" data-bs-dismiss="modal">Cancel</button><button class="btn-primary-teal" type="submit">Save Medicine</button></div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    const medBase = "{{ url('admin/medicines') }}"; let ci = 0;
    function compRow(chem='',str=''){const d=document.createElement('div');d.className='composition-add-row mb-2';d.innerHTML=`<div class="input-icon flex-grow-1"><i class="bi bi-capsule"></i><input class="form-control" name="compositions[${ci}][chemical]" placeholder="Chemical (e.g. Amoxicillin)" value="${chem}"></div><input class="form-control" style="max-width:150px" name="compositions[${ci}][strength]" placeholder="Strength" value="${str}"><button type="button" class="btn-outline-soft" onclick="this.parentNode.remove()">&times;</button>`;ci++;return d;}
    document.getElementById('addComp').addEventListener('click',()=>document.getElementById('compRows').appendChild(compRow()));
    function resetMed(){const f=document.getElementById('medForm');f.action=medBase;document.getElementById('med-method').value='POST';f.reset();document.getElementById('compRows').innerHTML='';document.getElementById('compRows').appendChild(compRow());document.getElementById('med-status').checked=true;document.getElementById('medModalTitle').textContent='Add New Medicine to Directory';}
    function editMed(m){const f=document.getElementById('medForm');f.action=medBase+'/'+m.id;document.getElementById('med-method').value='PUT';document.getElementById('med-name').value=m.name??'';document.getElementById('med-brand').value=m.brand_name??'';document.getElementById('med-category').value=m.drug_category??'';document.getElementById('med-dosage').value=m.default_dosage??'';document.getElementById('med-frequency').value=m.default_frequency??'';document.getElementById('med-duration').value=m.default_duration??'';document.getElementById('med-indication').value=m.indication??'';document.getElementById('med-access').value=m.access_level??'all';document.getElementById('med-instructions').value=m.instructions??'';document.getElementById('med-status').checked=!!m.status;const w=document.getElementById('compRows');w.innerHTML='';ci=0;(m.compositions||[]).forEach(c=>w.appendChild(compRow(c.chemical,c.strength)));if(!(m.compositions||[]).length)w.appendChild(compRow());document.getElementById('medModalTitle').textContent='Edit Medicine';}
</script>
@endpush
@endsection