@extends('layouts.app')
@section('content')
<style>
.gm-page-title{font-size:28px;font-weight:400;color:#4b5563;margin:0 0 22px}.gm-card{background:#fff;border-radius:10px;padding:10px 14px 18px;box-shadow:0 1px 3px rgba(0,0,0,.05)}.gm-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}.gm-left{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.gm-search{border:1px solid #cfd3df;border-radius:5px;padding:10px 12px;min-width:250px}.gm-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border-radius:5px;background:#7060f4;color:#fff;text-decoration:none;border:0;cursor:pointer;font-weight:600}.gm-btn.danger{background:#e65343}.gm-btn.small{padding:6px 10px;font-size:12px}.gm-table-wrap{overflow-x:auto}.gm-table{width:100%;border-collapse:collapse;min-width:920px}.gm-table th{background:#f4f3f8;color:#6b6880;padding:14px 8px;text-align:left;font-size:13px;font-weight:500}.gm-table td{padding:12px 8px;border-bottom:1px solid #e7e5ec;color:#676475;font-size:14px}.gm-actions{display:flex;gap:6px}.gm-alert{padding:10px 12px;background:#ecfdf5;color:#065f46;border-radius:6px;margin-bottom:12px}.gm-empty{color:#8d899a}.gm-pagination{margin-top:15px}
</style>
<h1 class="gm-page-title">Modifiers</h1>
<div class="gm-card">
    @if(session('success'))<div class="gm-alert">{{ session('success') }}</div>@endif
    <div class="gm-toolbar">@include('custom-crud._export-menu',['module'=>'modifiers'])
        <div class="gm-left">
            <a class="gm-btn" href="{{ route('gm-modifiers.create') }}">+ Add Modifier</a>
            <input id="gm-search" class="gm-search" type="search" placeholder="Search Here">
        </div>
    </div>
    <div class="gm-table-wrap">
        <table class="gm-table" id="gm-export-table">
            <thead><tr><th>SN</th><th>Name</th><th>Price</th><th>Description</th><th>Total Ingredients</th><th>Total Cost</th><th>Added By</th><th>Actions</th></tr></thead>
            <tbody>
            @forelse($records as $record)
                <tr>
                    <td>{{ $records->firstItem() + $loop->index }}</td>
                    <td>{{ $record->name }}</td>
                    <td>{{ number_format((float)$record->price, 2) }}</td>
                    <td>{{ $record->description ?: '-' }}</td>
                    <td>{{ $record->ingredient_consumptions_count }}</td>
                    <td>{{ number_format((float)($record->ingredient_consumptions_sum_total_cost ?? 0), 2) }}</td>
                    <td>{{ $record->creator?->name ?? 'Admin User' }}</td>
                    <td><div class="gm-actions"><a class="gm-btn small" href="{{ route('gm-modifiers.edit', $record) }}">Edit</a><form method="POST" action="{{ route('gm-modifiers.destroy', $record) }}" onsubmit="return confirm('Delete this modifier?')">@csrf @method('DELETE')<button class="gm-btn danger small" type="submit">Delete</button></form></div></td>
                </tr>
            @empty
                <tr><td colspan="8" class="gm-empty">No data available in table</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div class="gm-pagination">{{ $records->links() }}</div>
</div>
<script>
document.addEventListener('DOMContentLoaded',()=>{const s=document.getElementById('gm-search');const rows=[...document.querySelectorAll('#gm-export-table tbody tr')];s?.addEventListener('input',()=>{const q=s.value.toLowerCase();rows.forEach(r=>r.style.display=r.innerText.toLowerCase().includes(q)?'':'none')})});
</script>
@endsection