@extends('layouts.master')

@section('content')

<div class="workflow-page">

    <div class="workflow-header">

        <div>

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

            <div class="workflow-subtitle">
                Issue medicines, vaccines, consumables and supplies from inventory
            </div>

        </div>

    </div>

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

        @csrf

        {{-- ISSUE INFORMATION --}}

        <div class="workflow-card">

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

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

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

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

                        <label>Issue Number</label>

                        <input type="text"
                               name="issue_no"
                               value="{{ $issueNo ?? 'AUTO' }}"
                               readonly>

                    </div>

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

                        <label>Issue Date</label>

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

                    </div>

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

                        <label>Issue Type</label>

                        <select name="issue_type">

                            <option value="Department">
                                Department
                            </option>

                            <option value="Outreach">
                                Outreach
                            </option>

                            <option value="Facility">
                                Facility
                            </option>

                            <option value="Disposal">
                                Disposal
                            </option>

                            <option value="Adjustment">
                                Adjustment
                            </option>

                        </select>

                    </div>

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

                        <label>Source Location</label>

                        <select
                            name="source_location_id"
                            id="source_location_id">

                            @foreach($locations as $location)

                                <option value="{{ $location->id }}">
                                    {{ $location->name }}
                                </option>

                            @endforeach

                        </select>

                    </div>

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

                        <label>Destination</label>

                        <select name="destination_location_id">

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

                            @foreach($locations as $location)

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

                                    {{ $location->name }}

                                </option>

                            @endforeach

                        </select>

                    </div>

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

                        <label>Reference No</label>

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

                    </div>

                </div>

            </div>

        </div>

        {{-- ISSUE ITEMS --}}

        <div class="workflow-card">

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

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

                <table class="workflow-table">

                    <thead>

                        <tr>

                            <th width="25%">
                                Item
                            </th>

                            <th width="18%">
                                Batch
                            </th>

                            <th width="15%">
                                Expiry
                            </th>

                            <th width="12%">
                                Available
                            </th>

                            <th width="15%">
                                Issue Qty
                            </th>

                            <th width="15%">
                                Action
                            </th>

                        </tr>

                    </thead>

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

                        <tr>

                            <td>

                                <select
                                    name="item_id[]"
                                    class="item-select">

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

                                    @if(isset($items))

                                        @foreach($items as $item)

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

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

                                            </option>

                                        @endforeach

                                    @endif

                                </select>

                            </td>

                            <td>

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

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

                                </select>

                            </td>

                            <td>

                                <input type="text"
                                       name="expiry[]"
                                       value=""
                                       readonly>

                            </td>

                            <td>

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

                            </td>

                            <td>

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

                            </td>

                            <td>

                                <button type="button"
                                        class="workflow-btn workflow-btn-outline remove-row">
                                    Remove
                                </button>

                            </td>

                        </tr>

                    </tbody>

                </table>

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

                    <button type="button"
                            id="add-item-btn"
                            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>

        {{-- ISSUE SUMMARY --}}

        <div class="workflow-card">

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

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

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

                    <div>

                        <strong>
                            Total Line Items:
                        </strong>

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

                    </div>

                    <div>

                        <strong>
                            Total Quantity Issued:
                        </strong>

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

                    </div>

                    <div>

                        <strong>
                            Total Batches Selected:
                        </strong>

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

                    </div>

                </div>

            </div>

        </div>

        {{-- ACTIONS --}}

        <div class="workflow-actions">

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

                Cancel

            </a>

                <button type="submit"
                        name="action"
                        value="draft"
                        class="workflow-btn workflow-btn-secondary">
                    Save Draft
                </button>

                <button type="submit"
                        name="action"
                        value="submit"
                        class="workflow-btn workflow-btn-success">
                    Submit For Approval
                </button>

        </div>

    </form>

</div>

<script>

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

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

        if (!e.target.classList.contains('item-select')) {
            return;
        }

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

        let itemId =
            e.target.value;

        let locationId =
            document.getElementById(
                'source_location_id'
            ).value;

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

        if (!itemId || !locationId) {

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

            return;
        }

        fetch(
            '/supply/issues/batches/' +
            itemId +
            '/' +
            locationId
        )

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

        .then(data => {

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

            data.forEach(function(batch) {

                batchSelect.innerHTML +=
                    '<option ' +
                    'data-expiry="' +
                    batch.expiry_date +
                    '" ' +
                    'data-qty="' +
                    batch.quantity_on_hand +
                    '" ' +
                    'value="' +
                    batch.batch_no +
                    '">' +
                    batch.batch_no +
                    ' (' +
                    batch.quantity_on_hand +
                    ')' +
                    '</option>';

            });

        });

    });

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

        if (!e.target.classList.contains('batch-select')) {
            return;
        }

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

        let selected =
            e.target.options[
                e.target.selectedIndex
            ];

        row.querySelector(
            'input[name="expiry[]"]'
        ).value =
            selected.dataset.expiry || '';

        row.querySelector(
            'input[name="available[]"]'
        ).value =
            selected.dataset.qty || 0;

    });

    document
.getElementById('add-item-btn')
.addEventListener('click', function () {

    let tbody =
        document.getElementById(
            'issue-items-body'
        );

    let firstRow =
        tbody.querySelector('tr');

    let newRow =
        firstRow.cloneNode(true);

    newRow.querySelectorAll('input').forEach(function(input){

        if (
            input.name === 'available[]'
        ) {
            input.value = 0;
        } else {
            input.value = '';
        }

    });

    newRow.querySelectorAll('select').forEach(function(select){

        select.selectedIndex = 0;

        if (
            select.classList.contains(
                'batch-select'
            )
        ) {
            select.innerHTML =
                '<option value="">Select Batch</option>';
        }

    });

    tbody.appendChild(newRow);

});

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

    if (
        !e.target.classList.contains(
            'remove-row'
        )
    ) {
        return;
    }

    let rows =
        document.querySelectorAll(
            '#issue-items-body tr'
        );

    if (rows.length === 1) {
        return;
    }

    e.target
        .closest('tr')
        .remove();

});

document
.getElementById('source_location_id')
.addEventListener('change', function() {

    let sourceId = this.value;

    let destination =
        document.querySelector(
            'select[name="destination_location_id"]'
        );

    destination.value = '';

    destination
        .querySelectorAll('option')
        .forEach(function(option) {

            option.disabled = false;

            if (
                option.value === sourceId &&
                option.value !== ''
            ) {
                option.disabled = true;
            }

        });

});

});

</script>

@endsection