@extends('layouts.master')

@section('content')

<div class="workflow-page">

    <div class="workflow-header">

        <div>

            <h1 class="workflow-title">
                New Stock Transfer
            </h1>

            <div class="workflow-subtitle">
                Transfer stock between stores, departments and facilities
            </div>

        </div>

    </div>

    <form method="POST"
          action="{{ route('supply.transfers.store') }}">

        @csrf

        {{-- TRANSFER INFORMATION --}}

        <div class="workflow-card">

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

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

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

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

                        <label>
                            Transfer Number
                        </label>

                        <input type="text"
                               name="transfer_no"
                               value="AUTO"
                               readonly>

                    </div>

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

                        <label>
                            Transfer Date
                        </label>

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

                    </div>

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

                        <label>
                            Reference Number
                        </label>

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

                    </div>

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

                        <label>
                            From Location
                        </label>

                        <select name="from_location">

                            <option>Central Store</option>
                            <option>Pharmacy</option>
                            <option>Laboratory</option>
                            <option>Immunization Room</option>

                        </select>

                    </div>

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

                        <label>
                            To Location
                        </label>

                        <select name="to_location">

                            <option>Pharmacy</option>
                            <option>Laboratory</option>
                            <option>Dental</option>
                            <option>Optical</option>
                            <option>Immunization Room</option>
                            <option>Outreach Store</option>

                        </select>

                    </div>

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

                        <label>
                            Status
                        </label>

                        <select name="status">

                            <option>Draft</option>
                            <option>Approved</option>
                            <option>Dispatched</option>

                        </select>

                    </div>

                </div>

            </div>

        </div>

        {{-- TRANSFER ITEMS --}}

        <div class="workflow-card">

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

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

                <table class="workflow-table">

                    <thead>

                        <tr>

                            <th width="25%">Item</th>
                            <th width="15%">Batch</th>
                            <th width="15%">Expiry</th>
                            <th width="15%">Available</th>
                            <th width="15%">Transfer Qty</th>
                            <th width="15%">Action</th>

                        </tr>

                    </thead>

                    <tbody id="transfer-items-body">

                        <tr>

                            <td>

                                <select name="item_id[]">

                                    <option value="">
                                        Select Item
                                    </option>

                                    @foreach($items as $item)

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

                                            {{ $item->item_code }}
                                            -
                                            {{ $item->item_name }}

                                        </option>

                                    @endforeach

                                </select>

                            </td>

                            <td>

                                <select name="batch_no[]"
                                        class="batch-select">

                                    <option value="">
                                        Select Batch
                                    </option>

                                </select>

                            </td>

                            <td>

                                <input type="text"
                                       name="expiry[]"
                                       class="expiry-field"
                                       readonly>

                            </td>

                            <td>

                                <input type="text"
                                       name="available[]"
                                       class="available-field"
                                       value="0"
                                       readonly>

                            </td>

                            <td>

                                <input type="number"
                                       min="1"
                                       name="quantity[]">

                            </td>

                            <td>

                                <button type="button"
                                        class="workflow-btn workflow-btn-outline">

                                    Remove

                                </button>

                            </td>

                        </tr>

                    </tbody>

                </table>

                <div style="margin-top:15px;">

                    <button type="button"
                            class="workflow-btn workflow-btn-primary">

                        + Add Item

                    </button>

                </div>

            </div>

        </div>

        {{-- REMARKS --}}

        <div class="workflow-card">

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

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

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

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

                </div>

            </div>

        </div>

        {{-- SUMMARY --}}

        <div class="workflow-card">

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

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

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

                    <div>

                        <strong>Total Items:</strong>

                        <span id="total-items">
                            0
                        </span>

                    </div>

                    <div>

                        <strong>Total Quantity:</strong>

                        <span id="total-quantity">
                            0
                        </span>

                    </div>

                </div>

            </div>

        </div>

        {{-- ACTIONS --}}

        <div class="workflow-actions">

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

                Cancel

            </a>

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

                Save Draft

            </button>

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

                Approve Transfer

            </button>

        </div>

    </form>

</div>

@push('scripts')

<script>

document.addEventListener('DOMContentLoaded', function () {

    document.querySelectorAll(
        'select[name="item_id[]"]'
    ).forEach(function(itemSelect) {

        itemSelect.addEventListener(
            'change',
            function() {

                let row = this.closest('tr');

                let batchSelect =
                    row.querySelector('.batch-select');

                batchSelect.innerHTML =
                    '<option value="">Loading...</option>';

                fetch(
                    '/supply/transfers/item/' +
                    this.value +
                    '/batches'
                )

                .then(response => response.json())

                .then(data => {

                    batchSelect.innerHTML =
                        '<option value="">Select Batch</option>';

                    data.forEach(batch => {

                        let option =
                            document.createElement('option');

                        option.value =
                            batch.batch_no;

                        option.text =
                            batch.batch_no;

                        option.dataset.expiry =
                            batch.expiry_date ?? '';

                        option.dataset.available =
                            batch.quantity_on_hand ?? 0;

                        batchSelect.appendChild(option);

                    });

                });

            }
        );

    });

});

document.addEventListener(
    'change',
    function(e) {

        if (
            e.target.classList.contains(
                'batch-select'
            )
        ) {

            let row =
                e.target.closest('tr');

            let option =
                e.target.selectedOptions[0];

            row.querySelector(
                '.expiry-field'
            ).value =
                option.dataset.expiry || '';

            row.querySelector(
                '.available-field'
            ).value =
                option.dataset.available || 0;

        }

    }
);

</script>

@endpush

@endsection