@extends('layouts.main')

@section('content')
    <link href="plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" type="text/css">
    <script>
        $(document).ready(function() {

            $('.to').on('change', function() {
                var selected = $(this).find(":selected").data('type');
                if (selected == "supplier") {

                    $('.step_3_filed').hide();
                    $('.row_user').show(); 
                    $('.price').attr('required',true);
                } else {

                  $('.price').attr('required',false);
                    $('.step_3_filed').show();
                    $('.row_user').hide();
                    $('.step_3_price').hide();
                }
            });

            $('.user').on('change', function() {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "./accounting/feed",
                    type: "POST",
                    data: {
                        type: 'get_user',
                        id: $(this).find(":selected").val()
                    },
                    async: false,
                    success: function(response, textStatus, jqXHR) {
                        console.log(response);
                        if (response) {
                            $('.step_3_filed').show();
                            $('.step_3_price').show();
                            $('.price').attr('required',true);
                         }else{ 
                            $('.price').attr('required',false);
                          $('.step_3_price').hide();
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(errorThrown);
                    }
                }); 
            });

            (function() {
                'use strict'

                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.querySelectorAll('.needs-validation')

                // Loop over them and prevent submission
                Array.prototype.slice.call(forms)
                    .forEach(function(form) {
                        form.addEventListener('submit', function(event) {
                            if (!form.checkValidity()) {
                                event.preventDefault()
                                event.stopPropagation()
                            }

                            form.classList.add('was-validated')

                        }, false)
                    })
            })();

        });
    </script>
    <div class="col-lg-12 layout-spacing">
        <form class="needs-validation"
            action="{{ @$accounting->id ? 'accounting/' . $id . '/update/'.$edit : 'accounting/store' }}" method="post"
            enctype="multipart/form-data" novalidate>
            @csrf
            <div class="statbox widget box box-shadow">
                <div class="widget-header">
                    <div class="row">
                        <div class="col-xl-12 col-md-12 col-sm-12 col-12 custom_add_button">
                            <h4>{{ @$accounting->id > 0 ? 'دەستکاریکردنی ئاڵوگۆڕ' : 'زیادکردنی ئاڵوگۆڕ' }}</h4>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-8">
                        <div class="widget-content widget-content-area">
 
                            <div class="form-group row">
                                <label class="col-form-label text-right col-lg-3 col-sm-12">ئاڵوگۆڕ لە</label>
                                <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12">
                                    <select class="selectpicker from" name="from">
                                        @foreach (@$accountings as $item)
                                            <option value="{{ $item->id }}" data-type="{{ $item->type }}" {{$item->id == @$accounting->from?'selected':''}}>
                                                {{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-form-label text-right col-lg-3 col-sm-12">ئاڵوگۆڕ بۆ</label>
                                <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12">
                                    <select class="selectpicker to" name="to">
                                        @foreach ($accountings as $item)
                                            <option value="{{ $item->id }}"data-type="{{ $item->type }}"  {{$item->id == @$accounting->to?'selected':''}}>
                                                {{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row row_user" style="display: none">
                                <label class="col-form-label text-right col-lg-3 col-sm-12">بۆ بەڕێز</label>
                                <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12">
                                    <select class="selectpicker user" name="user_id">
                                        @foreach ($accounting_users as $item)
                                            <option value="{{ $item->id }}" {{$item->id == @$accounting->user_id?'selected':''}}>{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            
                            <div class="form-group row step_3_filed" style="display: none">
                                <label class="col-form-label text-right col-lg-3 col-sm-12">بڕی پارە</label>
                                <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12">
                                    <input type="number" name="amount" style="direction:ltr" step="0.01" min="0" value="{{@$accounting->amount}}" class="form-control"
                                        required>
 
                                </div>
                            </div>
                            <div class="form-group row step_3_filed" style="display: none">
                                <label class="col-form-label text-right col-lg-3 col-sm-12">دەربارە</label>
                                <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12">
                                    <input type="text" name="note" class="form-control"value="{{@$accounting->note}}">
                                </div>
                            </div> 
                        </div>
                    </div> 
                </div> 
                <div class="widget-footer text-left">
                    <button type="submit" class="btn btn-primary mr-2"> پاشەکەوتکردن</button>
                </div>
            </div>
        </form>
    </div>
    <script src="plugins/bootstrap-select/bootstrap-select.min.js"></script>

    <script>
        $(document).ready(function() {

            $('.to').trigger('change');
            $('.user').trigger('change');
        });
</script>
@endsection