@extends('layouts.app')
@section('content')
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>SOA</h3>
</div>
<div class="tf-section-2 mb-30">

    <!-- chart-default -->
    <div class="wg-chart-default">
        <div class="top">
            <div class="flex items-center gap14">
                <div class="image type-white">
                    <svg width="52" height="52" viewBox="0 0 48 52" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19.1084 2.12894C22.2024 0.34261 26.0144 0.342611 29.1084 2.12894L42.4911 9.85544C45.5851 11.6418 47.4911 14.943 47.4911 18.5157V33.9687C47.4911 37.5413 45.5851 40.8426 42.4911 42.6289L29.1084 50.3554C26.0144 52.1418 22.2024 52.1418 19.1084 50.3554L5.72571 42.6289C2.6317 40.8426 0.725712 37.5413 0.725712 33.9687V18.5157C0.725712 14.943 2.6317 11.6418 5.72571 9.85544L19.1084 2.12894Z" fill="#dc3545"></path>
                    </svg>
                    <span class="icon">
                        <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 1.5C9.82674 1.5 9.25525 1.94413 9.06623 2.55717C9.02336 2.69622 9 2.84469 9 3H13.5C13.5 2.84469 13.4766 2.69622 13.4338 2.55717C13.2448 1.94413 12.6733 1.5 12 1.5H10.5ZM7.83701 1.61765C8.33669 0.656928 9.3409 0 10.5 0H12C13.1591 0 14.1633 0.656928 14.663 1.61765C14.8877 1.63319 15.1121 1.65026 15.3359 1.66884C16.8752 1.7966 18 3.10282 18 4.60822V15C18 16.6569 16.6569 18 15 18H13.5V19.125C13.5 20.1605 12.6605 21 11.625 21H1.875C0.839466 21 0 20.1605 0 19.125V7.875C0 6.83947 0.839466 6 1.875 6H4.5V4.60822C4.5 3.10283 5.62475 1.7966 7.16405 1.66884C7.38795 1.65026 7.61227 1.63319 7.83701 1.61765ZM7.50702 3.14604C7.43401 3.15177 7.36104 3.15765 7.28812 3.1637C6.56523 3.2237 6 3.84365 6 4.60822V6H11.625C12.6605 6 13.5 6.83947 13.5 7.875V16.5H15C15.8284 16.5 16.5 15.8284 16.5 15V4.60822C16.5 3.84365 15.9348 3.2237 15.2119 3.1637C15.139 3.15765 15.066 3.15177 14.993 3.14604C14.9196 3.90594 14.2792 4.5 13.5 4.5H9C8.22085 4.5 7.58044 3.90594 7.50702 3.14604ZM12 7.875C12 7.66789 11.8321 7.5 11.625 7.5H1.875C1.66789 7.5 1.5 7.66789 1.5 7.875V19.125C1.5 19.3321 1.66789 19.5 1.875 19.5H11.625C11.8321 19.5 12 19.3321 12 19.125V7.875ZM3 10.5C3 10.0858 3.33579 9.75 3.75 9.75H3.7575C4.17171 9.75 4.5075 10.0858 4.5075 10.5V10.5075C4.5075 10.9217 4.17171 11.2575 3.7575 11.2575H3.75C3.33579 11.2575 3 10.9217 3 10.5075V10.5ZM5.25 10.5C5.25 10.0858 5.58579 9.75 6 9.75H9.75C10.1642 9.75 10.5 10.0858 10.5 10.5C10.5 10.9142 10.1642 11.25 9.75 11.25H6C5.58579 11.25 5.25 10.9142 5.25 10.5ZM3 13.5C3 13.0858 3.33579 12.75 3.75 12.75H3.7575C4.17171 12.75 4.5075 13.0858 4.5075 13.5V13.5075C4.5075 13.9217 4.17171 14.2575 3.7575 14.2575H3.75C3.33579 14.2575 3 13.9217 3 13.5075V13.5ZM5.25 13.5C5.25 13.0858 5.58579 12.75 6 12.75H9.75C10.1642 12.75 10.5 13.0858 10.5 13.5C10.5 13.9142 10.1642 14.25 9.75 14.25H6C5.58579 14.25 5.25 13.9142 5.25 13.5ZM3 16.5C3 16.0858 3.33579 15.75 3.75 15.75H3.7575C4.17171 15.75 4.5075 16.0858 4.5075 16.5V16.5075C4.5075 16.9217 4.17171 17.2575 3.7575 17.2575H3.75C3.33579 17.2575 3 16.9217 3 16.5075V16.5ZM5.25 16.5C5.25 16.0858 5.58579 15.75 6 15.75H9.75C10.1642 15.75 10.5 16.0858 10.5 16.5C10.5 16.9142 10.1642 17.25 9.75 17.25H6C5.58579 17.25 5.25 16.9142 5.25 16.5Z" fill="white"></path>
                        </svg>
                    </span>
                </div>
                <div>
                    <div class="flex gap10 items-center">
                        <div class="body-text mt-2 mb-4">Debit</div>
                    </div>
                    <h4>₱{{number_format($totals->total_debit,2)}}</h4>
                </div>
            </div>
        </div>
    </div>
    <!-- /chart-default -->
    <!-- chart-default -->
    <div class="wg-chart-default">
        <div class="top">
            <div class="flex items-center gap14">
                <div class="image type-white">
                    <svg width="52" height="52" viewBox="0 0 48 52" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19.1084 2.12894C22.2024 0.34261 26.0144 0.342611 29.1084 2.12894L42.4911 9.85544C45.5851 11.6418 47.4911 14.943 47.4911 18.5157V33.9687C47.4911 37.5413 45.5851 40.8426 42.4911 42.6289L29.1084 50.3554C26.0144 52.1418 22.2024 52.1418 19.1084 50.3554L5.72571 42.6289C2.6317 40.8426 0.725712 37.5413 0.725712 33.9687V18.5157C0.725712 14.943 2.6317 11.6418 5.72571 9.85544L19.1084 2.12894Z" fill="#22C55E"></path>
                    </svg>
                    <span class="icon">
                        <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 1.5C9.82674 1.5 9.25525 1.94413 9.06623 2.55717C9.02336 2.69622 9 2.84469 9 3H13.5C13.5 2.84469 13.4766 2.69622 13.4338 2.55717C13.2448 1.94413 12.6733 1.5 12 1.5H10.5ZM7.83701 1.61765C8.33669 0.656928 9.3409 0 10.5 0H12C13.1591 0 14.1633 0.656928 14.663 1.61765C14.8877 1.63319 15.1121 1.65026 15.3359 1.66884C16.8752 1.7966 18 3.10282 18 4.60822V15C18 16.6569 16.6569 18 15 18H13.5V19.125C13.5 20.1605 12.6605 21 11.625 21H1.875C0.839466 21 0 20.1605 0 19.125V7.875C0 6.83947 0.839466 6 1.875 6H4.5V4.60822C4.5 3.10283 5.62475 1.7966 7.16405 1.66884C7.38795 1.65026 7.61227 1.63319 7.83701 1.61765ZM7.50702 3.14604C7.43401 3.15177 7.36104 3.15765 7.28812 3.1637C6.56523 3.2237 6 3.84365 6 4.60822V6H11.625C12.6605 6 13.5 6.83947 13.5 7.875V16.5H15C15.8284 16.5 16.5 15.8284 16.5 15V4.60822C16.5 3.84365 15.9348 3.2237 15.2119 3.1637C15.139 3.15765 15.066 3.15177 14.993 3.14604C14.9196 3.90594 14.2792 4.5 13.5 4.5H9C8.22085 4.5 7.58044 3.90594 7.50702 3.14604ZM12 7.875C12 7.66789 11.8321 7.5 11.625 7.5H1.875C1.66789 7.5 1.5 7.66789 1.5 7.875V19.125C1.5 19.3321 1.66789 19.5 1.875 19.5H11.625C11.8321 19.5 12 19.3321 12 19.125V7.875ZM3 10.5C3 10.0858 3.33579 9.75 3.75 9.75H3.7575C4.17171 9.75 4.5075 10.0858 4.5075 10.5V10.5075C4.5075 10.9217 4.17171 11.2575 3.7575 11.2575H3.75C3.33579 11.2575 3 10.9217 3 10.5075V10.5ZM5.25 10.5C5.25 10.0858 5.58579 9.75 6 9.75H9.75C10.1642 9.75 10.5 10.0858 10.5 10.5C10.5 10.9142 10.1642 11.25 9.75 11.25H6C5.58579 11.25 5.25 10.9142 5.25 10.5ZM3 13.5C3 13.0858 3.33579 12.75 3.75 12.75H3.7575C4.17171 12.75 4.5075 13.0858 4.5075 13.5V13.5075C4.5075 13.9217 4.17171 14.2575 3.7575 14.2575H3.75C3.33579 14.2575 3 13.9217 3 13.5075V13.5ZM5.25 13.5C5.25 13.0858 5.58579 12.75 6 12.75H9.75C10.1642 12.75 10.5 13.0858 10.5 13.5C10.5 13.9142 10.1642 14.25 9.75 14.25H6C5.58579 14.25 5.25 13.9142 5.25 13.5ZM3 16.5C3 16.0858 3.33579 15.75 3.75 15.75H3.7575C4.17171 15.75 4.5075 16.0858 4.5075 16.5V16.5075C4.5075 16.9217 4.17171 17.2575 3.7575 17.2575H3.75C3.33579 17.2575 3 16.9217 3 16.5075V16.5ZM5.25 16.5C5.25 16.0858 5.58579 15.75 6 15.75H9.75C10.1642 15.75 10.5 16.0858 10.5 16.5C10.5 16.9142 10.1642 17.25 9.75 17.25H6C5.58579 17.25 5.25 16.9142 5.25 16.5Z" fill="white"></path>
                        </svg>
                    </span>
                </div>
                <div>
                    <div class="flex gap10 items-center">
                        <div class="body-text mt-2 mb-4">Credit</div>
                    </div>
                    <h4>₱{{number_format($totals->total_credit,2)}}</h4>
                </div>
            </div>
        </div>
    </div>
    <!-- /chart-default -->
</div>
<div class="wg-box">
    <div class="flex items-center justify-between gap10 flex-wrap">
        <div class="wg-filter flex-grow">
            <div class="show">
                <div class="text-tiny">Showing</div>
                <div class="row-filter">
                    <select>
                        <option {{$filters['rows'] == 10 ? 'selected' : ''}}>10</option>
                        <option {{$filters['rows'] == 50 ? 'selected' : ''}}>50</option>
                        <option {{$filters['rows'] == 100 ? 'selected' : ''}}>100</option>
                        <option {{$filters['rows'] == "All" ? 'selected' : ''}}>All</option>
                    </select>
                </div>
                <div class="text-tiny">entries</div>
            </div>
            <form class="form-search">
                <input type="hidden" name="rows">
                <fieldset class="name">
                    <input type="text" placeholder="Search here..." class="" name="search" tabindex="2" value="{{$filters['search']??""}}">
                </fieldset>
                <div class="button-submit">
                    <button type="submit"><i class="icon-search"></i></button>
                </div>
            </form>
        </div>
        <a class="tf-button style-1 w250" href="#filter" data-bs-toggle="modal"><i class="icon-search"></i>Request Transaction History</a>
    </div>

   <div class="wg-table table-all-user">
        <ul class="table-title flex gap20 mb-14">
            <li>
                <div class="body-title">Name</div>
            </li>
            <li>
                <div class="body-title">Category</div>
            </li>
            <li>
                <div class="body-title">Reference</div>
            </li>
            <li>
                <div class="body-title">Description</div>
            </li>
            <li>
                <div class="body-title">Amount</div>
            </li>
            <li>
                <div class="body-title">Balance</div>
            </li>
            <li>
                <div class="body-title">Processed By</div>
            </li>
            <li>
                <div class="body-title text-end">Date</div>
            </li>
        </ul>
        <ul class="flex flex-column">
            @foreach($soa_query as $soa)
            <li class="wg-product item-row">
                <div class="body-text">{{$soa->owner_firstname.' '.$soa->owner_surname}}<br>{{$soa->id_number}}</div>
                <div class="body-text">{{$soa->category}}</div>
                <div class="body-text">{{$soa->reference}}</div>
                <div class="body-text">{{$soa->description}}</div>
                <div class="body-text text-{{$soa->type=="CREDIT"?"success":"danger"}}">{{$soa->type=="CREDIT"?"+":"-"}} ₱{{number_format($soa->amount,2)}}</div>
                <div class="body-text">₱{{number_format($soa->balance,2)}}</div>
                <div class="body-text">{{$soa->processed_username}}</div>
                <div class="body-text text-end">{{$soa->created_at}}</div>
            </li>
            @endforeach
        </ul>
    </div>
    @if($soa_query->count()>0)
    <div class="divider"></div>
    <div class="flex items-center justify-between flex-wrap gap10">
        <div class="text-tiny">
            Showing {{ $soa_query->count() }} entries
        </div>
        <ul class="wg-pagination">
            <!-- Previous Page Link -->
            @if ($soa_query->onFirstPage())
                <li class="disabled">
                    <a href="#"><i class="icon-chevron-left"></i></a>
                </li>
            @else
                <li>
                    <a href="{{ $soa_query->previousPageUrl() }}"><i class="icon-chevron-left"></i></a>
                </li>
            @endif

            <!-- Page Number Links -->
            @foreach ($soa_query->getUrlRange(1, $soa_query->lastPage()) as $page => $url)
                <li class="{{ $page == $soa_query->currentPage() ? 'active' : '' }}">
                    <a href="{{ $url }}">{{ $page }}</a>
                </li>
            @endforeach

            <!-- Next Page Link -->
            @if ($soa_query->hasMorePages())
                <li>
                    <a href="{{ $soa_query->nextPageUrl() }}"><i class="icon-chevron-right"></i></a>
                </li>
            @else
                <li class="disabled">
                    <a href="#"><i class="icon-chevron-right"></i></a>
                </li>
            @endif
        </ul>
    </div>
    @endif
</div>
<!-- /all-user -->

<form action="{{route('shop-bo.soa.list.transaction-history')}}" method="post">
    @csrf
    @honeypot
    <div class="modal fade" id="filter">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header d-flex justify-content-between">
                    <h4>Request Transaction History</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
                </div>
                <div class="modal-body">
                    <div class="row" style="padding:10px">
                        <div class="alert alert-danger" role="alert" id="uniqueidMsg" style="display:none;font-size:13px">Incorrect ID Number</div>
                         <div class="alert alert-success" role="alert" id="name" style="display:none;font-size:13px"></div>
                        <div class="col-md-12 col-sm-12 mb-30">
                            <fieldset>
                                <div class="body-title">ID Number<span class="tf-color-1">*</span></div>
                                <input type="text" class="form-control" name="id_number" onkeyup="checkUser(this)">
                            </fieldset>
                        </div>

                        <div class="col-md-12 col-12 mb-30">
                            <fieldset>
                                <div class="body-title">Date Range</div>
                                <select class="flex-grow" name="date_range" id="date_range">
                                    <option value="7">Last 7 Days</option>
                                    <option value="30">Last 30 Days</option>
                                    <option value="60">Last 60 Days</option>
                                    <option value="Custom">Custom</option>
                                </select>
                            </fieldset>
                        </div>

                        <div class="col-md-6 col-sm-12 mb-30">
                            <fieldset>
                                <div class="body-title">From<span class="tf-color-1">*</span></div>
                                <input type="date" class="form-control" name="from" id="from" readonly>
                            </fieldset>
                        </div>

                        <div class="col-md-6 col-sm-12 mb-30">
                            <fieldset>
                                <div class="body-title">To<span class="tf-color-1">*</span></div>
                                <input type="date" class="form-control" name="to" id="to" readonly>
                            </fieldset>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="tf-button" type="submit">Submit</button>
                </div>
            </div>
        </div>
    </div>
</form>

@endsection
@section('page_script')
@parent
<script>
    $(".soa").addClass("active");
</script>
<script>
    $('input[name="rows"]').val("{{$filters['rows']??"10"}}");
    $('.row-filter select').change(function () {
        var selectedValue = $(this).val();
        $('input[name="rows"]').val(selectedValue);
    });
</script>
<script>
$(document).ready(function() {
    function setDateRange(value) {
        const today = new Date();
        const toDate = new Date(today);
        toDate.setDate(today.getDate() - 1); // exclude today
        let fromDate;

        if (value !== 'Custom') {
            // Calculate date range (excluding today)
            fromDate = new Date(toDate);
            fromDate.setDate(toDate.getDate() - (parseInt(value) - 1));

            const fromStr = fromDate.toISOString().split('T')[0];
            const toStr = toDate.toISOString().split('T')[0];

            // Apply and disable date pickers
            $('#from').val(fromStr).prop('readonly', true);
            $('#to').val(toStr).prop('readonly', true);

        } else {
            // Enable manual entry for custom range
            $('#from, #to').val('').prop('readonly', false);

            // Set dynamic limits
            $('#from').attr('max', '');
            $('#to').attr('min', '');
        }
    }

    // Update "To" min date based on "From"
    $('#from').on('change', function() {
        const from = $(this).val();
        if (from) {
            $('#to').attr('min', from);
        } else {
            $('#to').removeAttr('min');
        }
    });

    // Update "From" max date based on "To"
    $('#to').on('change', function() {
        const to = $(this).val();
        if (to) {
            $('#from').attr('max', to);
        } else {
            $('#from').removeAttr('max');
        }
    });

    // Range dropdown change
    $('#date_range').on('change', function() {
        const value = $(this).val();
        setDateRange(value);
    });

    // Initialize on load
    $('#date_range').trigger('change');
});

var ajax_request;
    var ajax_request = false;
    function checkUser(el){

        if(ajax_request)
        ajax_request.abort()
        ajax_request = true;
        ajax_request = $.ajax({
            url : "{{url('admin/shop-bo/soa/get-user')}}/"+($(el).val()==""?"0000000":$(el).val()),
            success : function(response){
                if(response.exists){
                    $("#uniqueidMsg").hide();
                    $('button[type=submit], input[type=submit]').prop('disabled', false);

                    $("#name").text(response.firstname + " " + response.surname).show();
                } else {
                    if(el.value === ""){
                        $("#uniqueidMsg").hide();
                        $('button[type=submit], input[type=submit]').prop('disabled', false);
                        $("#name").hide().text('');
                    } else {
                        $("#name").hide().text('');
                        $("#uniqueidMsg").show();
                        $('button[type=submit], input[type=submit]').prop('disabled', true);
                    }
                }
            }

        })
    }
</script>



@endsection
<!-- App js -->