@extends('layouts.master')

@section('content')

<div class="workflow-page">

    <div class="workflow-header">

        <div>

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

            <div class="workflow-subtitle">
                Update Draft Stock Issue
            </div>

        </div>

    </div>

    <form method="POST"
          action="{{ route('supply.issues.update', $issue->id) }}">

        @csrf
        @method('PUT')

        {{-- 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="{{ $issue->issue_no }}"
                               readonly>

                    </div>

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

                        <label>Issue Date</label>

                        <input type="date"
                               name="issue_date"
                               value="{{ $issue->issue_date }}">

                    </div>

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

                        <label>Issue Type</label>

                        <select name="issue_type">

                            <option value="Department"
                                {{ $issue->issue_type == 'DEPARTMENT' ? 'selected' : '' }}>
                                Department
                            </option>

                            <option value="Outreach"
                                {{ $issue->issue_type == 'OUTREACH' ? 'selected' : '' }}>
                                Outreach
                            </option>

                            <option value="Facility"
                                {{ $issue->issue_type == 'FACILITY' ? 'selected' : '' }}>
                                Facility
                            </option>

                            <option value="Disposal"
                                {{ $issue->issue_type == 'DISPOSAL' ? 'selected' : '' }}>
                                Disposal
                            </option>

                            <option value="Adjustment"
                                {{ $issue->issue_type == 'ADJUSTMENT' ? 'selected' : '' }}>
                                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 }}"
                                    {{ $issue->source_location_id == $location->id ? 'selected' : '' }}>

                                    {{ $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 }}"
                                    {{ $issue->destination_location_id == $location->id ? 'selected' : '' }}>

                                    {{ $location->name }}

                                </option>

                            @endforeach

                        </select>

                    </div>

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

                        <label>Reference No</label>

                        <input
                            type="text"
                            name="reference_no"
                            value="{{ $issue->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">

                        @forelse($issueItems as $issueItem)

                        <tr>

                            <td>

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

                                    @foreach($items as $item)

                                        <option
                                            value="{{ $item->id }}"
                                            {{ $item->id == $issueItem->item_id ? 'selected' : '' }}>

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

                                        </option>

                                    @endforeach

                                </select>

                            </td>

                            <td>

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

                                    @foreach(
                                        $batches->where(
                                            'item_id',
                                            $issueItem->item_id
                                        ) as $batch
                                    )

                                        <option
                                            value="{{ $batch->batch_no }}"
                                            data-expiry="{{ $batch->expiry_date }}"
                                            data-qty="{{ $batch->quantity_on_hand }}"
                                            {{ $batch->batch_no == $issueItem->batch_no ? 'selected' : '' }}>

                                            {{ $batch->batch_no }}
                                            ({{ $batch->quantity_on_hand }})

                                        </option>

                                    @endforeach

                                </select>

                            </td>

                            <td>

                                <input
                                    type="text"
                                    name="expiry[]"
                                    value="{{ $issueItem->expiry_date }}"
                                    readonly>

                            </td>

                            <td>

                                <input
                                    type="text"
                                    name="available[]"
                                    value="{{ $issueItem->available_qty }}"
                                    readonly>

                            </td>

                            <td>

                                <input
                                    type="number"
                                    min="1"
                                    name="quantity[]"
                                    value="{{ $issueItem->quantity_issued }}">

                            </td>

                            <td>

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

                                    Remove

                                </button>

                            </td>

                        </tr>

                        @empty

                        <tr>

                            <td colspan="6"
                                style="text-align:center;">

                                No draft items found.

                            </td>

                        </tr>

                        @endforelse

                    </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">{{ $issue->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">
                            {{ $issueItems->count() }}
                        </span>

                    </div>

                    <div>

                        <strong>
                            Total Quantity Issued:
                        </strong>

                        <span id="total-qty">
                            {{ $issueItems->sum('quantity_issued') }}
                        </span>

                    </div>

                    <div>

                        <strong>
                            Total Batches Selected:
                        </strong>

                        <span id="total-batches">
                            {{ $issueItems->count() }}
                        </span>

                    </div>

                </div>

            </div>

        </div>

        {{-- ACTIONS --}}

        <div class="workflow-actions">

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

                Cancel

            </a>

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

                Update 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