@include('auth.header')
<div class="main-content">

    <div class="content">
        <div class="tab-menu">
            <a href="{{ url('products') }}" style="display: contents;">
                <div class="tab ">
                    <i class="fas fa-file-invoice"></i> New Product
                </div>
            </a>

            <a href="{{ url('product-list') }}" style="display: contents;">
                <div class="tab ">
                    <i class="fas fa-search"></i> Product List
                </div>
            </a>

            <a href="{{ url('generics') }}" style="display: contents;">
                <div class="tab active-submenu">
                    <i class="fas fa-user-clock"></i> Generics
                </div>
            </a>

            <a href="{{ url('therapeutics') }}" style="display: contents;">
                <div class="tab">
                    <i class="fas fa-user-clock"></i> Therapeutics
                </div>
            </a>

        </div>
        <div class="container">

            @if (session('success'))
                {{ session('success') }}
            @endif
            <form method="POST" action="{{ route('generics.store') }}" onsubmit="disableSubmitButton()">
                @csrf
                <input id="name" type="text" name="name" value="{{ old('name') }}"
                    placeholder="GENERIC NAME">
                @error('name')
                    {{ $message }}
                @enderror
                <button class="button green" style="width:100%;" type="submit">Save!</button><br><br>
            </form>

            <script>
                function disableSubmitButton() {
                    document.getElementById('submitButton').disabled = true;
                    document.getElementById('submitButton').innerText = 'Saving...';
                }
            </script>

            <h2>GENERIC LIST</h2><br>
            <table class="excel-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($generics as $generic)
                        <tr>
                            <td>{{ $generic->id }}</td>
                            <td>{!! $generic->name !!}</td>
                            <td>
                                <form method="POST" action="{{ route('generics.destroy', $generic->id) }}"
                                    onsubmit="return confirm('Are you sure you want to delete this item?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="button red" type="submit">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" style="text-align: center;">No generic found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

    </div>
</div>

@include('auth.footer')