@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{ trans('approval/master.approval_modules') }}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url("$alias/home") }}">
                            {{ trans('master/master.home') }}</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ url("$alias/approval/modules") }}">{{ trans('approval/master.approval_modules') }}</a>
                    </li>
                    <li class="breadcrumb-item active">
                        @if (isset($approvalModule->id))
                            {{ trans('common/common.edit') }}
                        @else
                            {{ trans('master/master.add_new') }}
                        @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')

    <!-- Basic multiple Column Form section start -->
    <section id="multiple-column-form">
        <div class="card new-cardbox p-1">
            <form role="post-data" method="POST"
                action="{{ isset($approvalModule) && $approvalModule ? $orgUrl . '/approval/module/update/' . $approvalModule->id : $orgUrl . '/approval/module/store' }}"
                redirect="{{ $orgUrl . '/approval/modules' }}">

                @if (isset($approvalModule->id))
                    <input type="hidden" name="_method" value="PUT">
                @endif
                <div class="row">
                    <div class="col-md-9 border-end">
                        <div class="card-header newheader border-bottom mb-1 px-0">
                            <h4 class="card-title">{{ trans('master/master.fill_the_below_information') }} </h4>
                        </div>
                        <div class="card-body px-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-md-6 mb-1">
                                            <label class="form-label">{{ trans('approval/master.module') }}<span
                                                    class="mendatory-field text-danger">*</span></label>
                                            <select class="form-control select2" name="alias">
                                                <option value="">--select--</option>
                                                @foreach ($approvalModuleMasters as $key => $approvalModuleMaster)
                                                    <option value="{{ $key }}"
                                                        @if (isset($approvalModule) && $key == $approvalModule->alias) selected @endif>
                                                        {{ ucfirst($approvalModuleMaster) }} </option>
                                                @endforeach
                                            </select>
                                        </div>

                                    </div>

                                    <div class="approval-level-box">

                                        @if (isset($approvalModule) && !$approvalModule->approvalLevels->isEmpty())
                                            @foreach ($approvalModule->approvalLevels as $key => $approvalLevel)
                                                @php
                                                    $levelKey = $key + 1;
                                                @endphp
                                                <div class="row approval-level-row">
                                                    <div class="col-md-12">
                                                        <h3 class="appoval-level-title">{{ $approvalHeaders[$levelKey] }}
                                                        </h3>
                                                    </div>
                                                    <div class="col-md-4 mb-1">
                                                        <div>
                                                            <label
                                                                class="form-label">{{ trans('approval/master.approver_type') }}<span
                                                                    class="mendatory-field text-danger">*</span></label>
                                                            <select
                                                                class="form-control approval-level-approver-type select2"
                                                                name="approvals[{{ $key }}][approver_type]">
                                                                <option value=""> select </option>
                                                                @foreach ($approverTypes as $approverType)
                                                                    <option value="{{ $approverType }}"
                                                                        @if ($approvalLevel->approver_type == $approverType) selected @endif>
                                                                        {{ ucwords(str_replace('_', ' ', $approverType)) }} </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4 mb-1 approval-level-approver-div"
                                                        @if (in_array($approvalLevel->approver_type, ['manager', 'functional_manager'])) style="display: none;" @endif>
                                                        <div>
                                                            <label
                                                                class="form-label">{{ trans('approval/master.approver') }}<span
                                                                    class="mendatory-field text-danger">*</span></label>
                                                            <select class="form-control approval-level-approver"
                                                                name="approvals[{{ $key }}][approver_id]" data-approver_id="{{ $approvalLevel->approver_id }}" data-approver_name="{{ @$approvalLevel->approver->name . ($approvalLevel->approver_type == 'employee' ? '('. @$approvalLevel->approver->employee_code .')' : '') }}">
                                                            </select>
                                                        </div>
                                                    </div>

                                                    @if ($key)
                                                        <div class="col-md-1 mb-1">
                                                            <button type="button"
                                                                class="btn btn-icon round btn-danger waves-effect remove-approval-level mt-2">-</button>
                                                        </div>
                                                    @else
                                                        <div class="col-md-1 mb-1 ssbtn">
                                                            <button type="button"
                                                                class="btn btn-icon round btn-success waves-effect add-approval-level mt-2">+</button>
                                                        </div>
                                                    @endif

                                                </div>
                                            @endforeach
                                        @else
                                            <div class="row approval-level-row">
                                                <div class="col-md-12">
                                                    <h3 class="appoval-level-title"> First Level </h3>
                                                </div>
                                                <div class="col-md-4 mb-1">
                                                    <div>
                                                        <label
                                                            class="form-label">{{ trans('approval/master.approver_type') }}<span
                                                                class="mendatory-field text-danger">*</span></label>
                                                        <select class="form-control approval-level-approver-type select2"
                                                            name="approvals[0][approver_type]">
                                                            <option value="">select</option>
                                                            @foreach ($approverTypes as $approverType)
                                                                <option value="{{ $approverType }}">
                                                                    {{ ucwords(str_replace('_', ' ', $approverType)) }} </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4 mb-1 approval-level-approver-div">
                                                    <div>
                                                        <label
                                                            class="form-label">{{ trans('approval/master.approver') }}<span
                                                                class="mendatory-field text-danger">*</span></label>
                                                        <select class="form-control approval-level-approver"
                                                            name="approvals[0][approver_id]">
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-1 mb-1 ssbtn">
                                                    <button type="button"
                                                        class="btn btn-icon round btn-success waves-effect add-approval-level mt-2">+</button>
                                                </div>

                                            </div>
                                        @endif
                                    </div>
                                    <div class="col-md-12">
                                        <div class="d-flex justify-content-between content-footer">
                                            <button type="button" data-request="ajax-submit"
                                                data-target="[role=post-data]"
                                                class="btn btn-success btn-submit user-submit"
                                                id="submit-text">{{ trans('common/common.submit') }}</button>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>

                    </div>

                    <div class="col-md-3">
                        <div class="card-header newheader border-bottom mb-1 px-0">
                            <h4 class="card-title">Status</h4>
                        </div>
                        <div class="card-body px-0">
                            <div>
                                <div class="form-check form-check-primary mb-2">
                                    <input type="radio" id="statusRadio1" name="status" class="form-check-input"
                                        value="active"
                                        {{ isset($approvalModule) ? ($approvalModule->status != 'inactive' ? 'checked' : '') : 'checked' }}>
                                    <label class="form-check-label fw-bolder" for="statusRadio1">Active</label>
                                </div>
                                <div class="form-check form-check-primary">
                                    <input type="radio" id="statusRadio2" name="status" class="form-check-input"
                                        value="inactive"
                                        {{ isset($approvalModule) && $approvalModule->status == 'inactive' ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bolder" for="statusRadio2">Inactive</label>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </form>
        </div>
    </section>
    <!-- Basic Floating Label Form section end -->
@endsection

@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
    <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
    <!-- END: Page JS-->

    <script src="{{ asset('js/common-script.js') }}"></script>
    <script src="{{ asset('js/sweetalert.js') }}"></script>
    <script>
        $(document).ready(function() {

            $('.approval-level-approver').each((key, item) => {
                renderSelect2(item);

                let approver_id = $(item).data('approver_id');
                let approver_name = $(item).data('approver_name');

                if(approver_id){
                    $(item).append(new Option(approver_name, approver_id, true, true)).trigger('change');
                }
            });

            function renderSelect2(item){
                $(item).select2({
                    ajax: {
                        url: '/ajax/hod-list',
                        dataType: 'json',
                        data: function(params) {
                            let typeSelectName = $(this).attr('name').replace('approver_id', 'approver_type');
                            let listType = $(`select[name="${typeSelectName}"]`).val();
                            
                            return {
                                alias: '{{$organization->alias}}',
                                exclude_user_id: '',
                                has_contractor_employees: 'true', 
                                employee_type: '', 
                                search: params.term,
                                list_type: listType,
                                status: "active"
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: $.map(data.data, function(item) {
                                    return {
                                        id: item.id,
                                        text: item.name + (item?.employee_code && `(${item?.employee_code})` || '') + ' (' + item.email + ')',
                                    };
                                })
                            };
                        },
                        cache: true
                    },
                    placeholder: 'Search with name',
                    minimumInputLength: 1,
                    allowClear: true
                });
            }

            $("body").on("click", ".add-approval-level", function() {
                $(".approval-level-row").find('.approval-level-approver').select2('destroy');
                $(".approval-level-row").find('.approval-level-approver-type').select2('destroy');

                var html = $(".approval-level-row").first().clone();
                var totalLevel = $(".approval-level-row").length;
                if (totalLevel >= 4) {
                    return false;
                }
                $(".approval-level-box").append(html);
                var count = $(".approval-level-row").length;

                var approvalHeaders = @json($approvalHeaders);
                $(".approval-level-row").each(function(index, element) {
                    var level = index + 1;
                    $(this).find('.appoval-level-title').html(approvalHeaders[level]);
                    $(this).find('.approval-level').attr('name', 'approvals[' + index + '][level]');
                    $(this).find('.approval-level-approver-type').attr('name', 'approvals[' +
                        index + '][approver_type]');
                    $(this).find('.approval-level-approver').attr('name', 'approvals[' + index +
                        '][approver_id]');
                    $(this).find('.approval-level-max-amount').attr('name', 'approvals[' + index +
                        '][max_amount]');
                    var count = count - 1;
                    if (!count) {
                        $(this).find('.approval-level-max-amount').val('');
                    }
                    if (index != 0) {
                        var rmbtn =
                            '<button type="button" class="btn btn-icon round btn-danger waves-effect remove-approval-level mt-2">-</button>';
                        $(this).find(".ssbtn").html(rmbtn);
                    }

                    $(`select[name="approvals[${index}][approver_type]"]`).select2();
                    renderSelect2($(`select[name="approvals[${index}][approver_id]"]`));
                });
            });

            $("body").on("click", ".remove-approval-level", function() {
                $(this).parents(".approval-level-row").remove();
            });

            $("body").on("change", ".approval-level-approver-type", function() {
                $('select[name="' + $(this).attr('name').replace('approver_type', 'approver_id') + '"]').val('').trigger('change');
                
                if (['manager', 'functional_manager'].includes($(this).val())) {
                    $(this).closest('.approval-level-row').find('.approval-level-approver-div').hide();
                } else {
                    $(this).closest('.approval-level-row').find('.approval-level-approver-div').show();
                }
            });

        });
    </script>
@endpush