@extends('layouts/pos_layout')
@section('title', '| '.$moduleTitle)
@section('style')
<style type="text/css">
    .min-height-textarea{
        min-height: 60px;
    }
</style>
@endsection
@section('content')

<div class="row add-data-form" style="padding-bottom:20px;">
    <div class="col-md-12">
        <div class="col-md-1"></div>

        <div class="col-md-10 fullbody">

            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a href="{{route($module.'_list')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
                </i>{{ $moduleLinkTitle }}</a>
            </div>

            <div class="panel panel-default panel-border">

                <div class="panel-heading">
                    <div class="panel-title">{{ $moduleTitle }}</div>
                </div>

                <div class="panel-body">
                    {!! Form::open(array('url' => '', 'role' => 'form', 'class'=>'form-horizontal form-groups', 'id' => 'purchaseForm')) !!}

                        <div class="row">

                            <div class="col-md-8">

                                <div class="form-group">
                                    {!! Form::label('payment_date', 'Payment Date:<sup class="text-danger">*</sup>', ['class' => 'col-sm-4 control-label'],false) !!}
                                    <div class="col-sm-8">
                                        {!! Form::hidden('branch_id', 1, ['class' => 'form-control','readonly']) !!}
                                        {!! Form::text('payment_date', $branchActiveDate, ['class' => 'form-control','readonly']) !!}
                                        <p id='payment_datee' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                <div class="form-group">
                                    {!! Form::label('supplier_id', 'Supplier:<sup class="text-danger">*</sup>', ['class' => 'col-sm-4 control-label'],false) !!}
                                    <div class="col-sm-8">
                                        <select name="supplier_id" class="form-control input-sm custom-select2" id="supplier_id">
                                            <option value="">Select Supplier</option>
                                            @foreach($suppliers as $supplier)
                                                <option value="{{$supplier->id}}">{{ $supplier->phone }} - {{ $supplier->name }}</option>
                                            @endforeach
                                        </select>
                                        <p id='supplier_ide' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                <div class="form-group hide_in_mobile">
                                    {!! Form::label('purchase_amount', 'Purchase Amount:<sup class="text-danger">*</sup>', ['class' => 'col-sm-4 control-label'],false) !!}
                                    <div class="col-sm-8">
                                        {!! Form::text('purchase_amount', null, ['class' => 'form-control', 'id' => 'purchase_amount', 'readonly']) !!}
                                        <p id='purchase_amounte' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                <div class="form-group hide_in_mobile">
                                    {!! Form::label('paid_amount', 'Paid Amount:', ['class' => 'col-sm-4 control-label'],false) !!}
                                    <div class="col-sm-8">
                                        {!! Form::text('paid_amount', null, ['class' => 'form-control', 'id' => 'paid_amount', 'readonly']) !!}
                                        <p id='paid_amounte' style="max-height:3px;"></p>
                                    </div>
                                </div>
                                <div class="sell-wrap">
                                    <div class="form-group inline-inmobile two">
                                        {!! Form::label('balance_amount', 'Balance Amount:', ['class' => 'col-sm-4 control-label'],false) !!}
                                        <div class="col-sm-8">
                                            {!! Form::text('balance_amount', null, ['class' => 'form-control', 'id' => 'balance_amount', 'readonly']) !!}
                                            <p id='balance_amounte' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group">
                                    {!! Form::label('pay_amount', 'Pay Amount:<sup class="text-danger">*</sup>', ['class' => 'col-sm-4 control-label'],false) !!}
                                    <div class="col-sm-8">
                                        {!! Form::text('pay_amount', null, ['class' => 'form-control numeric', 'id' => 'pay_amount', 'min' => 0, 'autocomplete' => 'off']) !!}
                                        <p id='pay_amounte' style="max-height:3px;"></p>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group submit-wrap" style="margin-top: 20px;">
                                            {!! Form::label('Submit', ' ', ['class' => 'col-sm-4 control-label'],false) !!}
                                            <div class="col-sm-8 text-right" >
                                                {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info']); !!}
                                                <a href="{{route($module.'_list')}}" class="btn btn-danger closeBtn">Close</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    {!! Form::close()  !!}
                    <span id="success" style="color:green; font-size:20px;" class="pull-right"></span>
                </div>

            </div>

            <div class="footerTitle" style="border-top:1px solid white"></div>
        </div>

        <div class="col-md-1"></div>
    </div>
</div>

<script>

    $(document).ready(function(){
        var companyTypeJQ = "{{ $companyType }}";

        var inputDate = $('#payment_date');
        var branchSearchId = $('#branch_id');
        if(companyTypeJQ == 'TRDG'){
            $(inputDate).datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yy',
                onSelect: function () {
                    var selectedDate = $(this).val(); // or use .datepicker('getDate') for a Date object
                    var branch_id = branchSearchId.val();
                    var $input = $(this); // Save reference to the input
                    $.ajax({
                        type: 'post',
                        url: '{{url("/pos/branchActiveDateCheckWhichSuitable")}}',
                        data: { branch_id: branch_id, selectedDate: selectedDate},
                        dataType: 'json',
                        success: function(_response) {
                            if (_response) {
                                // $("#purchase_date").datepicker("option", "maxDate", _response.branchActiveDate);
                                $input.val(_response); // Use saved reference here
                                // console.log("Set value:", _response);
                            }
                        },
                        error: function (xhr, status, error) {
                            console.error('AJAX Error:', error);
                        }
                    });
                }
            });
        }
    });


    $("#supplier_id").change(function (e)
    {
        var supplier_id = $(this).val();

        $('#purchase_amount').val('');
        $('#paid_amount').val('');
        $('#balance_amount').val('');
        $('#pay_amount').val('');

        $.ajax({
            type: 'post',
            url: '{{ route("payment_get_info") }}',
            data: {
                '_token': $('input[name=_token]').val(),
                'supplier_id': supplier_id
            },
            success: function(_response)
            {
                $('#purchase_amount').val(_response.totalPurchaseAmount);
                $('#paid_amount').val(_response.totalPaidAmount);
                $('#balance_amount').val(_response.totalBalanceAmount);
            }
        });
    });

    $(".numeric").keypress(function (e)
    {
        $(this).val($(this).val().replace(/[^0-9\.]/g,''));
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
            $("#numericError").html("Digits Only").show().fadeOut("slow");
            event.preventDefault();
        }
    });

    $('form').submit(function( event )
    {
        event.preventDefault();
        var formData = new FormData($(this)[0]);
        $.ajax({
            type: 'post',
            url: '{{ route("payment_store") }}',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            beforeSend: function() {
                $('#loadingModal').show();
            },
            success: function(_response)
            {
                if (_response.errors) {
                    $('#loadingModal').hide();
                    hideErrorMessage();

                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error!!',
                        text: 'Please give Valid Information!!',
                        showConfirmButton: false,
                        timer: 1500
                    });
                    setErrorsText(_response.errors);
                    return false;
                } else {
                    $('#loadingModal').hide();

                    Swal.fire({
                        icon: _response.responseStatus,
                        title: _response.responseTitle,
                        text: _response.responseText,
                        showConfirmButton: false,
                        timer: 1500
                    })
                    if (_response.responseStatus == 'success') {
                        setTimeout(function() {
                            window.location.href = "{{route('payment_list')}}";
                        }, 1500);
                    }else{
                        $(".submit-btn").attr("disabled", false);
                        $(".submit-btn").show();
                    }
                }
            },
            error: function( _response )
            {
                $('#loadingModal').hide();
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error!!',
                    text: 'Please give Valid Information!!',
                    showConfirmButton: false,
                    timer: 1500
                });
                setErrorsText(_response.errors);
                return false;
            }

        });
    });

    function setErrorsText(errors) {
        console.log('asdfdsfds ',errors);
        $.each(errors, function(key, value) {
            // console.log(key,value);
            $('#' + key + 'e').empty().show().append('<span class="errormsg" style="color:red;">' + value +
                '</span>');

        });
    }


    function hideErrorMessage(){
        $("input").keyup(function() {
            var inputValue = $(this).val();
            var inputId = $(this).attr('id');
            // console.log(inputId);

            if (inputValue) {
                $('#'+inputId+'e').hide();
            } else {
                $('#'+inputId+'e').show();
            }
        });

        $("textarea").keyup(function() {
            var inputValue = $(this).val();
            var inputId = $(this).attr('id');
            // console.log(inputId);

            if (inputValue) {
                $('#'+inputId+'e').hide();
            } else {
                $('#'+inputId+'e').show();
            }
        });

        $("select").change(function() {
            var selectedValue = $(this).val();
            var elementId = $(this).attr('id');
            // console.log(elementId);
            if (selectedValue) {
                $('#'+elementId+'e').hide();
            } else {
                $('#'+elementId+'e').show();
            }
        });
    }

</script>
@endsection