@extends(!in_array(\Auth::user()->role, [10, 15]) ? 'layout' : 'layoutfrontdesk')

@section('title', 'Department | Edit Department')

@section('content')

<!-- Page header -->
<div class="page-header page-header-light">
	<div class="page-header-content header-elements-md-inline">
		<div class="page-title d-flex">
			<h4> Edit Department</h4>
			<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
		</div>
	</div>
</div>
<!-- /page header -->

<!-- Content area -->
<div class="content">

	<!-- Hover rows -->
	<div class="card">
		<div class="card-body">
			<div class="row">
				<div class="col-md-12">
					<form class="form-validate-jquery" action="{{ route('departments.update', $department->id)}}" method="post" enctype="multipart/form-data">
						@csrf
                        @method('PUT')
						<fieldset class="mb-3">
							<legend class="text-uppercase font-size-sm font-weight-bold">Data Department</legend>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-2">Department Name <span class="text-danger">*</span></label>
                                <div class="col-lg-10">
                                    <input type="text" name="name" class="form-control border-teal border-1 @error('name') is-invalid @enderror" placeholder="department name..." required autofocus autocomplete="off" value="{{ $department->name }}">
                                </div>
                            </div>

                            <div class="form-group row">
                                <label class="col-form-label col-lg-2">COA List</label>
                                <div class="col-lg-10" id="form-coa">
                                    <div style="display: none">
                                        <input type="hidden" id="jumlahmulti" value="{{count($multiCoa)}}">
                                        <select id="multi_coa_option">
                                            <option value="">-- Select COA --</option>
                                            @foreach($coas as $coa)
                                                <option value="{{$coa->id}}">({{$coa->account_no}}) {{$coa->description}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="row mb-2" data-idx="0" id="row_0">
                                        <div class="col-lg-10">
                                            <select name="coa_id[]"
                                                    id="coa_id0"
                                                    data-idx="0"
                                                    class="form-control form-control-select2 coa-select"
                                                    data-container-css-class="border-teal"
                                                    data-dropdown-css-class="border-teal"
                                                    onchange="updateCoaOptions()"
                                            >
                                                <option value="">-- Select COA --</option>
                                                @foreach($coas as $coa)
                                                    <option value="{{$coa->id}}" {{ count($multiCoa) > 0 ? ($coa->id == $multiCoa[0]->id ? 'selected' : '') : '' }}>({{$coa->account_no}}) {{$coa->description}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-lg-2">
                                            <button type="button" onclick="tambahCoa()" class="btn btn-success">
                                                <i class="fas fa-plus-circle"></i>
                                            </button>
                                        </div>
                                    </div>
                                    @if (count($multiCoa) > 1)
                                        @php
                                            $countdata = 1;
                                        @endphp
                                        @foreach($multiCoa as $m_coa)
                                            @if ($loop->first)
                                                @continue
                                            @endif
                                            <div class="row mb-2" data-idx="{{$countdata}}" id="row_{{$countdata}}">
                                                <div class="col-lg-10">
                                                    <select name="coa_id[]"
                                                            id="coa_id{{$countdata}}"
                                                            data-idx="{{$countdata}}"
                                                            class="form-control form-control-select2 coa-select"
                                                            data-container-css-class="border-teal"
                                                            data-dropdown-css-class="border-teal"
                                                            onchange="updateCoaOptions()"
                                                    >
                                                        <option value="">-- Select COA --</option>
                                                        @foreach($coas as $coa)
                                                            <option value="{{$coa->id}}" {{ $coa->id == $m_coa->id ? 'selected' : '' }}>({{$coa->account_no}}) {{$coa->description}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-lg-2">
                                                    <button type="button" onclick="removeCoa({{$countdata}})" class="btn btn-danger">
                                                        <i class="fas fa-times-circle"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            @php
                                                $countdata++;
                                            @endphp
                                        @endforeach
                                    @endif
                                </div>
                            </div>

                        </fieldset>
                        <div class="text-right">
                            <a href="{{ url('/departments')}}" class="btn btn-light">Back <i class="icon-undo"></i></a>
                            <button type="submit" class="btn btn-primary submitBtn">Save <i class="icon-paperplane ml-2"></i></button>
                        </div>

                    </form>
				</div>
			</div>
        </div>
    </div>
    <!-- /hover rows -->
</div>
<!-- /content area -->
@endsection

@section('js')
<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/validation/validate.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>

<!-- <script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.time.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/legacy.js')}}"></script> -->

<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>

<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_checkboxes_radios.js')}}"></script>
<script type="text/javascript">

    // JS Multiple COA
    let new_idx = $('#jumlahmulti').val();

    function tambahCoa(){
        let coa_options = $('#multi_coa_option').html();
        let html = `<div class="row mb-2" data-idx="${new_idx}" id="row_${new_idx}">
                        <div class="col-lg-10">
                            <select name="coa_id[]"
                                    id="coa_id${new_idx}"
                                    data-idx="${new_idx}"
                                    class="form-control form-control-select2 coa-select"
                                    data-container-css-class="border-teal"
                                    data-dropdown-css-class="border-teal"
                            >
                                ${coa_options}
                            </select>
                        </div>
                        <div class="col-lg-2">
                            <div class="btn-group">
                                <button type="button" onclick="removeCoa(${new_idx})" class="btn btn-danger">
                                    <i class="fas fa-times-circle"></i>
                                </button>
                            </div>
                        </div>
                    </div>`;
        new_idx++;
        $('#form-coa').append(html);
        $('.form-control-select2').select2();
        bindCOAEvents();
        updateCOADisabledOptions();
    }

    function removeCoa(id){
        $('#row_'+id).remove();
        updateCOADisabledOptions();
    }

    // Attach change event to all COA selects
    function bindCOAEvents(){
        $('.coa-select').off('change').on('change', function(){
            updateCOADisabledOptions();
        });
    }

    function updateCOADisabledOptions(){
        // Get all selected values (excluding empty)
        let selectedValues = $('.coa-select').map(function(){
            return $(this).val();
        }).get().filter(v => v !== '');

        // For each dropdown
        $('.coa-select').each(function(){
            let currentVal = $(this).val();

            // Enable all first
            $(this).find('option').prop('disabled', false);

            // Disable selected values in other dropdowns
            selectedValues.forEach(val => {
                if(val !== currentVal){
                    $(this).find(`option[value="${val}"]`).prop('disabled', true);
                }
            });
        });

        // Refresh select2 display
        $('.form-control-select2').select2();
    }

    // Initial binding
    $(document).ready(function(){
        $('#coa_id0').addClass('coa-select');
        $('.form-control-select2').select2();
        bindCOAEvents();
        updateCOADisabledOptions();
    });

    // Accessibility labels
    $('.pickadate-accessibility').pickadate({
        labelMonthNext: 'Go to the next month',
        labelMonthPrev: 'Go to the previous month',
        labelMonthSelect: 'Pick a month from the dropdown',
        labelYearSelect: 'Pick a year from the dropdown',
        selectMonths: true,
        selectYears: true,
        format: 'yyyy-mm-dd',
    });

    var FormValidation = function() {

        // Validation config
        var _componentValidation = function() {
            if (!$().validate) {
                console.warn('Warning - validate.min.js is not loaded.');
                return;
            }

            // Initialize
            var validator = $('.form-validate-jquery').validate({
                ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
                errorClass: 'validation-invalid-label',
                //successClass: 'validation-valid-label',
                validClass: 'validation-valid-label',
                highlight: function(element, errorClass) {
                    $(element).removeClass(errorClass);
                },
                unhighlight: function(element, errorClass) {
                    $(element).removeClass(errorClass);
                },
                // success: function(label) {
                    //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
                    //},

                    // Different components require proper error label placement
                    errorPlacement: function(error, element) {

                        // Unstyled checkboxes, radios
                        if (element.parents().hasClass('form-check')) {
                            error.appendTo( element.parents('.form-check').parent() );
                        }

                        // Input with icons and Select2
                        else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
                            error.appendTo( element.parent() );
                        }

                        // Input group, styled file input
                        else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
                            error.appendTo( element.parent().parent() );
                        }

                        // Other elements
                        else {
                            error.insertAfter(element);
                        }
                    },
                    messages: {
                        name: {
                            required: 'Please fill this input'
                        },
                    },
                });

                // Reset form
                $('#reset').on('click', function() {
                    validator.resetForm();
                });
            };

            // Return objects assigned to module
            return {
                init: function() {
                    _componentValidation();
                }
            }
        }();


        // Initialize module
        // ------------------------------

        document.addEventListener('DOMContentLoaded', function() {
            FormValidation.init();
        });
</script>
<script type="text/javascript">

    $( document ).ready(function() {

        var $select = $('.form-control-select2').select2();

        // Default style
        @if(session('error'))
        new PNotify({
            title: 'Error',
            text: '{{ session('error') }}.',
            icon: 'icon-blocked',
            type: 'error'
        });
        @endif
        @if ( session('success'))
        new PNotify({
            title: 'Success',
            text: '{{ session('success') }}.',
            icon: 'icon-checkmark3',
            type: 'success'
        });
        @endif
        @if ($errors->any())
        @foreach ($errors->all() as $error)
        new PNotify({
            title: 'Error',
            text: '{{ $error }}.',
            icon: 'icon-blocked',
            type: 'error'
        });
        @endforeach
        @endif

    });
</script>
@endsection