@extends('layouts.app')
@section('title', 'Suppliers')
@section('content')

@php
    $isAdmin = auth()->user()->hasAnyRole('Super Admin', 'Hospital Admin');
@endphp

<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <div>
        <h1 class="text-lg font-bold text-gray-900">Suppliers</h1>
        <p class="text-xs text-gray-400">Managed payee list — receptionists pick from these when posting expenses</p>
    </div>
    @if($isAdmin)
    <button onclick="openSupplierModal()" class="btn-primary text-xs flex items-center gap-1">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        Add Supplier
    </button>
    @endif
</div>

@if(session('success'))
<div class="bg-green-50 border border-green-200 rounded-lg px-3 py-2 mb-3 text-xs text-green-800">{{ session('success') }}</div>
@endif
@if(session('warning'))
<div class="bg-amber-50 border border-amber-200 rounded-lg px-3 py-2 mb-3 text-xs text-amber-800">{{ session('warning') }}</div>
@endif

<div class="bg-white rounded-xl border shadow-sm">
    {{-- Filter bar --}}
    <div class="px-5 py-3 border-b bg-gray-50/50">
        <form method="GET" class="flex flex-wrap gap-2 items-end">
            <div class="flex-1 min-w-[200px]">
                <input type="text" name="q" value="{{ request('q') }}" placeholder="Search by name, phone, KRA pin, contact person..." class="form-input text-xs w-full">
            </div>
            <div class="flex gap-1 text-xs">
                @foreach([
                    ['active','Active',$counts['active']],
                    ['inactive','Inactive',$counts['inactive']],
                    ['all','All',$counts['active']+$counts['inactive']],
                ] as [$val,$label,$count])
                <a href="{{ route('suppliers.index', array_merge(request()->only('q'), ['show'=>$val])) }}"
                   class="px-3 py-1.5 rounded border {{ $show===$val ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50' }}">
                    {{ $label }} <span class="opacity-70">({{ $count }})</span>
                </a>
                @endforeach
            </div>
            <button class="btn-primary text-xs">Search</button>
            @if(request()->hasAny(['q','show']))<a href="{{ route('suppliers.index') }}" class="btn-secondary text-xs">Clear</a>@endif
        </form>
    </div>

    {{-- Table --}}
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50">
                    <th class="table-header">Name</th>
                    <th class="table-header">Contact Person</th>
                    <th class="table-header">Phone</th>
                    <th class="table-header">KRA PIN</th>
                    <th class="table-header">Category</th>
                    <th class="table-header">Status</th>
                    @if($isAdmin)<th class="table-header">Actions</th>@endif
                </tr>
            </thead>
            <tbody>
            @forelse($suppliers as $s)
            <tr class="border-b border-gray-50 {{ !$s->is_active ? 'bg-gray-50/40 text-gray-400' : '' }}">
                <td class="table-cell text-xs font-medium">{{ $s->name }}</td>
                <td class="table-cell text-xs">{{ $s->contact_person ?? '-' }}</td>
                <td class="table-cell text-xs">{{ $s->phone ?? '-' }}</td>
                <td class="table-cell text-xs font-mono">{{ $s->kra_pin ?? '-' }}</td>
                <td class="table-cell text-xs">{{ $s->category ?? '-' }}</td>
                <td class="table-cell">
                    @if($s->is_active)
                        <span class="badge badge-success">Active</span>
                    @else
                        <span class="badge badge-gray">Inactive</span>
                    @endif
                </td>
                @if($isAdmin)
                <td class="table-cell">
                    <button
                        onclick='openSupplierModal(@json($s))'
                        class="text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded hover:bg-blue-100 font-medium">Edit</button>
                    <form method="POST" action="{{ route('suppliers.toggle', $s) }}" class="inline" onsubmit="return confirm('{{ $s->is_active ? 'Deactivate' : 'Reactivate' }} {{ addslashes($s->name) }}?');">
                        @csrf
                        <button type="submit" class="text-xs {{ $s->is_active ? 'text-red-600 bg-red-50 hover:bg-red-100' : 'text-green-600 bg-green-50 hover:bg-green-100' }} px-2 py-0.5 rounded font-medium">
                            {{ $s->is_active ? 'Deactivate' : 'Reactivate' }}
                        </button>
                    </form>
                </td>
                @endif
            </tr>
            @empty
            <tr>
                <td colspan="{{ $isAdmin ? 7 : 6 }}" class="table-cell text-center text-gray-400 py-8">
                    No suppliers found.
                    @if($isAdmin && !request('q'))Click <strong>+ Add Supplier</strong> to create one.@endif
                </td>
            </tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($suppliers->hasPages())<div class="px-4 py-3 border-t">{{ $suppliers->links() }}</div>@endif
</div>

@if($isAdmin)
{{-- Add / Edit modal --}}
<div id="supplierModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg mx-4 p-6 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-gray-900" id="supplierModalTitle">Add Supplier</h3>
            <button onclick="closeSupplierModal()" class="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
        </div>
        <form method="POST" id="supplierForm" action="{{ route('suppliers.store') }}">
            @csrf
            <input type="hidden" name="_method" id="supplierMethod" value="POST">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div class="md:col-span-2">
                    <label class="form-label">Name *</label>
                    <input type="text" name="name" id="sup_name" required maxlength="150" class="form-input">
                </div>
                <div>
                    <label class="form-label">Contact Person</label>
                    <input type="text" name="contact_person" id="sup_contact_person" maxlength="100" class="form-input">
                </div>
                <div>
                    <label class="form-label">Phone</label>
                    <input type="text" name="phone" id="sup_phone" maxlength="30" class="form-input" placeholder="07XX XXX XXX">
                </div>
                <div>
                    <label class="form-label">Email</label>
                    <input type="email" name="email" id="sup_email" maxlength="100" class="form-input">
                </div>
                <div>
                    <label class="form-label">KRA PIN</label>
                    <input type="text" name="kra_pin" id="sup_kra_pin" maxlength="30" class="form-input font-mono uppercase" placeholder="P051234567X">
                </div>
                <div>
                    <label class="form-label">Category</label>
                    <select name="category" id="sup_category" class="form-input">
                        <option value="General">General</option>
                        <option value="Pharmaceutical">Pharmaceutical</option>
                        <option value="Medical Supplies">Medical Supplies</option>
                        <option value="Equipment">Equipment</option>
                        <option value="Utilities">Utilities</option>
                        <option value="Services">Services</option>
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label class="form-label">Address</label>
                    <input type="text" name="address" id="sup_address" maxlength="500" class="form-input">
                </div>
                <div class="md:col-span-2">
                    <label class="form-label">Notes</label>
                    <textarea name="notes" id="sup_notes" rows="2" maxlength="500" class="form-input"></textarea>
                </div>
            </div>

            <div class="flex justify-end gap-2 mt-4">
                <button type="button" onclick="closeSupplierModal()" class="btn-secondary text-xs">Cancel</button>
                <button type="submit" class="btn-primary text-xs">Save Supplier</button>
            </div>
        </form>
    </div>
</div>

<script>
const SUPPLIER_STORE_URL = "{{ route('suppliers.store') }}";
const SUPPLIER_UPDATE_URL_TPL = "{{ route('suppliers.update', ['supplier' => '__ID__']) }}";

function openSupplierModal(supplier = null) {
    const form = document.getElementById('supplierForm');
    const title = document.getElementById('supplierModalTitle');
    const method = document.getElementById('supplierMethod');

    // Reset every field. Edit and create share one form so we always
    // start from a clean state to avoid leakage between actions.
    ['name','contact_person','phone','email','kra_pin','address','notes'].forEach(f => {
        const el = document.getElementById('sup_' + f);
        if (el) el.value = '';
    });
    document.getElementById('sup_category').value = 'General';

    if (supplier) {
        title.textContent = 'Edit Supplier';
        method.value = 'PUT';
        form.action = SUPPLIER_UPDATE_URL_TPL.replace('__ID__', supplier.id);

        document.getElementById('sup_name').value           = supplier.name           || '';
        document.getElementById('sup_contact_person').value = supplier.contact_person || '';
        document.getElementById('sup_phone').value          = supplier.phone          || '';
        document.getElementById('sup_email').value          = supplier.email          || '';
        document.getElementById('sup_kra_pin').value        = supplier.kra_pin        || '';
        document.getElementById('sup_address').value        = supplier.address        || '';
        document.getElementById('sup_notes').value          = supplier.notes          || '';
        if (supplier.category) document.getElementById('sup_category').value = supplier.category;
    } else {
        title.textContent = 'Add Supplier';
        method.value = 'POST';
        form.action = SUPPLIER_STORE_URL;
    }

    document.getElementById('supplierModal').classList.remove('hidden');
}

function closeSupplierModal() {
    document.getElementById('supplierModal').classList.add('hidden');
}
</script>
@endif

@endsection