@extends('admin.app.layout')

@section('content')
    <div class="main-content">
        <section class="table-section">
            <div class="table-section-color">
                <div class="container-fluid p-0">
                    <div class="table-button">
                        <div class="row justify-content-between">
                            <div class="col-lg-auto my-auto">
                                <div class="template-right">
                                    <a href="{{ route('adminManageUser') }}">
                                        Manage User
                                    </a>
                                    <span class="me-3 ms-3">
                                        <img src="{{ asset('assets/images/arrow-left (1).svg') }}" alt="image">
                                    </span>
                                    {{ $user->contact_person_name }}'s Credit Logs
                                </div>
                            </div>
                            {{-- <div class="col-lg-auto ms-auto my-auto">
                                <div class="d-flex align-items-center">
                                    <div id="reportrange" class="daterange">
                                        <i class="fa fa-calendar"></i>&nbsp;
                                        <span>October 25, 2023 - November 23, 2023</span> <i class="fa fa-caret-down"></i>
                                    </div>
                                    <a href="#" class="btn btn-primary ms-2"><i class="fa fa-search"></i></a>
                                    <a href="#" class="btn btn-danger ms-2"><i class="fa fa-times"></i></a>
                                </div>
                            </div> --}}
                            <div class="col-lg-auto">
                                <button onclick="CreditBalanceExport({{ $user->id }})" class="btn btn-blue-button">
                                    <img src="{{ asset('assets/images/excel_white.png') }}" alt="" class="me-3">
                                    Export to Excel
                                </button>
                            </div>
                        </div>
                    </div>
                    <table id="table_1" class="datatable_ct table table-striped mb-2 pb-1 mt-2 text-center"
                        style="width:100%">
                        <thead>
                            <tr>
                                <th scope="col" class="text-center">Sr No</th>
                                <th scope="col" class="text-center">Date</th>
                                <th scope="col" class="text-center">Campaign</th>
                                <th scope="col" class="text-center">Debit</th>
                                <th scope="col" class="text-center">Credit</th>
                                <th scope="col" class="text-center">Balance</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>01</td>
                                <td>26th November 2026</td>
                                <td>Campaign 1</td>
                                <td>65711</td>
                                <td>29326</td>
                                <td>40832</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade addresource-modal" id="add_new_group" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Add New Group</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="new-resorces row">
                        <div class="col-sm-12 col-lg-12 col-md-12">
                            <div class="resorces-leftbox file-upload">
                                <form>
                                    <div class="form-group">
                                        <label for="inputEmail">Group Name *</label>
                                        <input type="text" id="inputEmail" class="form-control"
                                            placeholder="Enter Group Name" required autofocus>
                                    </div>

                                    <a class="btn btn-submit" href="javascript:void(0)">Save</a>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade addresource-modal" id="edit_new_group" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Edit New Group</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="new-resorces row">
                        <div class="col-sm-12 col-lg-12 col-md-12">
                            <div class="resorces-leftbox file-upload">
                                <form>
                                    <div class="form-group">
                                        <label for="inputEmail">Group Name *</label>
                                        <input type="text" id="inputEmail" class="form-control"
                                            placeholder="Enter Group Name" required autofocus>
                                    </div>

                                    <a class="btn btn-submit" href="javascript:void(0)">Save</a>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        function CreditBalanceExport(userId) {
            var url = "{{ route('creditBalanceExport', ['user_id' => ':user_id']) }}".replace(':user_id', userId);
            window.location.href = url;
        }

        function filterData() {
            var i = 1;
            var table = $('#table_1').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                language: {
                    searchPlaceholder: "Search",
                    emptyTable: "No records available", // Message when no data exists
                    zeroRecords: "No matching records found", // Message when no search results are found
                    processing: "Loading, please wait...", // Message during data loading
                },
                ajax: {
                    url: "{{ route('adminCreditBalancePaginate') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"; // Correctly assign _token
                        d.user_id = "{{ $user->id }}"; // Correctly assign user_id
                    },
                },
                drawCallback: function(settings) {
                    var api = this.api();

                    // Handle empty data explicitly
                    if (api.rows({
                            page: 'current'
                        }).data().length === 0) {
                        $("#table_1 tbody").html(`
                    <tr>
                        <td colspan="10" class="text-center">${api.settings()[0].oLanguage.emptyTable}</td>
                    </tr>
                `);
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'campaign_name',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'debit',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'credit',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'balance',
                        orderable: false,
                        searchable: true
                    },


                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3, 4, 5],
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    },
                }, ],

            });

        }
        $(document).ready(function() {
            filterData();

            boundaryWidth = 300;
            boundaryHeight = 300;

            viewportWidth = 200;
            viewportHeight = 200;

            $image_crop = $('#image_demo').croppie({
                viewport: {
                    width: viewportWidth,
                    height: viewportHeight,
                    //type: 'square',
                },
                boundary: {
                    height: boundaryHeight,
                    width: boundaryWidth,
                },
                showZoomer: true,
                enableExif: true,
                enableOrientation: true
            });

            $('.cropImage').on('change', function() {

                ext = this.value.split('.').pop();
                if (ext != 'png' && ext != 'jpg' && ext != 'jpeg')
                    return false;

                var reader = new FileReader();
                reader.onload = function(event) {
                    $image_crop.croppie('bind', {
                        url: event.target.result
                    }).then(function() {
                        console.log('jQuery bind complete');
                    });
                }
                reader.readAsDataURL(this.files[0]);
                $('#uploadimageModal').addClass("zindex");

                $('#uploadimageModal').modal('show');
                // var fileInput = document.getElementById('doctor_image');
                // fileInput.value = '';
            });

            $('.imgRotate').on('click', function(ev) {
                $image_crop.croppie('rotate', parseInt($(this).data('rotate')));
            });

            $('.crop_image').click(function(event) {
                var croppieResultHeight = '1000';
                var croppieResultWidth = '1000';
                $image_crop.croppie('result', {
                    type: 'canvas',
                    // size: 'viewport'
                    size: {
                        height: croppieResultHeight,
                        width: croppieResultWidth
                    },
                }).then(function(response) {
                    // $('body').append('<div class="loader"></div>');
                    // $("#modelbtn").hide();
                    // $("#preloader").addClass('loaded');
                    $(".crop_image").html('Uploading.....');
                    $(".crop_image").attr('disabled', true);
                    $.ajax({
                        url: "{{ route('UpdateCropImageAdmin') }}",
                        type: "POST",
                        data: {
                            "image": response,
                            '_token': '{{ csrf_token() }}'
                        },
                        success: function(data) {
                            $('#uploadimageModal').modal('hide');
                            $('#business_logo_preview').attr('src',
                                "{{ asset('storage/Images/temp/') }}/" + data
                                .imageName);
                            $("#business_logo_filename").val(data.imageName);
                            $(".crop_image").html('Save');
                            $(".crop_image").attr('disabled', false);
                            // var fileInput = document.getElementById('doctor_image');
                            // fileInput.value = '';
                            $('#uploadimageModal').removeClass("zindex");
                        }
                    });
                })
            });






        });
    </script>
@endsection