@extends('layouts.master')

@section('content')

<div class="workflow-page">

    <div class="workflow-header">

        <div>

            <h1 class="workflow-title">
                Receive Transfer
            </h1>

            <div class="workflow-subtitle">
                Confirm receipt of transferred stock at destination location
            </div>

        </div>

        <div class="workflow-actions">

            <a href="{{ route('supply.transfers.show', $id) }}"
               class="workflow-btn workflow-btn-outline">

                Back

            </a>

        </div>

    </div>

    <form method="POST"
          action="{{ route('supply.transfers.process-receive', $id) }}">

        @csrf

        {{-- TRANSFER INFORMATION --}}

        <div class="workflow-card">

            <div class="workflow-card-header">
                Transfer Information
            </div>

            <div class="workflow-card-body">

                <div class="workflow-grid-4">

                    <div>

                        <strong>Transfer Number</strong>

                        <div style="margin-top:8px;">
                            TRF-00001
                        </div>

                    </div>

                    <div>

                        <strong>Transfer Date</strong>

                        <div style="margin-top:8px;">
                            {{ date('Y-m-d') }}
                        </div>

                    </div>

                    <div>

                        <strong>From Location</strong>

                        <div style="margin-top:8px;">
                            Central Store
                        </div>

                    </div>

                    <div>

                        <strong>To Location</strong>

                        <div style="margin-top:8px;">
                            Pharmacy
                        </div>

                    </div>

                </div>

            </div>

        </div>

        {{-- RECEIPT DETAILS --}}

        <div class="workflow-card">

            <div class="workflow-card-header">
                Receipt Information
            </div>

            <div class="workflow-card-body">

                <div class="workflow-grid-3">

                    <div class="workflow-form-group">

                        <label>
                            Receipt Date
                        </label>

                        <input type="date"
                               name="receipt_date"
                               value="{{ date('Y-m-d') }}">

                    </div>

                    <div class="workflow-form-group">

                        <label>
                            Received By
                        </label>

                        <input type="text"
                               name="received_by">

                    </div>

                    <div class="workflow-form-group">

                        <label>
                            Condition
                        </label>

                        <select name="condition">

                            <option>
                                Good
                            </option>

                            <option>
                                Damaged
                            </option>

                            <option>
                                Partial
                            </option>

                        </select>

                    </div>

                </div>

            </div>

        </div>

        {{-- ITEMS RECEIVED --}}

        <div class="workflow-card">

            <div class="workflow-card-header">
                Items Received
            </div>

            <div class="workflow-card-body">

                <table class="workflow-table">

                    <thead>

                        <tr>

                            <th>Item</th>
                            <th>Batch</th>
                            <th>Expiry</th>
                            <th>Qty Sent</th>
                            <th>Qty Received</th>
                            <th>Variance</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr>

                            <td>
                                Paracetamol 500mg
                            </td>

                            <td>
                                PCM24001
                            </td>

                            <td>
                                2027-05-31
                            </td>

                            <td>
                                500
                            </td>

                            <td>

                                <input type="number"
                                       name="received_qty[]"
                                       value="500">

                            </td>

                            <td>

                                <input type="number"
                                       value="0"
                                       readonly>

                            </td>

                        </tr>

                        <tr>

                            <td>
                                Amoxicillin 250mg
                            </td>

                            <td>
                                AMX24002
                            </td>

                            <td>
                                2026-12-31
                            </td>

                            <td>
                                300
                            </td>

                            <td>

                                <input type="number"
                                       name="received_qty[]"
                                       value="300">

                            </td>

                            <td>

                                <input type="number"
                                       value="0"
                                       readonly>

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

        {{-- VARIANCE DETAILS --}}

        <div class="workflow-card">

            <div class="workflow-card-header">
                Variance / Damage Remarks
            </div>

            <div class="workflow-card-body">

                <div class="workflow-form-group">

                    <label>
                        Remarks
                    </label>

                    <textarea rows="5"
                              name="remarks"></textarea>

                </div>

            </div>

        </div>

        {{-- SUMMARY --}}

        <div class="workflow-card">

            <div class="workflow-card-header">
                Receipt Summary
            </div>

            <div class="workflow-card-body">

                <div class="workflow-grid-3">

                    <div>

                        <strong>Total Items</strong>

                        <div style="margin-top:8px;">
                            2
                        </div>

                    </div>

                    <div>

                        <strong>Total Quantity Sent</strong>

                        <div style="margin-top:8px;">
                            800
                        </div>

                    </div>

                    <div>

                        <strong>Total Quantity Received</strong>

                        <div style="margin-top:8px;">
                            800
                        </div>

                    </div>

                </div>

            </div>

        </div>

        {{-- ACTIONS --}}

        <div class="workflow-actions">

            <a href="{{ route('supply.transfers.show', $id) }}"
               class="workflow-btn workflow-btn-outline">

                Cancel

            </a>

            <button type="submit"
                    class="workflow-btn workflow-btn-success">

                Complete Receipt

            </button>

        </div>

    </form>

</div>

@endsection