@extends('layouts.app')

@section('content')

<div style="
    max-width:900px;
    margin:auto;
">

    <!-- ========================================= -->
    <!-- HEADER -->
    <!-- ========================================= -->

    <div style="
        margin-bottom:20px;
    ">

        <div style="
            font-size:30px;
            font-weight:900;
            color:#111827;
            line-height:1.1;
            margin-bottom:6px;
        ">

            Pharmacy Stock Entry

        </div>

        <div style="
            font-size:14px;
            color:#64748b;
        ">

            Register incoming medicine inventory batches

        </div>

    </div>

    <!-- ========================================= -->
    <!-- FORM -->
    <!-- ========================================= -->

    <form method="POST"
          action="{{ route('admin.pharmacy-stock.store') }}">

        @csrf

        <div class="panel"
             style="
                padding:24px;
             ">

            <!-- MEDICINE -->

            <div style="
                margin-bottom:18px;
            ">

                <label style="
                    display:block;
                    margin-bottom:8px;
                    font-size:12px;
                    font-weight:800;
                    color:#374151;
                    text-transform:uppercase;
                    letter-spacing:.3px;
                ">

                    Medicine

                </label>

                <select
                    name="medicine_id"
                    required
                    style="
                        width:100%;
                        border:1px solid #d1d5db;
                        border-radius:10px;
                        padding:12px;
                        font-size:14px;
                    "
                >

                    <option value="">

                        Select Medicine

                    </option>

                    @foreach($medicines as $medicine)

                        <option value="{{ $medicine->id }}">

                            {{ $medicine->medicine_name }}

                            @if(!empty($medicine->strength))
                                - {{ $medicine->strength }}
                            @endif

                            @if(!empty($medicine->formulation))
                                ({{ $medicine->formulation }})
                            @endif

                        </option>

                    @endforeach

                </select>

            </div>

            <!-- GRID -->

            <div style="
                display:grid;
                grid-template-columns:repeat(2,1fr);
                gap:18px;
                margin-bottom:18px;
            ">

                <!-- BATCH -->

                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:12px;
                        font-weight:800;
                        color:#374151;
                        text-transform:uppercase;
                    ">

                        Batch Number

                    </label>

                    <input
                        type="text"
                        name="batch_no"
                        required
                        style="
                            width:100%;
                            border:1px solid #d1d5db;
                            border-radius:10px;
                            padding:12px;
                            font-size:14px;
                        "
                    >

                </div>

                <!-- EXPIRY -->

                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:12px;
                        font-weight:800;
                        color:#374151;
                        text-transform:uppercase;
                    ">

                        Expiry Date

                    </label>

                    <input
                        type="date"
                        name="expiry_date"
                        style="
                            width:100%;
                            border:1px solid #d1d5db;
                            border-radius:10px;
                            padding:12px;
                            font-size:14px;
                        "
                    >

                </div>

            </div>

            <!-- GRID -->

            <div style="
                display:grid;
                grid-template-columns:repeat(2,1fr);
                gap:18px;
                margin-bottom:18px;
            ">

                <!-- QUANTITY -->

                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:12px;
                        font-weight:800;
                        color:#374151;
                        text-transform:uppercase;
                    ">

                        Quantity Received

                    </label>

                    <input
                        type="number"
                        step="0.01"
                        min="1"
                        name="quantity_received"
                        required
                        style="
                            width:100%;
                            border:1px solid #d1d5db;
                            border-radius:10px;
                            padding:12px;
                            font-size:14px;
                        "
                    >

                </div>

                <!-- UNIT COST -->

                <div>

                    <label style="
                        display:block;
                        margin-bottom:8px;
                        font-size:12px;
                        font-weight:800;
                        color:#374151;
                        text-transform:uppercase;
                    ">

                        Unit Cost

                    </label>

                    <input
                        type="number"
                        step="0.01"
                        min="0"
                        name="unit_cost"
                        style="
                            width:100%;
                            border:1px solid #d1d5db;
                            border-radius:10px;
                            padding:12px;
                            font-size:14px;
                        "
                    >

                </div>

            </div>

            <!-- SUPPLIER -->

            <div style="
                margin-bottom:24px;
            ">

                <label style="
                    display:block;
                    margin-bottom:8px;
                    font-size:12px;
                    font-weight:800;
                    color:#374151;
                    text-transform:uppercase;
                ">

                    Supplier Name

                </label>

                <input
                    type="text"
                    name="supplier_name"
                    style="
                        width:100%;
                        border:1px solid #d1d5db;
                        border-radius:10px;
                        padding:12px;
                        font-size:14px;
                    "
                >

            </div>

            <!-- ACTIONS -->

            <div style="
                display:flex;
                justify-content:flex-end;
                gap:12px;
            ">

                <a href="{{ route('admin.pharmacy-stock.index') }}"
                   style="
                        padding:12px 16px;
                        border-radius:10px;
                        background:#f3f4f6;
                        color:#374151;
                        text-decoration:none;
                        font-size:13px;
                        font-weight:800;
                   ">

                    Cancel

                </a>

                <button type="submit"
                        style="
                            border:none;
                            border-radius:10px;
                            background:#16a34a;
                            color:white;
                            padding:12px 18px;
                            font-size:13px;
                            font-weight:800;
                            cursor:pointer;
                        ">

                    Save Stock Entry

                </button>

            </div>

        </div>

    </form>

</div>

@endsection