@extends('layouts.master')
@section('title')
@lang('translation.customers')
@endsection
@section('css')
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')

<style>
    #loading-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .spinner {
        border: 16px solid #f3f3f3;
        border-top: 16px solid #3498db;
        border-radius: 50%;
        width: 120px;
        height: 120px;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
<div id="loading-panel" style="display: none;">
    <div class="spinner"></div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="card" id="customerList">
            <div class="card-header border-bottom-dashed">

                <div class="row g-4 align-items-center">
                    <div class="col-sm">
                        <div>
                            <h5 class="card-title mb-0">({{ $customer['MemberNo']}}) {{$customer['AcCustomerName']}} - Sales Order History</h5>
                        </div>
                    </div>
                    <div class="col-sm-auto">
                        <div class="d-flex flex-wrap align-items-start gap-2">
                            <!--  -->
                            <!-- <button type="button" class="btn btn-soft-success btn-label rounded-pill"><i class="ri-refresh-line label-icon align-middle rounded-pill fs-16 me-2"></i> Sync</button> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body border-bottom-dashed border-bottom">
                <form>
                    <div class="d-flex g-3">
                        {{-- <div class="col-xxl-4 col-sm-6">
                            <div class="search-box">
                                <input type="text" class="form-control border-light" name="search" placeholder="Search order no..." autofocus>
                                <i class="ri-search-line search-icon"></i>
                            </div>
                        </div> --}}
                            <div style="margin-right:10px; margin-top: 10px;" class="fw-semibold text-uppercase fs-12">Sort by </div>
                            <div style="margin-right:10px">
                                <a href="{{ route('customers.show_customer_order_cash_history',['customerId'=> $customer['MemberNo'] ]) }}" onclick="showLoadingPanel()" class="btn btn-primary w-20">
                                    Cash Order
                                </a>
                            </div>
                            <div class="">
                                <a href="{{ route('customers.show_customer_order_sales_history',['customerId'=> $customer['MemberNo'] ]) }}" onclick="showLoadingPanel()"class="btn btn-primary w-20">
                                    Sales Order
                                </a>
                            </div>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <div>
                    <div class="table-responsive table-card mb-1">
                        <table class="table table-striped align-middle" id="customerTable">
                            <thead class="table-light text-muted">
                                <tr>
                                    <th>Order No</th>
                                    <th>DOC Date & Time</th>
                                    <th>Staff</th>
                                    {{-- <th>Company ID</th> --}}
                                    <th>Purchase Outlet</th>
                                    {{-- <th>Customer ID</th> --}}
                                    {{--  --}}
                                    {{-- <th>Document Time</th> --}}
                                    {{-- <th class="text-end">Net Amount (RM)</th> --}}
                                    <th class="text-end">Final Amount (RM)</th>
                                </tr>
                            </thead>
                            <tbody class="form-check-all">
                                
                                @forEach($cash_sales_list as $key => $document)

                                <tr class="document-header" data-document-no="{{ $document['DocumentHeader']['DocumentNo'] }}">
                                    <td>
                                        {{-- <b>{{ $document['DocumentHeader']['AcCustomerID'] }}</b>
                                        <br> --}}
                                        <b>{{ $document['DocumentHeader']['DocumentNo'] }}</b>
                                        {{-- <br>
                                        {{ $document['DocumentHeader']['DocumentDate'] }}</td> --}}
                                    <td>
                                        {{ $document['DocumentHeader']['DocumentDate'] }}
                                    </td>
                                    <td>{{ $document['DocumentHeader']['AcSalesmanID'] }}</td>
                                    {{-- <td>{{ $document['DocumentHeader']['AcCompanyID'] }}</td> --}}
                                    <td>{{ $document['DocumentHeader']['AcLocationID'] }}</td>
                                    {{-- <td></td> --}}
                                    {{-- <td></td> --}}
                                    {{-- <td></td> --}}
                                    {{-- <td class="text-end">{{ $document['DocumentHeader']['AmountNet'] }}</td> --}}
                                    <td class="text-end">{{ $document['DocumentHeader']['AmountFinal'] }}</td>
                                </tr>
                                <tr class="document-details" id="details-{{ $document['DocumentHeader']['DocumentNo'] }}" style="display: none;">
                                    <td colspan="9">
                                        <table class="table table-primary table-striped align-middle mb-0">
                                            <thead class="">
                                                <tr>
                                                    <th>No</th>
                                                    <th>Product Code</th>
                                                    <th>Description</th>
                                                    <th class="text-center">QTY</th>
                                                    {{-- <th>UOM ID</th> --}}
                                                    <th class="text-end">Unit Price (RM)</th>
                                                    <th class="text-end">Amount (RM)</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($document['DocumentDetails'] as $detail)
                                                    <tr>
                                                        <td>{{ $detail['ItemNo'] }}</td>
                                                        <td>{{ $detail['AcStockID'] }}</td>
                                                        <td>{{ $detail['ItemNotes'] }}</td>
                                                        <td class="text-center">{{ $detail['ItemQuantity'] }}</td>
                                                        {{-- <td>{{ $detail['AcStockUOMID'] }}</td> --}}
                                                        <td class="text-end">{{ $detail['ItemPrice'] }}</td>
                                                        <td class="text-end">{{ $detail['ItemAmount'] }}</td>
                                                        
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                                @endforeach
                                
                            </tbody>
                        </table>
                        <div class="noresult"  
                        @if($cash_sales_count > 0) 
                        style="display: none" 
                        @endif>
                            <div class="text-center">
                                <i data-feather="x-square" class="icon-dual" style="color: gray; width:75px;height:75px"></i>
                                <h5 class="mt-2">Sorry! No Result Found</h5>
                                <p class="text-muted mb-0">We did not find any results for you search.</p>
                            </div>
                        </div>
                    </div>
        
                    <!-- <div class="d-flex justify-content-end">
                        <div class="pagination-wrap hstack gap-2">
                            <a class="page-item pagination-prev disabled" href="#">
                                Previous
                            </a>
                            <ul class="pagination listjs-pagination mb-0"></ul>
                            <a class="page-item pagination-next" href="#">
                                Next
                            </a>
                        </div>
                    </div> -->
                </div>
                <div class="modal fade" id="showModal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header bg-light p-3">
                                <h5 class="modal-title" id="exampleModalLabel"></h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
                            </div>
                            <form class="tablelist-form" autocomplete="off">
                                <div class="modal-body">
                                    <input type="hidden" id="id-field" />

                                    <div class="mb-3" id="modal-id" style="display: none;">
                                        <label for="id-field1" class="form-label">ID</label>
                                        <input type="text" id="id-field1" class="form-control" placeholder="ID" readonly />
                                    </div>

                                    <div class="mb-3">
                                        <label for="customername-field" class="form-label">Customer
                                            Name</label>
                                        <input type="text" id="customername-field" class="form-control" placeholder="Enter name" required />
                                    </div>

                                    <div class="mb-3">
                                        <label for="email-field" class="form-label">Email</label>
                                        <input type="email" id="email-field" class="form-control" placeholder="Enter email" required />
                                    </div>

                                    <div class="mb-3">
                                        <label for="phone-field" class="form-label">Phone</label>
                                        <input type="text" id="phone-field" class="form-control" placeholder="Enter phone no." required />
                                    </div>

                                    <div class="mb-3">
                                        <label for="date-field" class="form-label">Joining
                                            Date</label>
                                        <input type="date" id="date-field" class="form-control" data-provider="flatpickr" data-date-format="d M, Y" required placeholder="Select date" />
                                    </div>

                                    <div>
                                        <label for="status-field" class="form-label">Status</label>
                                        <select class="form-control" data-choices data-choices-search-false name="status-field" id="status-field">
                                            <option value="">Status</option>
                                            <option value="Active">Active</option>
                                            <option value="Block">Block</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class="hstack gap-2 justify-content-end">
                                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                        <button type="submit" class="btn btn-success" id="add-btn">Add Customer</button>
                                        {{-- <button type="button" class="btn btn-primary" id="edit-btn">Update</button> --}}
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

               
            </div>
        </div>

    </div>
</div>
@endsection
@section('script')
{{-- <script src="{{ URL::asset('build/libs/list.js/list.min.js') }}"></script> --}}
{{-- <script src="{{ URL::asset('build/libs/list.pagination.js/list.pagination.min.js') }}"></script> --}}
{{-- <script src="{{ URL::asset('build/js/pages/ecommerce-customer-list-2.init.js') }}"></script> --}}
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var headers = document.querySelectorAll('.document-header');

    headers.forEach(function(header) {
        header.addEventListener('click', function() {
            var documentNo = this.getAttribute('data-document-no');
            var detailsRow = document.getElementById('details-' + documentNo);

            if (detailsRow.style.display === 'none') {
                detailsRow.style.display = 'table-row';
            } else {
                detailsRow.style.display = 'none';
            }
        });
    });
});
</script>
<script>
function showLoadingPanel(){
    document.getElementById('loading-panel').style.display = 'flex';
    setTimeout(function() {
        document.getElementById('loading-panel').style.display = 'none';
    }, 5000);
}
</script>
@endsection