@extends('layouts.master')


@section('title', 'Work Flow Add/Edit')

@section('style')
<style>
    .wf-item {
        border: 1px solid #e7e7e7;
        border-radius: 12px;
        padding: 18px;
        margin-bottom: 18px;
        background: #fff;
    }

    .wf-step-title {
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 14px;
    }

    .wf-step-number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #f1f3f5;
        margin-right: 8px;
        font-weight: 700;
    }

    .wf-hint {
        font-size: 12px;
        color: #777;
        margin-top: 6px;
    }
</style>
@endsection

@section('script')
<script>
    //====================================================
    // Toggle Actor Fields
    //====================================================
    function toggleActorGroups(row) {

        const type =
            row.querySelector('.position-type')?.value || '';

        const facultyGroup =
            row.querySelector('.faculty-position-group');

        const roleGroup =
            row.querySelector('.role-position-group');

        const mainGroup =
            row.querySelector('.main-position-group');

        const subGroup =
            row.querySelector('.sub-position-group');

        [
            facultyGroup,
            roleGroup,
            mainGroup,
            subGroup
        ].forEach(function(group) {
            if (group) {
                group.classList.add('d-none');
            }
        });

        if (type === 'FACULTY' && facultyGroup) {
            facultyGroup.classList.remove('d-none');
        }

        if (type === 'ROLE' && roleGroup) {
            roleGroup.classList.remove('d-none');
        }

        if (type === 'MAIN' && mainGroup) {
            mainGroup.classList.remove('d-none');
        }

        if (type === 'SUB' && subGroup) {
            subGroup.classList.remove('d-none');
        }
    }


    //====================================================
    // Re-number Step + Limit Return/Reject
    //====================================================
    function refreshWorkflowRows() {

        const rows =
            document.querySelectorAll('.wf-item');

        rows.forEach(function(row, index) {

            const order = index + 1;

            const number =
                row.querySelector('.wf-step-number');

            if (number) {
                number.textContent = order;
            }

            const returnInput =
                row.querySelector('.wf-return-order');

            const rejectInput =
                row.querySelector('.wf-reject-order');

            [returnInput, rejectInput]
                .forEach(function(input) {

                    if (!input) {
                        return;
                    }

                    input.setAttribute('min', '1');

                    if (order <= 1) {

                        input.value = '';
                        input.readOnly = true;
                        input.removeAttribute('max');

                    } else {

                        input.readOnly = false;
                        input.setAttribute(
                            'max',
                            String(order - 1)
                        );

                        if (
                            input.value !== ''
                            &&
                            parseInt(input.value, 10) >= order
                        ) {
                            input.value = '';
                        }
                    }
                });
        });
    }


    //====================================================
    // Add Workflow Row
    //====================================================
    document
        .getElementById('add-more')
        ?.addEventListener(
            'click',
            function () {

                const firstItem =
                    document.querySelector('.wf-item');

                if (!firstItem) {
                    return;
                }

                const item =
                    firstItem.cloneNode(true);

                item.querySelectorAll('select')
                    .forEach(function(select) {
                        select.selectedIndex = 0;
                    });

                item.querySelectorAll('input[type="number"]')
                    .forEach(function(input) {
                        input.value = '';
                    });

                const typeSelect =
                    item.querySelector('.position-type');

                if (typeSelect) {
                    typeSelect.value = '';
                }

                const canEdit =
                    item.querySelector('.wf-can-edit');

                if (canEdit) {
                    canEdit.value = '0';
                }

                [
                    '.faculty-position-group',
                    '.role-position-group',
                    '.main-position-group',
                    '.sub-position-group'
                ].forEach(function(selector) {

                    const group =
                        item.querySelector(selector);

                    if (group) {
                        group.classList.add('d-none');
                    }
                });

                document
                    .getElementById('wf-group')
                    .appendChild(item);

                refreshWorkflowRows();
            }
        );


    //====================================================
    // Remove Workflow Row
    //====================================================
    document.addEventListener(
        'click',
        function(e) {

            const btn =
                e.target.closest('.remove');

            if (!btn) {
                return;
            }

            const items =
                document.querySelectorAll('.wf-item');

            if (items.length > 1) {
                btn.closest('.wf-item')?.remove();
                refreshWorkflowRows();
            }
        }
    );


    //====================================================
    // Change Position Type
    //====================================================
    document.addEventListener(
        'change',
        function(e) {

            if (
                !e.target.classList.contains(
                    'position-type'
                )
            ) {
                return;
            }

            const row =
                e.target.closest('.wf-item');

            if (!row) {
                return;
            }

            toggleActorGroups(row);
        }
    );


    //====================================================
    // Initial Page
    //====================================================
    document.addEventListener(
        'DOMContentLoaded',
        function() {

            document.querySelectorAll('.wf-item')
                .forEach(function(row) {
                    toggleActorGroups(row);
                });

            refreshWorkflowRows();
        }
    );
</script>
@endsection

@section('content')

@include('layouts.header')
@include('layouts.title')

@if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

<section class="wrapper bg-light">
    <div class="container py-15 py-md-17">

        <div class="col-md-12">
            <h5 class="display-1 mb-3" style="font-size: 30px">
                @yield('title')
            </h5>
        </div>

        <div class="col-lg-12">
            <div class="blog single">
                <div class="card">
                    <div class="card-body">

                        <form
                            class="contact-form"
                            method="post"
                            action="{{ url('/wfedit') }}"
                            enctype="multipart/form-data">

                            {{ csrf_field() }}

                            <input
                                type="hidden"
                                name="wf_id"
                                value="{{ $wf_id }}">

                            <div class="row gx-4">

                                {{-- ===================================== --}}
                                {{-- Workflow Name --}}
                                {{-- ===================================== --}}
                                <div class="col-md-12">
                                    <div class="form-floating mb-4">

                                        <select
                                            id="wf_name"
                                            name="wf_name"
                                            class="form-select"
                                            required>

                                            <option
                                                value=""
                                                disabled
                                                @if(empty($wf_name)) selected @endif>
                                                Please select
                                            </option>

                                            <option
                                                value="Administrative Position"
                                                @if($wf_name == 'Administrative Position') selected @endif>
                                                Administrative Position
                                            </option>

                                            <option
                                                value="Teaching Load"
                                                @if($wf_name == 'Teaching Load') selected @endif>
                                                Teaching Load
                                            </option>

                                        </select>

                                        <label for="wf_name">
                                            Flow Name *
                                        </label>
                                    </div>

                                    <div class="alert alert-info py-2">
                                        <strong>Module:</strong>
                                        Administrative Position = Arrangement,
                                        Teaching Load = TeachingLoad
                                    </div>
                                </div>


                                <div id="wf-group">

                                    @php
                                        $steps =
                                            isset($wf_steps)
                                            && count($wf_steps) > 0
                                                ? $wf_steps
                                                : collect([null]);
                                    @endphp


                                    @foreach($steps as $step)

                                        @php
                                            $positionType =
                                                $step->wf_position_type
                                                ?? 'FACULTY';

                                            $positionId =
                                                $step->wf_position_id
                                                ?? null;

                                            $stepType =
                                                $step->wf_step_type
                                                ?? 'APPROVAL';

                                            $actorScope =
                                                $step->wf_actor_scope
                                                ?? 'GLOBAL';

                                            $canEdit =
                                                intval(
                                                    $step->wf_can_edit
                                                    ?? 0
                                                );

                                            $returnOrder =
                                                $step->wf_return_order
                                                ?? null;

                                            $rejectOrder =
                                                $step->wf_reject_order
                                                ?? null;
                                        @endphp


                                        <div class="wf-item">

                                            <div class="d-flex justify-content-between align-items-center mb-3">

                                                <div class="wf-step-title mb-0">
                                                    <span class="wf-step-number">
                                                        {{ $loop->iteration }}
                                                    </span>
                                                    Workflow Step
                                                </div>

                                                <button
                                                    type="button"
                                                    class="btn btn-circle btn-red remove"
                                                    title="Delete Step">
                                                    <i class="uil uil-trash"></i>
                                                </button>
                                            </div>


                                            <div class="row g-3">

                                                {{-- Actor Type --}}
                                                <div class="col-md-3">
                                                    <div class="form-floating">

                                                        <select
                                                            name="wf_position_type[]"
                                                            class="form-select position-type"
                                                            required>

                                                            <option
                                                                value=""
                                                                disabled>
                                                                Please select
                                                            </option>

                                                            <option
                                                                value="FACULTY"
                                                                @if($positionType == 'FACULTY') selected @endif>
                                                                Faculty / Requester
                                                            </option>

                                                            <option
                                                                value="ROLE"
                                                                @if($positionType == 'ROLE') selected @endif>
                                                                Role
                                                            </option>

                                                            <option
                                                                value="MAIN"
                                                                @if($positionType == 'MAIN') selected @endif>
                                                                Main Position
                                                            </option>

                                                            <option
                                                                value="SUB"
                                                                @if($positionType == 'SUB') selected @endif>
                                                                Sub Position
                                                            </option>

                                                        </select>

                                                        <label>Actor Type *</label>
                                                    </div>
                                                </div>


                                                {{-- Faculty --}}
                                                <div
                                                    class="col-md-3 faculty-position-group
                                                        {{ $positionType == 'FACULTY' ? '' : 'd-none' }}">

                                                    <div class="form-floating">
                                                        <input
                                                            type="text"
                                                            class="form-control"
                                                            value="Requester Faculty"
                                                            readonly>
                                                        <label>Actor</label>
                                                    </div>
                                                </div>


                                                {{-- Role --}}
                                                <div
                                                    class="col-md-3 role-position-group
                                                        {{ $positionType == 'ROLE' ? '' : 'd-none' }}">

                                                    <div class="form-floating">

                                                        <select
                                                            name="wf_role_id[]"
                                                            class="form-select role-position-select">

                                                            <option value="">
                                                                Please select
                                                            </option>

                                                            @foreach($roles as $role)
                                                                <option
                                                                    value="{{ $role->id }}"
                                                                    @if(
                                                                        $positionType == 'ROLE'
                                                                        &&
                                                                        $positionId == $role->id
                                                                    )
                                                                        selected
                                                                    @endif>
                                                                    {{ $role->name }}
                                                                </option>
                                                            @endforeach

                                                        </select>

                                                        <label>Role</label>
                                                    </div>
                                                </div>


                                                {{-- Main Position --}}
                                                <div
                                                    class="col-md-3 main-position-group
                                                        {{ $positionType == 'MAIN' ? '' : 'd-none' }}">

                                                    <div class="form-floating">

                                                        <select
                                                            name="wf_main_position_id[]"
                                                            class="form-select main-position-select">

                                                            <option value="">
                                                                Please select
                                                            </option>

                                                            @foreach($mainPositions as $p)
                                                                <option
                                                                    value="{{ $p->admin_position_id }}"
                                                                    @if(
                                                                        $positionType == 'MAIN'
                                                                        &&
                                                                        $positionId == $p->admin_position_id
                                                                    )
                                                                        selected
                                                                    @endif>
                                                                    {{ $p->admin_position_name }}
                                                                </option>
                                                            @endforeach

                                                        </select>

                                                        <label>Main Position</label>
                                                    </div>
                                                </div>


                                                {{-- Sub Position --}}
                                                <div
                                                    class="col-md-3 sub-position-group
                                                        {{ $positionType == 'SUB' ? '' : 'd-none' }}">

                                                    <div class="form-floating">

                                                        <select
                                                            name="wf_sub_position_id[]"
                                                            class="form-select sub-position-select">

                                                            <option value="">
                                                                Please select
                                                            </option>

                                                            @foreach($subPositions as $p)
                                                                <option
                                                                    value="{{ $p->admin_position_sub_id }}"
                                                                    @if(
                                                                        $positionType == 'SUB'
                                                                        &&
                                                                        $positionId == $p->admin_position_sub_id
                                                                    )
                                                                        selected
                                                                    @endif>
                                                                    {{ $p->admin_position_name }}
                                                                    -
                                                                    {{ $p->admin_position_sub_name }}
                                                                </option>
                                                            @endforeach

                                                        </select>

                                                        <label>Sub Position</label>
                                                    </div>
                                                </div>


                                                {{-- Activity --}}
                                                <div class="col-md-3">
                                                    <div class="form-floating">

                                                        <select
                                                            name="wf_activity_id[]"
                                                            class="form-select"
                                                            required>

                                                            <option
                                                                value=""
                                                                disabled
                                                                @if(!$step) selected @endif>
                                                                Please select
                                                            </option>

                                                            @foreach($activities as $a)
                                                                <option
                                                                    value="{{ $a->wf_activity_id }}"
                                                                    @if(
                                                                        $step
                                                                        &&
                                                                        $a->wf_activity_id == $step->wf_activity_id
                                                                    )
                                                                        selected
                                                                    @endif>
                                                                    {{ $a->wf_activity_name }}
                                                                </option>
                                                            @endforeach

                                                        </select>

                                                        <label>Activity *</label>
                                                    </div>
                                                </div>


                                                {{-- Step Type --}}
                                                <div class="col-md-3">
                                                    <div class="form-floating">

                                                        <select
                                                            name="wf_step_type[]"
                                                            class="form-select"
                                                            required>

                                                            <option value="REQUEST" @if($stepType == 'REQUEST') selected @endif>
                                                                Request
                                                            </option>

                                                            <option value="REVIEW" @if($stepType == 'REVIEW') selected @endif>
                                                                Review
                                                            </option>

                                                            <option value="CONFIRM" @if($stepType == 'CONFIRM') selected @endif>
                                                                Confirm
                                                            </option>

                                                            <option value="APPROVAL" @if($stepType == 'APPROVAL') selected @endif>
                                                                Approval
                                                            </option>

                                                        </select>

                                                        <label>Step Type *</label>
                                                    </div>
                                                </div>


                                                {{-- Scope --}}
                                                <div class="col-md-3">
                                                    <div class="form-floating">

                                                        <select
                                                            name="wf_actor_scope[]"
                                                            class="form-select"
                                                            required>

                                                            <option value="REQUESTER" @if($actorScope == 'REQUESTER') selected @endif>
                                                                Requester
                                                            </option>

                                                            <option value="SCHOOL" @if($actorScope == 'SCHOOL') selected @endif>
                                                                Same School
                                                            </option>

                                                            <option value="SCHOOL_PROGRAM" @if($actorScope == 'SCHOOL_PROGRAM') selected @endif>
                                                                Same School + Program
                                                            </option>

                                                            <option value="GLOBAL" @if($actorScope == 'GLOBAL') selected @endif>
                                                                Global
                                                            </option>

                                                        </select>

                                                        <label>Actor Scope *</label>
                                                    </div>
                                                </div>


                                                {{-- Can Edit --}}
                                                <div class="col-md-2">
                                                    <div class="form-floating">

                                                        <select
                                                            name="wf_can_edit[]"
                                                            class="form-select wf-can-edit"
                                                            required>

                                                            <option value="0" @if($canEdit == 0) selected @endif>
                                                                No
                                                            </option>

                                                            <option value="1" @if($canEdit == 1) selected @endif>
                                                                Yes
                                                            </option>

                                                        </select>

                                                        <label>Can Edit *</label>
                                                    </div>
                                                </div>


                                                {{-- Return To --}}
                                                <div class="col-md-2">
                                                    <div class="form-floating">

                                                        <input
                                                            type="number"
                                                            name="wf_return_order[]"
                                                            class="form-control wf-return-order"
                                                            value="{{ $returnOrder }}"
                                                            min="1"
                                                            placeholder="Step">

                                                        <label>Return To Step</label>
                                                    </div>

                                                    <div class="wf-hint">
                                                        ใช้ตอนส่งกลับเพื่อแก้ไข
                                                    </div>
                                                </div>


                                                {{-- Reject To --}}
                                                <div class="col-md-2">
                                                    <div class="form-floating">

                                                        <input
                                                            type="number"
                                                            name="wf_reject_order[]"
                                                            class="form-control wf-reject-order"
                                                            value="{{ $rejectOrder }}"
                                                            min="1"
                                                            placeholder="Step">

                                                        <label>Reject To Step</label>
                                                    </div>

                                                    <div class="wf-hint">
                                                        เว้นว่าง = Reject จบ Flow
                                                    </div>
                                                </div>


                                                <div class="col-md-3 d-flex align-items-center">
                                                    <div class="wf-hint mt-0">
                                                        Return / Reject ต้องชี้กลับไป Step ก่อนหน้าเท่านั้น
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                    @endforeach

                                </div>


                                <div class="col-12 mb-3">
                                    <button
                                        type="button"
                                        class="btn btn-green rounded-pill"
                                        id="add-more">
                                        + Add Flow
                                    </button>
                                </div>


                                <div class="col-12 text-center">
                                    <input
                                        type="submit"
                                        class="btn btn-primary rounded-pill btn-send mb-3"
                                        value="Submit">

                                    <p class="text-muted">
                                        <strong>*</strong>
                                        These fields are required.
                                    </p>
                                </div>

                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

@include('layouts.footer')

@endsection