@extends('layouts.app')
@section('title', __('Credit Management'))
@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="row">
        <div class="col-md-10">
        <h3>@lang('Credit Management')</h3>
        </div>
 <div class="col-md-2">

                    <a class="btn  btn-primary" style="float: right;" href="{{action([\App\Http\Controllers\CreditManagementController::class, 'index'])}}">
                    <i class="fa fa-list"></i>  @lang('List')</a>
            
        </div>
    </div>
</section>
<style>
    .d-none {
        display: none;
    }

    .table-labels {
        background: azure;
        border: none;
    }

    .table-labels>tbody>tr>td {
        border: none;
        padding: 2px;
        padding-left: 10px;

    }
</style>
<!-- Main content -->
<section class="content">
    @if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif

    @if (session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
    @endif

    {!! Form::open(['url' => action([\App\Http\Controllers\CreditManagementController::class, 'store']), 'method' => 'post', 'id' => 'add_credit_mangement_form', 'files' => true ]) !!}
    <div class="box box-solid">
        <div class="box-body">
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="form-group">
                        <h4 ><span class="text-success" style="padding-right:30px">Available Balance : <span id="available_credit_span">00.00</span> </span><span class="ml-3 text-warning">Pending Balance : <span id="available_pending_span">00.00</span> </span></h4>
                    </div>
                </div>
                <input type="hidden" name="available_credit" value="00.00">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="location_id">Bussiness Location : <span class="text-danger">*</span></label>
                        {!! Form::select('location_id', $business_locations, null, ['class' => 'form-control select2','id'=>'location_id', 'style' => 'width:100%', 'placeholder' => __('Select Location'),'required']); !!}
                    </div>
                </div>
                {{--- Loaction details Table---}}
                <div class="col-md-4">
                    <table class="table table-labels" id="location_details_table">

                        <tbody id="location_details_tbody">


                        </tbody>
                    </table>
                </div>

                <div class="col-md-4"></div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Date Time : <span class="text-danger">*</span></label>
                        <input type="datetime-local" class='form-control' name="created_at" id="created_at" value="{{ date('Y-m-d\TH:i') }}" required>

                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label>Payment Type : <span class="text-danger">*</span></label>
                        <select class='form-control select2' name="payment_type" id="payment_type" required>
                            <option value>Select Type</option>
                            <option value="credit">Credit</option>
                            <option value="debit">Debit</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4"></div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Amount : <span class="text-danger">*</span></label>
                        <input type="text" class='form-control input_number' name="amount" id="amount" required>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Payment Method : <span class="text-danger">*</span></label>
                        <select class='form-control select2' name="payment_method" id="payment_method" required>
                            <option selected="selected" value>Select Method</option>
                            <option value="cash">Cash</option>
                            <option value="cheque">Cheque</option>
                            <option value="demand_draft">Demand Draft</option>
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="accountBankInfoDiv">

                </div>

            </div>
            <div class="row">

                <div class="col-md-4">
                    <div class="form-group">
                        <label>Paid By :</label>
                        <input type="text" class='form-control' name="paid_by" id="paid_by">

                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Screenshot Image :</label>
                        <input type="file" class='form-control' name="image" id="image" accept="image/*">

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>Remarks : <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="remarks" id="remarks" rows="3" required></textarea>

                    </div>
                </div>


            </div>
        </div>
    </div> <!--box end-->

    <div class="col-sm-12 text-center">
        <button type="submit" class="btn btn-primary btn-big">@lang('Submit')</button>
    </div>
    {!! Form::close() !!}
</section>
@endsection
@section('javascript')
<script>
    $(document).ready(function() {
        var payment_type = $('#payment_type').html();
        var payment_method = $('#payment_method').html();
        var created_at = $('#created_at').val();
        $('select#location_id').change(function() {
            var location_id = $(this).val();

            if (location_id !== '' && location_id !== null) {
                $.ajax({
                    method: 'GET',
                    url: '/credit-management/location-details',
                    dataType: 'html',
                    data: {
                        location_id: location_id
                    },
                    success: function(result) {

                       //  console.log(result);

                        var data = JSON.parse(result);

                        var name = data['name'];
                        var location_type = data["location_type"];
                        var city = data['city'];
                        var state = data['state'] ? ' , ' + data['state'] : '';
                        var mobile = data['mobile'];
                        var email = data['email'] ? ', ' + data['email'] : '';
                        var credited_amount = data['credited_amount'] ? parseFloat(data['credited_amount']) : 0;
                        var debit_amount = data['debit_amount'] ? parseFloat(data['debit_amount']) : 0;
                        var available_balance = credited_amount - debit_amount;

                        $("#available_credit_span").text(available_balance.toFixed(2));

                        var credited_pending_amount = data['credited_pending_amount'] ? parseFloat(data['credited_pending_amount']) : 0;
                        var debit_pending_amount = data['debit_pending_amount'] ? parseFloat(data['debit_pending_amount']) : 0;
                        var pending_balance = credited_pending_amount - debit_pending_amount;

                        $("#available_pending_span").text(pending_balance.toFixed(2));
                        
                        $("#location_details_table").show();
                        // Get the table body element
                        var tbody = $('#location_details_tbody');
                        var rowHtml = '<tr>' +
                            '<td><b>' + name + '( ' + location_type + ')</b></td>' +
                            '</tr>' +
                            '<tr>' +
                            '<td>' + city + ' ' + state + '</td>' +
                            '</tr>' +
                            '<tr>' +
                            '<td>' + mobile + ' ' + email + '</td>' +
                            '</tr>';

                        tbody.html(rowHtml);

                        // Reset the form 

                        $('#payment_type').html(payment_type);
                        $('#payment_method').html(payment_method);
                        //   $('#payment_type').html(payment_type);

                        $("#amount").val("");
                        var currentDate = new Date();
                        var currentDateTime = currentDate.getFullYear() + '/' +
                            ('0' + (currentDate.getMonth() + 1)).slice(-2) + '/' +
                            ('0' + currentDate.getDate()).slice(-2) + ' ' +
                            ('0' + currentDate.getHours()).slice(-2) + ':' +
                            ('0' + currentDate.getMinutes()).slice(-2);

                        $("#created_at").val(created_at);
                        $("#paid_by").val("");
                        $("#image").val("");
                        $("#remarks").val("");
                        $("#accountBankInfoDiv").empty();
                $("#image").prop("required", false);
                    },
                });
            } else {

                $("#available_credit_span").text('00:00');
                $("#location_details_table").hide();
                // Get the table body element
                var tbody = document.getElementById('location_details_tbody');
                tbody.innerHTML = '';
            }
        });

        $("#payment_method").change(function() {
            var optionValue = $(this).val();

            // Clear previous inputs
            $("#accountBankInfoDiv").empty();
            if (['cheque', 'demand_draft', 'bank_transfer', 'Other'].includes(optionValue)) {
                // Add three input elements if the optionValue is 'canteen' or 'depo'

                var inputElement = '<div class="col-md-4">' +
                    '<div class="form-group">' +
                    '<label>Transaction / Cheque No : <span class="text-danger">*</span></label>' +
                    '<input type="text" class="form-control" name="transacation_cheque" id="transacation_cheque" required>' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<div class="form-group">' +
                    '<label>Transaction / Cheque Date : <span class="text-danger">*</span></label>' +
                    '<input type="date" class="form-control" name="transaction_date" id="transaction_date" required>' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<div class="form-group">' +
                    '<label>Bank Name : <span class="text-danger">*</span></label>' +
                    '<input type="text" class="form-control" name="bank_name" id="bank_name" required>' +
                    '</div>' +
                    '</div>';

                $("#accountBankInfoDiv").html(inputElement);

                $("#image").prop("required", true);

            } else {
                $("#accountBankInfoDiv").empty();
                $("#image").prop("required", false);
            }
        });

    });
</script>
@endsection