@include('auth.header')

<div class="main-content">
    <div class="content">
        <div class="tab-menu">
            <a href="{{ url('products') }}" style="display: contents;">
                <div class="tab active-submenu">
                    <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">
                    <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>
        <h2>NEW PRODUCT</h2>
        <br>
        <form method="POST" action="{{ route('product.store') }}" onsubmit="disableSubmitButton()">
            @csrf
            <!-- BRAND NAME -->
            <label for="brand_name">BRAND NAME</label><br>
            <input id="brand_name" type="text" name="brand_name" value="{{ old('brand_name') }}"><br>
            @error('brand_name')
                <span style="color:red;">{{ $message }}</span>
            @enderror
            <br>
            <!-- GENERIC NAME -->
            <label for="generic_name">GENERIC NAME</label><br>
            <select id="generic_name" name="generic_name">
                <option value="" disabled {{ old('generic_name') ? '' : 'selected' }}></option>
                @foreach ($generics as $generic)
                    <option value="{{ $generic->id }}" {{ old('generic_name') == $generic->id ? 'selected' : '' }}>
                        {!! $generic->name !!}
                    </option>
                @endforeach
            </select><br>
            @error('generic_name')
                <span style="color:red;">{{ $message }}</span>
            @enderror
            <br>
            <!-- THERAPEUTIC NAME -->
            <label for="therapeutic">THERAPEUTIC NAME</label><br>
            <select id="therapeutic" name="therapeutic">
                <option value="" disabled {{ old('therapeutic') ? '' : 'selected' }}></option>
                @foreach ($therapeutics as $therapeutic)
                    <option value="{{ $therapeutic->id }}"
                        {{ old('therapeutic') == $therapeutic->id ? 'selected' : '' }}>
                        {!! $therapeutic->name !!}
                    </option>
                @endforeach
            </select><br>
            @error('therapeutic')
                <span style="color:red;">{{ $message }}</span>
            @enderror
            <br>
            <!-- DOSAGE FORM -->
            <label for="dosage_form">DOSAGE FORM</label><br>
            <select id="dosage_form" name="dosage_form">
                <option value="" disabled {{ old('dosage_form') ? '' : 'selected' }}></option>
                @foreach (['Tablet','Chewable Tablet','IV Injection', 'Capsule', 'Syrup', 'Injection', 'Cream', 'Ointment', 'Powder', 'Gel', 'Solution', 'Drops', 'Spray', 'Lotion'] as $form)
                    <option value="{{ $form }}" {{ old('dosage_form') == $form ? 'selected' : '' }}>
                        {{ ucfirst($form) }}
                    </option>
                @endforeach
            </select><br>
            @error('dosage_form')
                <span style="color:red;">{{ $message }}</span>
            @enderror
            <br>
            <!-- TOP -->
            <label for="top">TOP PRODUCT (?)</label><br>
            <select id="top" name="top">
                <option value="" disabled {{ old('top') ? '' : 'selected' }}></option>
                <option value="Yes" {{ old('top') == 'Yes' ? 'selected' : '' }}>Yes</option>
                <option value="No" {{ old('top') == 'No' ? 'selected' : '' }}>No</option>
                <option value="TopOne" {{ old('TopOne') == 'TopOne' ? 'selected' : '' }}>TopOne</option>
            </select><br>
            @error('top')
                <span style="color:red;">{{ $message }}</span>
            @enderror
            <br>
             <!-- IMG FILE NAME -->
            <label for="img">IMAGE FILE NAME</label><br>
            <input id="img" type="text" name="img" value="{{ old('img') }}"><br>
            @error('img')
                <span style="color:red;">{{ $message }}</span>
            @enderror
            <br>
            <!-- PDF FILE NAME -->
            <label for="pdf">PDF FILE NAME</label><br>
            <input id="pdf" type="text" name="pdf" value="{{ old('pdf') }}"><br>
            @error('pdf')
                <span style="color:red;">{{ $message }}</span>
            @enderror
            <br>
            <!-- SUBMIT -->
            <button class="button green" style="width:100%;" type="submit">Save!</button>

        </form>

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

    </div>
</div>

@include('auth.footer')