@extends('layouts.frontend')
@section('content')
<div class="container">
    <div class="card rounded-0">
        <div class="card-header service-card-header py-3">
            <div class="d-sm-flex align-items-center justify-content-between">
                <div>
                    <h5 class="mb-sm-0">MY STATEMENT ({{ $statementCountText }})</h5>
                    <small>
                        <nav  aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>'">
                            <ol class="breadcrumb mt-2 mb-0 pb-0">
                              <li class="breadcrumb-item"><a href="{{route('home')}}" class="breadcrumb-item active">Home</a></li>
                              <li class="breadcrumb-item"><a href="{{route('customer_dashboard')}}" class="breadcrumb-item active">Dashboard</a></li>
                              <li class="breadcrumb-item active" aria-current="page">Statement</li>
                            </ol>
                        </nav>
                    </small>
                </div>
                <div class="d-flex gap-2">
                    <input type="search" class="form-control py-2 mt-2 mt-sm-0" id="order-search" placeholder="Search"  />
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive ">
                <table id="customer-statement-table" class="display">
                    <thead>
                        <tr>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        @if ($statementCount < 100)
            <div class="card-footer py-3">
                <button type="button" class="btn btn-icon btn-primary order-page-prev" disabled><i class="fas fa-angle-left"></i></button>
                <button type="button" class="btn btn-icon btn-primary order-page-next" style="margin-right: auto" disabled><i class="fas fa-angle-right"></i></button>
            </div>
        @else
            <div class="card-footer py-3">
                <button type="button" class="btn btn-icon btn-primary order-page-prev"><i class="fas fa-angle-left"></i></button>
                <button type="button" class="btn btn-icon btn-primary order-page-next" style="margin-right: auto"><i class="fas fa-angle-right"></i></button>
            </div>
        @endif

    </div>

</div>
@endsection
@section('seo')
<title>{{'My Statement - ' . $siteTitle}}</title>
<meta name="description" content="My Statement"/>
<meta name="keywords" content="My Statement"/>
@endsection
@section('footer_script')
<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // Data Table
        var table = $('#customer-statement-table').DataTable({
            processing: false,
            serverSide: true,
            lengthChange: false,
            info: false,
            footer: false,
            dom: 'lrtip',
            ajax: {
                url: '{{ route('fetch_customer_statement') }}',
                type: 'GET',
                beforeSend: function() {
                    $('.top-loader').show();
                },
                complete: function() {
                    $('.top-loader').hide();
                }
            },
            columns: [
                {
                    data: 'created_at',
                    title: 'DATE & TIME',
                    className: 'text-left ps-4 py-2',
                    orderable: true,
                    searchable: true,
                    render: function(data) {
                        var date = new Date(data);
                        var day = ("0" + date.getDate()).slice(-2);
                        var month = ("0" + (date.getMonth() + 1)).slice(-2);
                        var year = date.getFullYear();
                        var hours = ("0" + date.getHours()).slice(-2);
                        var minutes = ("0" + date.getMinutes()).slice(-2);
                        return day + '-' + month + '-' + year + ' ' + hours + ':' + minutes;
                    }
                },
                { data: 'description', title: 'DESCRIPTION', className: 'text-left px-2', orderable: true, searchable: true },
                {
                    data: 'type',
                    title: 'TYPE',
                    className: 'text-left px-2',
                    orderable: true,
                    searchable: true,
                    render: function(data) {
                        if (data === 'Credit') {
                            return `<span class="badge bg-success text-uppercase py-2" style="width:50px">${data}</span>`;
                        }
                        else{
                            return `<span class="badge bg-danger text-uppercase py-2" style="width:50px">${data}</span>`;
                        }

                    }
                },
                {
                    data: 'amount',
                    title: 'AMOUNT',
                    className: 'text-left px-2',
                    orderable: true,
                    searchable: true,
                    render: function(data) {
                        var currencySymbol = '{{ $currency->icon }}';
                        var formattedAmount = parseFloat(data).toFixed(2);
                        return currencySymbol + formattedAmount;
                    }
                },
                {
                    data: 'balance',
                    title: 'BALANCE',
                    className: 'text-left px-2',
                    orderable: true,
                    searchable: true,
                    render: function(data) {
                        var currencySymbol = '{{ $currency->icon }}';
                        var formattedAmount = parseFloat(data).toFixed(2);
                        return currencySymbol + formattedAmount;
                    }
                },
                {
                    data: 'order_id',
                    title: 'ORDER/INVOICE',
                    className: 'text-end pe-4',
                    orderable: true,
                    searchable: true,
                },
            ],
            pageLength: 100,
            drawCallback: function(settings) {
                $('.dataTables_wrapper .dataTables_paginate').hide();
            }
        });
        // Add Custom Paginate for service data table
        $('.order-page-prev').on('click', function() {
            table.page('previous').draw('page');
        });
        $('.order-page-next').on('click', function() {
            table.page('next').draw('page');
        });
        // Search
        $('#order-search').on('input', function() {
            var searchValue = this.value;
            if (searchValue.length === 0) {
                table.search('').draw();
            } else {
                table.search(searchValue).draw();
            }
        });
    });
</script>
@endsection