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

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang('Credit Management')</h1>
</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, 'update']), 'method' => 'post', 'id' => 'add_credit_mangement_form', 'files' => true ]) !!}
    <input type="hidden" name="id" value="{{$Credit_list[0]['id']}}">
    <input type="hidden" name="screenshot_image" value="{{$Credit_list[0]['screenshot_image']}}">
    <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">{{$Credit_list[0]['available_balance']?$Credit_list[0]['available_balance']:00.00}}</span> </span><span class="ml-3 text-warning">Pending Balance : <span id="available_pending_span">{{$Credit_list['pending_balance']?$Credit_list['pending_balance']: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, $Credit_list[0]['credit_location_id'], ['class' => 'form-control select2','id'=>'location_id', 'style' => 'width:100%', 'placeholder' => __('Select Location'),'required','disabled' => 'disabled']); !!}

                    </div>
                </div>
                {{--- Loaction details Table---}}
                <div class="col-md-4">
                    <table class="table table-labels" id="location_details_table">

                        <tbody id="location_details_tbody">
                            <tr>
                                <td><b>{{ $Credit_list[0]['name'] }} ( {{$Credit_list[0]['location_type']}} )</b></td>
                            </tr>
                            <tr>
                                <td>{{ $Credit_list[0]['city'] }} , {{ $Credit_list[0]['state'] }}</td>
                            </tr>
                            <tr>
                                <td>{{ $Credit_list[0]['mobile'] }} {{ $Credit_list[0]['email'] ? $Credit_list[0]['email'] : ' '}}</td>
                            </tr>

                        </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="{{ $Credit_list[0]['credited_at'] }}" 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 {{ $Credit_list[0]["payment_type"] == "" ? 'selected' : '' }}>Select Type</option>
                            <option value="credit" {{ $Credit_list[0]["payment_type"] == "credit" ? 'selected' : '' }}>Credit</option>
                            <option value="debit" {{ $Credit_list[0]["payment_type"] == "debit" ? 'selected' : '' }}>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" value="{{$Credit_list[0]['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 {{ $Credit_list[0]["payment_method"] == "" ? 'selected' : '' }}>Select Method</option>
                            <option value="cash" {{ $Credit_list[0]["payment_method"] == "cash" ? 'selected' : '' }}>Cash</option>
                            <option value="cheque" {{ $Credit_list[0]["payment_method"] == "cheque" ? 'selected' : '' }}>Cheque</option>
                            <option value="demand_draft" {{ $Credit_list[0]["payment_method"] == "demand_draft" ? 'selected' : '' }}>Demand Draft</option>
                            <option value="bank_transfer" {{ $Credit_list[0]["payment_method"] == "bank_transfer" ? 'selected' : '' }}>Bank Transfer</option>
                            <option value="Other" {{ $Credit_list[0]["payment_method"] == "Other" ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div id="accountBankInfoDiv">
             
            @if($Credit_list[0]["payment_method"] !== "cash" && $Credit_list[0]["payment_method"] !== "" && $Credit_list[0]["payment_method"] !== null )
              
                <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" value="{{$Credit_list[0]["transaction_cheque_no"]}}" 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" value="{{$Credit_list[0]["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" value="{{$Credit_list[0]["bank_name"]}}" required> 
                    </div> 
                    </div>
                    @endif  
                </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" value="{{$Credit_list[0]['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 class="col-md-4">
                    <div class="form-group">

                        @if($Credit_list[0]['screenshot_image'])
                        <img id="image_preview" src="/uploads/credit_management/{{$Credit_list[0]['screenshot_image']}}" alt="Image Preview" style="max-width: 100%; max-height: 150px;">
                        @endif
                    </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="4" required>{{$Credit_list[0]['remarks']}}</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