@extends('layouts.acc_layout')

@section('Auto Voucher Settings', '| '. $pageTitle)

@section('stylesheets')
    <style>
        .panel .panel-body {
            color: #2c2e2f;
        }

        .panel .panel-body {
            color: #2c2e2f;
        }

        .table-custom {
            table-layout: fixed;
            width: 100% !important;
            border-collapse: collapse !important;
            border: 1px solid #2c2e2f !important;
        }

        .table-custom th, td {
            border: 1px solid #c6c7cc;
            /* padding: 10px 15px; */
        }

        .table-custom th {
            font-weight: bold;
            text-align: center;
            padding: 10px 15px;
        }
    </style>
@endsection

@section('content')
    {{--Messsage--}}
    <div class="row">
        <div class="col-md-12">
            @include('hr_partials._message')
        </div>
    </div>

    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10 fullbody">
            <div class="viewTitle" style="border-bottom: 1px solid white;"></div>
            <div class="panel panel-default panel-border">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel-heading">
                                <div class="panel-title col-md-6">{{ $pageTitle }}</div>
                                <div class="text-right col-md-6">
                                    <a href="{{ route('finalPaymentAutoVoucherMasterConfiguration.index') }}"
                                       class="btn btn-info btn-sm" style="margin-bottom: 0;">
                                        <i class="fa fa-list"></i> List
                                    </a>
                                </div>
                            </div>
                            <div id="app" class="panel-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        {!! Form::open(['url'=>route('finalPaymentAutoVoucherMasterConfiguration.create'),'class'=>'form-horizontal' , 'method'=>'GET']) !!}
                                        {{ csrf_field() }}
                                        <div class="row">
                                            <div class="col-md-2">
                                                {{ Form::label('project_id_fk','Project') }}
                                                {!! Form::select('project_id_fk', $projectOptionList, $projectIdSelected ?: null, ['class' => 'form-control project','autocomplete'=>'off']) !!}
                                                @if ($errors->has('project_id_fk'))
                                                    <p class="help-block">
                                                        <small class="text-danger">
                                                            <span class="glyphicon glyphicon-exclamation-sign"
                                                                  aria-hidden="true"></span>
                                                            {{ $errors->first('project_id_fk') }}
                                                        </small>
                                                    </p>
                                                @endif
                                            </div>
                                            <div class="col-md-2">
                                                {{ Form::label('project_type_id_fk','Project Type') }}
                                                {!! Form::select('project_type_id_fk', [],old('project_type_id_fk'), ['class' => 'form-control project-type','autocomplete'=>'off']) !!}
                                                @if ($errors->has('project_type_id_fk'))
                                                    <p class="help-block">
                                                        <small class="text-danger">
                                                            <span class="glyphicon glyphicon-exclamation-sign"
                                                                  aria-hidden="true"></span>
                                                            {{ $errors->first('project_type_id_fk') }}
                                                        </small>
                                                    </p>
                                                @endif
                                            </div>
                                            <div class="col-md-2">
                                                {{ Form::label('voucher_type_id_fk','Voucher Type') }}
                                                {!! Form::select('voucher_type_id_fk', $voucherTypeOptionList, $voucherTypeIdSelected ?: null, ['class' => 'form-control voucher-type','autocomplete'=>'off']) !!}
                                                @if ($errors->has('voucher_type_id_fk'))
                                                    <p class="help-block">
                                                        <small class="text-danger">
                                                            <span class="glyphicon glyphicon-exclamation-sign"
                                                                  aria-hidden="true"></span>
                                                            {{ $errors->first('voucher_type_id_fk') }}
                                                        </small>
                                                    </p>
                                                @endif
                                            </div>
                                            <div class="col-md-2">
                                                <div style="margin-bottom: 5px;color: transparent;">""</div>
                                                {!! Form::button("<i class='fa fa-search'></i>",['type'=>'submit','class'=>'btn btn-info']) !!}
                                            </div>
                                        </div>
                                        {!! Form::close() !!}
                                    </div>
                                </div>

                                @if($isNagodanFormShowing)
                                    <br>
                                    {!! Form::open(['url'=>route('finalPaymentAutoVoucherMasterConfiguration.create'),'class'=>'form-horizontal','id'=>'form-nagodan']) !!}

                                    {!! Form::hidden('project_id_fk', $projectIdSelected ?: null, ['class' => 'form-control project project-hidden','autocomplete'=>'off']) !!}
                                    {!! Form::hidden('project_type_id_fk', $projectTypeIdSelected ?: null, ['class' => 'form-control project-type project-type-hidden','autocomplete'=>'off']) !!}
                                    {!! Form::hidden('voucher_type_id_fk', $voucherTypeIdSelected ?: null, ['class' => 'form-control voucher-type-hidden','autocomplete'=>'off']) !!}

                                    <div class="row">
                                        <div class="col-md-12">

                                            {{--Item Wrapper--}}
                                            <div class="item__wrapper"></div>

                                        </div>
                                    </div>
                                    {!! Form::close() !!}

                                    <div class="row">
                                        <div class="col-md-12 text-right">
                                            <div class="box--action ">
                                                <button class="btn btn-secondary btn-sm item__add-btn"
                                                        type="button">
                                                    Add
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            {{-- ./panel-body --}}
                        </div>
                        {{-- ./col-md-12 --}}
                    </div>
                    {{-- .row --}}
                </div>
                {{-- ./panel-body --}}
            </div>
            {{-- ./panel --}}
        </div>
        {{-- ./col-md-10 --}}
        <div class="col-md-1"></div>
    </div>

    {{--Template--}}
    <div class="item__template"
         style="display:none; border: 1px dashed gainsboro; padding:1em; margin-bottom: 2em; ">
        <div class="item__header">
            <div class="row">
                <div class="col-md-12 text-right">
                    <button class="item__template-remove-btn btn"
                            style="color: red; margin: 0;" type="button">
                        X
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2" style="margin-bottom: 5px;">
                    {{ Form::label('project_id_fk','Project',['style'=>'font-weight: bold;']) }}
                    {{ Form::select('project_id_fk[]', $projectOptionList, $projectIdSelected ?: null, ['class' => 'form-control project-template','autocomplete'=>'off']) }}
                </div>
                <div class="col-md-2">
                    {{ Form::label('project_type_id_fk','Project Type',['style'=>'font-weight: bold;']) }}
                    {{ Form::select('project_type_id_fk[]', [],null, ['class' => 'form-control project-type-template','autocomplete'=>'off']) }}
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="item__template-table custom-table"
                       style="width: 100%; margin-top: 1em;">
                    <thead>
                    <th style="width: 45%;">Debit</th>
                    <th style="width: 45%;">Credit</th>
                    <th style="width: 10%;"></th>
                    </thead>
                    <tbody>
                    <tr class="item__template-table-row">
                        <td>
                            {!! Form::select('debit[]', $optionListDebit, null, ['class' => 'form-control debit','autocomplete'=>'off']) !!}
                            @if ($errors->has('debit'))
                                <p class="help-block">
                                    <small class="text-danger">
                                <span class="glyphicon glyphicon-exclamation-sign"
                                      aria-hidden="true"></span>
                                        {{ $errors->first('transaction_head_id_fk') }}
                                    </small>
                                </p>
                            @endif
                        </td>
                        <td>
                            {!! Form::select('credit[]', $optionListCredit, null, ['class' => 'form-control credit','autocomplete'=>'off']) !!}
                            @if ($errors->has('credit[]'))
                                <p class="help-block">
                                    <small class="text-danger">
                                <span class="glyphicon glyphicon-exclamation-sign"
                                      aria-hidden="true"></span>
                                        {{ $errors->first('transaction_head_id_fk') }}
                                    </small>
                                </p>
                            @endif
                        </td>
                        <td style="text-align: center;">
                            <a href="#" class="btn js-deleteRow" style="display: none;"><i
                                        class='fa fa-times'
                                        style="color:red;"></i></a>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="3" class="text-right">
                            <a href="#" class="btn js-addRow"
                               style="margin-bottom: 0px;">
                                <i class='fa fa-plus' style="color: green;"></i>
                            </a>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script>

        $(document).on("click", ".item__add-btn", function (e) {
            $('.item__template')
                .clone()
                .removeClass('item__template')
                .addClass('item')
                .css('display', 'block')
                .appendTo('.item__wrapper');
        });

        $(document).on("click", ".item__template-remove-btn", function (e) {
            $(this).parents('div.item').first().remove();
        });



        $(".item__wrapper").on("click", ".js-addRow", function (e) {
            e.preventDefault();
            console.log(
                $(this).closest('.item__template-table')
                    .find('tbody')
                    .after($('.item__template-table-row').clone()))
        });

        $(".table-nagodan").on("click", ".js-deleteRow", function (e) {
            e.preventDefault();
            var eObject = $(this);
            eObject.parent().parent().remove()
        });

        // Hidden value assign
        $(".staff-type").change(function (e) {
            $(".staff-type-hidden").val($(this).val());
            console.log($('.staff-type-hidden').val())

        });
        $(".voucher-type").change(function (e) {
            $(".voucher-type-hidden").val($(this).val());
            console.log($('.voucher-type-hidden').val())
        });

        function ajaxRequest(sourceElement, targetElement, url, selected = null) {
            var sourceId = sourceElement.val() || '';
            var projectId = $('.project').val() || 0;
            var projectTypeId = $('.project-type').val() || 0;
            var branchId = $('.branch').val() || 0;
            var token = "{{ csrf_token() }}";

            var sendingData = {
                'sourceId': sourceId,
                'projectId': projectId,
                'projectTypeId': projectTypeId,
                'branchId': branchId,
                '_token': token
            }

            console.log(sendingData);

            return $.ajax({
                url: url,
                dataType: 'json',
                type: 'GET',
                data: sendingData,
                success: function (data) {
                    var options = "<option selected disabled='true'>Select One</option>";
                    $.each(data, function (key, item) {
                        var selectedData = '';
                        if (item.id == '*') {
                            return;
                        }
                        if (selected != null && item.id == selected) {
                            selectedData = 'selected="selected"';
                        }
                        options += '<option ' + selectedData + ' value="' + item.id + '">' + item.name + '</option>';
                    });
                    targetElement.html(options);
                },
                error: function (response) {
                    console.log(response);
                }
            });
        }

        $(document).on('change','.project',function () {
            var srcElement = $('.project');
            var targetElement = $('.project-type');
            var url = "{{ url('hr/filter/getProjectType') }}";
            ajaxRequest(srcElement, targetElement, url);
        });

        $(document).on('change','.project-template',function () {
            var srcElement = $(this);
            targetElement = srcElement.closest('.item__header').find('.project-type-template');
            var url = "{{ url('hr/filter/getProjectType') }}";
            ajaxRequest(srcElement, targetElement, url);
        });

        ajaxRequest(
            $('.project'),
            $('.project-type'),
            "{{ url('hr/filter/getProjectType') }}",
            "{{ $projectTypeIdSelected ?: null }}"
        );

        $('select.project option:first').attr('disabled', true);
        $('select.project-type option:first').attr('disabled', true);
        $('select.staff-type option:first').attr('disabled', true);
        $('select.voucher-type option:first').attr('disabled', true);

    </script>
@endsection