@extends('layouts/acc_layout')
@section('title', '| Target & Achievement  (TAR) Particulars')
@section('content')
    @include('partials/layout-assets')
    <style>
        .select2-container {
            height: auto;
        }
        .select2-container .select2-search--inline .select2-search__field {
            margin-top: 7px;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #00BCD4;
            border: 1px solid #40bbea;
            margin-right: 5px;
            margin-top: 6px;
            padding: 2px 5px 1px 5px;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: #444;
            margin-right: 3px;
        }
        .select2-results__option {
            font-size: 12px;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background: #314159;
        }

        /* required for dus */
        select.accLedgerCodes {
            width: 100% !important;
        }
    </style>

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div>
                        <h4>Chart of Accounts Mapping for Target & Achievement (TAR)</h4>
                    </div>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12" style="color: black;">
                            {{-- <div id="printDivUpper">
                                <div class="row" style="padding-bottom: 10px; text-align: center; vertical-align: middle; color: black; font-weight: bold; margin: 0 .5em;">
                                    <span style="font-size:10px; float:left">Organization Name : Ambala Foundtion</span> <br/>
                                    <span style="font-size:10px; float:left">Certificate No : 00350-01308-00086</span>
                                </div>                          
                            </div> --}}
                            <form action="" method="POST" id="particularConfig">
                                <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
                                <table class="table table-striped table-bordered" style="color: black;">
                                    <thead>
                                        <th style="width:50%; text-align: left !important;">Particular</th>
                                        <th style="width:10%;">Head Nature</th>
                                        <th style="width:40%;">Ledger Codes</th>
                                    </thead>
                                    <tbody>
                                        @foreach ($tarParticulars as $particular)
                                            <tr>
                                                <td style="text-align: left;"><b>{{$particular['title']}}</b></td>
                                                <td>
                                                    <select name="natures[{{ $particular['id'] }}]" class="form-control" id="natureType" style="border: 1px solid #bbb;">
                                                        <option @if($particular['nature'] == null) selected @endif value="">Select</option>
                                                        @foreach($natureTypes as $value => $label)
                                                            <option @if($particular['nature'] == $value) selected @endif value="{{ $value }}">{{ $label }}</option>
                                                        @endforeach
                                                    </select> 
                                                </td>
                                                <td>
                                                    <select name="ledgers[{{ $particular['id'] }}][]" placeholder="" multiple class="accLedgerCodes">
                                                            @if (!empty($particular['ledgers']))
                                                                @foreach ($particular['ledgers'] as $id => $code)
                                                                    <option selected value="{{ $id }}" >{{ $code }}</option>
                                                                @endforeach
                                                            @endif
                                                    </select> 
                                                </td>
                                            </tr> 
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="form-group" style="padding-top: 20px;">
                                    <div class="col-sm-12 text-right" style="padding:0;">
                                        <button type="submit" class="btn btn-primary" id="submit">Update</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('.accLedgerCodes').each(function () {
                var $select = $(this);

                $select.select2({
                    ajax: {
                        url: '{{ route("acc.ledger.codes.for.tar") }}',
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return {
                                query: params.term,
                                selectedValues: $select.val()
                            };
                        },
                        processResults: function (data) {
                            return {
                                results: $.map(data.options, function (item) {
                                    return {
                                        text: item.code,
                                        id: item.id
                                    };
                                })
                            };
                        },
                        cache: true
                    },
                    placeholder: 'Search for options',
                    minimumInputLength: 1
                });
            });
        });

        $('#particularConfig').submit(function(event) {
            event.preventDefault();

            // Disable submit button and change its text to 'Updating...'
            let submitButton = $('#submit');
            submitButton.prop('disabled', true).text('Updating...');
            showPreloader();

            $.ajax({
                type: 'post',
                url: "{{ route('tar.particulars.config.update') }}",
                data: $('#particularConfig').serialize(),
                dataType: 'json',
                success: function(data) {
                    if (data.errors) {
                        hidePreloader();
                    } else {
                        if(data.responseTitle == "Success!"){
                            toastr.success(data.responseText, data.responseTitle, opts);
                            setTimeout(function(){
                                window.location.href = "{{ route('tar.particulars.config.index') }}";
                            }, 2000);
                        }else{
                            toastr.warning(data.responseText, data.responseTitle, opts);
                            submitButton.prop('disabled', false).text('Update');
                            hidePreloader();
                        }
                    }
                },
                error: function(_response) {
                    // Handle error
                    alert(_response.errors);
                    submitButton.prop('disabled', false).text('Update');
                    hidePreloader();
                }
            });
        });
    </script>
@endsection