@extends('layouts.admin_master')
@section('page-title') 
    Admin | {{ $page_title }}
@endsection
@section('page-css')
@endsection
@section('page-content')

<div class="row">
<div class="col-md-12">
<div class="hpanel">
                <div class="panel-heading">
                    {{ $page_title }}
                </div>
                <div class="panel-body">
                    <div>
                        <h5>How to use</h5>
                        <!-- <p>Click on the values to make changes</p> -->
                        <table id="user" class="table table-bordered table-striped custom-fixed-table" style="clear: both">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Status</th>
                                    <th>Value</th>
                                    <th>Date Modified</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            @forelse ($settings as $row)
                            <tr>
                                <td width="35%">{{ $row->name }}</td>
                                <td width="35%">{{ $row->status }}</td>
                                <td width="65%">
                                    <a href="#" id="username" data-type="text" data-pk="1" data-title="Enter {{ $row->name }}" class="editable editable-click">{{ $row->value }}</a>
                                </td>
                                <td width="35%">{{ $row->updated_at }}</td>
                                <td><a href="" class="btn btn-warning btn-sm"><i class="fa fa-pencil"></i> Edit</a></td>
                            </tr>
                            @empty
                                <tr>                      
                                    <td colspan="4">No Data</td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
</div>
</div>
@endsection


@section('page-js')
<script src="{{ url('public/theme_assets/vendor/xeditable/bootstrap3-editable/js/bootstrap-editable.min.js') }}"></script>
<script>
    
$(document).ready(function() {
    $.fn.editable.defaults.url = '#';

    //editables
    $('#username').editable({
        url: '#',
        type: 'text',
        pk: 1,
        name: 'username',
        title: 'Enter username'
    });

    $('#firstname').editable({
        validate: function(value) {
            if($.trim(value) == '') return 'This field is required';
        }
    });

    $('#sex').editable({
        prepend: "not selected",
        source: [
            {value: 1, text: 'Male'},
            {value: 2, text: 'Female'}
        ],
        display: function(value, sourceData) {
            var colors = {"": "gray", 1: "green", 2: "blue"},
                    elem = $.grep(sourceData, function(o){return o.value == value;});

            if(elem.length) {
                $(this).text(elem[0].text).css("color", colors[value]);
            } else {
                $(this).empty();
            }
        }
    });

    $('#dob').editable();

    $('#event').editable({
        placement: 'right',
        combodate: {
            firstItem: 'name'
        }
    });

    $('#comments').editable({
        showbuttons: 'bottom'
    });

    $('#fruits').editable({
        pk: 1,
        limit: 3,
        source: [
            {value: 1, text: 'banana'},
            {value: 2, text: 'peach'},
            {value: 3, text: 'apple'},
            {value: 4, text: 'watermelon'},
            {value: 5, text: 'orange'}
        ]
    });

    $('#user .editable').on('hidden', function(e, reason){
        if(reason === 'save' || reason === 'nochange') {
            var $next = $(this).closest('tr').next().find('.editable');
            if($('#autoopen').is(':checked')) {
                setTimeout(function() {
                    $next.editable('show');
                }, 300);
            } else {
                $next.focus();
            }
        }
    });

    $('.topUpBtn').click(function() {
        var org_id = $(this).siblings('.orgRowId').val();
        var orgName = $(this).siblings('.orgRowName').val();
        console.log(org_id);
        $('#selectedOrgId').val(org_id);
        $('.titleHead').text('Top Up Balance for ' + orgName);
        $('#orgTopUpModal').modal('show');
    });


    $('#dealerTopForm').submit(function(evt){
        evt.preventDefault();
        var formData = new FormData(this);
        /*
            formData.append('org_id', $('#selectedOrgId').val());
            formData.append('org_name', $('.titleHead').text());
            formData.append('amount', $('input[name="amount"]').val());
            formData.append('payment', $('select[name="payment"]').val());
            formData.append('discount', $('input[name="discount"]').val());
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('action', 'topup');
            formData.append('org_id', $('#selectedOrgId').val());
        */
        $.ajax({
		    url: base_url + '/admin/topups',
		    type: 'POST',
		    data: formData,
		    processData: false,
		    contentType: false,
		    beforeSend: function() {
                $('#topupError').addClass('hidden');
		  		console.log('Sending data...');
		  	},
		    success: function(data) {
		        console.log('Success:', data);
                $('#topupError').addClass('hidden');
                $('#topupSuccess').removeClass('hidden');
                $('#topupSuccess').html('<p>' + data.message + '</p>');
                $('#dealerTopForm')[0].reset();
                $('#orgTopUpModal').modal('hide');
                $('#topupSuccess').delay(5000).fadeOut();
                $('#topupSuccess').html('');
                setTimeout(function() {
                    location.reload();
                }, 2000);
		    },
		    error: function(xhr, status, error) {
		        console.error('Error:', error);
                if (xhr.status === 422) {
                    $('#topupError').removeClass('hidden');
                    //console.log(xhr.responseJSON.errors); // Display validation errors
                    $.each(xhr.responseJSON.errors, function(key, value) {
                        $('#topupError').append('<p>' + value[0] + '</p>');
                    });
                }
		    }
		});
    });

});
</script>
@endsection