@extends(config('admin_theme.layout', 'admin.layout.master'))
@section('title')
    {{ $current_route->{'name_' . trans('admin.lang')} }}
@stop
@section('page-breadcrumb')
    @include(config('admin_theme.view_prefix', 'admin').'.layout.breadcrumb_add')
@stop
@section('page-content')
    @include(config('admin_theme.view_prefix', 'admin').'.layout.error')
<form role="form" method="post" action="" id="receipt_catch_form">
    <div class="row">
        <div class="form-group mb-3 col-md-4 col-sm-12">
            <label for="date_receipt" class="col-form-label">@Lang('admin.receipt-date')<span class="require">*</span></label>
            <div class="input-group" id="datepicker1">
                <input type="text" autocomplete="off" class="form-control date_receipt" name="date_receipt"
                       value="{{ $info->date_receipt }}" data-date-format="yyyy-mm-dd" data-provide="datepicker"
                       data-date-container='#datepicker1'>
                <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
            </div>
        </div>

        <div class="form-group mb-3 col-md-4 col-sm-12">
            <label class="col-form-label" for="clients_type_id">@Lang('admin.client-type')<span class="require">*</span></label>
            <select class="form-control" id="clients_type_id" name="clients_type_id">
                <option value="0" selected>@Lang('admin.select')</option>
                <option value="1" >@Lang('admin.customers')</option>
                <option value="2" >@Lang('admin.suppliers')</option>
            </select>
        </div>
        <div class="form-group  mb-3 col-md-4 col-sm-12" id="client_area"></div>
        <div class="form-group mb-3 col-md-4 col-sm-12">
            <label class="col-form-label" for="payment_types_id">@Lang('admin.payment_type')<span class="require">*</span></label>
            <select class="form-control" id="payment_types_id" name="payment_types_id">
                <option value="0">@Lang('admin.select')</option>
                    @foreach ($payments_type as $item)
                <option value="{{ $item->id }}" selected>
                            {{ $item->{'account_name_' . trans('admin.lang')} }}
                </option>
                    @endforeach
            </select>
        </div>
        <div class="form-group mb-3 col-md-4 col-sm-12">
            <label class="col-form-label" for="amount">@Lang('admin.band-amount')<span class="require">*</span></label>
            <input type="number" step="0.01" min="0" autocomplete="false" value=""
                   class="form-control" id="amount" name="amount">
        </div>
    </div>
    <div class="row">
        <div class="form-group  col-md-4 col-sm-12">
            <label class="col-form-label" for="note">@Lang('admin.notes')</label>
            <textarea class="form-control" name="note" rows="4" cols="40"></textarea>
        </div>
        <div class="form-group  col-md-4 col-sm-12">
            <label class="col-form-label" for="note">@Lang('admin.for-about')</label>
            <textarea class="form-control" name="for_about" rows="4" cols="40"></textarea>
        </div>
    </div>
        @can('admin.cost_centers.view')
    <div id='cost-center-container'></div>
    <div id='cost-center-container1'></div>
        @endcan
    <div class="form-actions mt-5">
        <button type="submit" class="btn btn-success" id="save">@Lang('admin.do')</button>
        <a href="{{ route('receipt_catch.view') }}" type="button" class="btn btn-secondary">@Lang('admin.cancel')</a>
            {{ csrf_field() }}
    </div>
</form>

@stop
@section('css')
<link href="{{ asset('assets/plugins/datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet"
      type="text/css" />

<style>

</style>
@stop
@section('js')
<script src="{{ asset('assets/plugins/datepicker/js/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        $('.date').datepicker({
            format: 'yyyy-mm-dd',
            todayBtn: 'linked',
            clearBtn: true,
            autoclose: true
        });
        @can('admin.cost_centers.view')
            $('#suppliers_id').on('change', function() {
                var selectedOption = $(this).find(':selected');
                var id = selectedOption.data('id');
                if (id > 0) {
                    $.ajax({
                        type: "POST",
                        url: "{{ route('accounts.costcenters') }}",
                        data: {
                            'id': id,
                            'eid': {{ $info->id }},
                            'sub_id': {{ $info->id }},
                            'index': 0,
                            'cost_source': 3,
                            'type': 1,
                            '_token': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function() {
                            $(".ezdan_loading").show();
                        },
                        complete: function() {
                            $(".ezdan_loading").hide();
                        },
                        success: function(data) {
                            $('#cost-center-container').html(data);
                            updateBAmount();
                        }
                    });
                }
            });
            $(document).on('change', '#customers_id', function(event) {
                var selectedOption = $(this).find(':selected');
                var id = selectedOption.data('id');
                if (id > 0) {
                    $.ajax({
                        type: "POST",
                        url: "{{ route('accounts.costcenters') }}",
                        data: {
                            'id': id,
                            'eid': {{ $info->id }},
                            'sub_id': {{ $info->id }},
                            'index': 0,
                            'cost_source': 3,
                            'type': 1,
                            '_token': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function() {
                            $(".ezdan_loading").show();
                        },
                        complete: function() {
                            $(".ezdan_loading").hide();
                        },
                        success: function(data) {
                            $('#cost-center-container').html(data);
                            updateBAmount();
                        }
                    });
                }
            });
            $('#payment_types_id').on('change', function() {
                var id = $("#payment_types_id").val();
                if (id > 0) {
                    $.ajax({
                        type: "POST",
                        url: "{{ route('accounts.costcenters') }}",
                        data: {
                            'id': id,
                            'eid': {{ $info->id }},
                            'sub_id': {{ $info->id }},
                            'index': 1,
                            'cost_source': 3,
                            'type': 2,
                            '_token': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function() {
                            $(".ezdan_loading").show();
                        },
                        complete: function() {
                            $(".ezdan_loading").hide();
                        },
                        success: function(data) {
                            $('#cost-center-container1').html(data);
                            updateBAmount();
                        }
                    });
                }
            });

            function updateBAmount() {
                var totalAmount = parseFloat($('#amount').val());
                var type = 1;
                $('.camount').each(function() {
                    current_amount = $(this);
                    type = current_amount.data('type');
                    var percentage = parseFloat(current_amount.val());
                    var bamount = (percentage / 100) * totalAmount;
                    var field = type == 1 ? '.damount' : '.mamount';
                    var field2 = type == 1 ? '.mamount' : '.damount';
                    current_amount.closest('.parent_row').find(field).val(bamount.toFixed(2));
                    current_amount.closest('.parent_row').find(field2).val(0);
                    current_amount.closest('.parent_row').find(field2).prop('readonly', true);
                    //current_amount.closest('.parent_row').find('.bamount').val(bamount.toFixed(2));
                });
            }

            // Function to update percentage based on bamount and amount
            function updatePercentage() {
                var totalAmount = parseFloat($('#amount').val());
                var field = type == 1 ? '.damount' : '.mamount';
                $(field).each(function() {
                    current_amount = $(this);
                    type = current_amount.data('type');
                    var bamount = parseFloat(current_amount.val());
                    var percentage = (bamount / totalAmount) * 100;
                    $(this).closest('.parent_row').find('.camount').val(percentage.toFixed(2));
                });
            }
            $('#amount').on('keyup', function() {
                updateBAmount();
            });
            // Event listener for amount percentage change
            $(document).on('keyup', '.camount', function(event) {
                updateBAmount();
            });
            // Event listener for bamount change
            $(document).on('keyup', '.mamount, .damount', function(event) {
                updatePercentage();
            });
            // Initial update on page load
            $('#payment_types_id').trigger('change');
        @endcan
        var customers_url = "