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

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang('Add Credit Credit Management')</h1>
</section>
<style>
    .d-none {
        display: none;
    }
</style>
<!-- Main content -->
<section class="content">
    @if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </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">
                    <div class="form-group">
                        <h4>Available Credit Balance 00.00</h4>
                    </div>
                </div>
                <input type="hidden" name="available_credit" value="00.00">
                <div class="col-md-4">
                    <div class="form-group">
                        {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
                        {!! Form::select('location_id', $business_locations, null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('Select Location'),'required']); !!}
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label>Payment Type :</label>
                        <select class='form-control select2' name="payment_type" id="payment_type" required>
                            <option value="credit">Credit</option>
                            <option value="debit">Debit</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Amount :</label>
                        <input type="text" class='form-control input_number' name="amount" id="amount" value="0" required>

                    </div>
                </div>

                {{--- Loaction details Table---}}
                <div class="col-md-12">

                    <table class="table table-bordered d-none" id="location_details_table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Mobile</th>
                                <th>Location Type</th>
                                <th>State</th>
                                <th>City</th>
                            </tr>
                        </thead>
                        <tbody id="location_details_tbody">


                        </tbody>
                    </table>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Payment Method : </label>
                        <select class='form-control select2' name="payment_method" id="payment_method" required>
                            <option value="cash" selected="selected">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 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 class="col-md-4">
                    <div class="form-group">
                        <label>Date Time : </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>Remarks :</label>
                        <textarea class="form-control" name="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('messages.save')</button>
    </div>
    {!! Form::close() !!}
</section>
@endsection
@section('javascript')
<script>
    $('select#location_id').change(function() {
        var location_id = $(this).val();
        $.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);
                $("#location_details_table").show();
                // Get the table body element
                var tbody = document.getElementById('location_details_tbody');

                // Create a new table row

                // Initialize an empty string to store the HTML content of the row
                var rowHtml = '';

                // Loop through each property in the JSON object and create table cells
                for (var key in data) {
                    if (data.hasOwnProperty(key)) {
                        var cellValue = data[key] !== null ? data[key] : ''; // Replace null with 'N/A'
                        // Append the cell HTML to the rowHtml string
                        rowHtml += '<td>' + cellValue + '</td>';
                    }
                }

                // Append the rowHtml to the table body by setting its innerHTML
                tbody.innerHTML = '<tr>' + rowHtml + '</tr>';


            },
        });
    });
</script>
@endsection