@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')

@if (session('success'))
    <div class="alert alert-success alert-solid" role="alert" id="success-alert">
        <strong>{{ session('success') }} </strong>
    </div>
@endif

@if (session('error'))
    <div class="alert alert-danger alert-solid" role="alert" id="danger-alert">
        <strong>{{ session('error') }} </strong>
    </div>
@endif

<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">Available Pickup List</h5>
                        </div>
                    </div>
                    <div class="col-sm-auto">
                        <div class="d-flex flex-wrap align-items-start gap-2">
                            <!-- <button class="btn btn-soft-danger" id="remove-actions" onClick="deleteMultiple()"><i class="ri-delete-bin-2-line"></i></button> -->
                            <!-- <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 action="{{route('pickups.index')}}" method="GET">
      
                    <div class="row g-3">
                        <div class="col-xxl-3 col-sm-2">
                            <div class="search-box">
                                <input type="text" class="form-control border-light" name="search" value="{{ $search }}" placeholder="Search Order No..." name="query" autofocus>
                                <i class="ri-search-line search-icon"></i>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-sm-2" hidden>
                            <div class="input-light">
                                <select class="form-select border-light" name="location_id">
                                    @foreach($locations as $location)
                                    <option value="{{ $location->AcLocationID }}" selected>{{ $location->AcLocationDesc }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-sm-2">
                            <div class="input-light">
                                <select class="form-select border-light" name="status">
                                    <option value="all" >All</option>
                                    <option value="pending" >Pending</option>
                                    <option value="2" >Partially collected</option>
                                    <option value="1" >Collected</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-xxl-1 col-sm-2">
                            <button type="submit" class="btn btn-primary w-100">
                                Search
                            </button>
                        </div>
                        <div class="col-sm-auto">
                            <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" onclick="syncPickup();"><i class="ri-refresh-line label-icon align-middle rounded-pill fs-16 me-2"></i> Sync</button>
                                </div>
                            </div>
                        </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 data-sort="id">Order No</th>
                                    <th data-sort="AcCustomerName">Customer Name</th>
                                    <th data-sort="phone">Document Date</th>
                                    <th data-sort="LocalBalanceAmount">Status</th>
                                </tr>
                            </thead>
                            <tbody class="form-check-all">
                       
                                @foreach($pickups as $pickup)
                                @if($search || $status != 'all')
                                <tr>
                                    <td class="id">
                                        <a href="{{ route('pickups.view_collection',['AcCusSalesOrderMID'=> $pickup->AcCusSalesOrderMID ]) }}" style="border-bottom: dotted 1px rgba(var(--vz-link-color-rgb),var(--vz-link-opacity, 1))">
                                            <!-- <span style="line-height:1.5; margin-right: 3px" class="badge badge-pill bg-info" data-key="t-hot"> -->
                                            {{ $pickup['AcCusSalesOrderMID'] }}
                                            <br>
                                        </a>
                                    </td>
                                    <td class="MemberPointBalance">{{ $pickup['AcCustomerName'] }}</td>
                                    <td class="phone">{{ $pickup['DocumentDate'] }}</td>
                                    @if($pickup['status'] == '2')
                                        <td class="phone">
                                            <span class="badge bg-danger-subtle text-danger text-uppercase">Partially collected</span>
                                        </td>
                                    @elseif($pickup['status'] == '1')
                                        <td class="phone">
                                            <span class="badge bg-success-subtle text-success text-uppercase">Collected</span>
                                        </td>
                                    @else
                                        <td class="phone">
                                            <span class="badge bg-danger-subtle text-danger text-uppercase">Pending</span>
                                        </td>
                                    @endif

                                    {{-- <td class="phone">{{ $pickup['DeliveryDate'] }}</td> --}}
                                </tr>
                                @else
                                 @if($pickup['status'] != '1')
                                 <tr>
                                    <td class="id">
                                        <a href="{{ route('pickups.view_collection',['AcCusSalesOrderMID'=> $pickup->AcCusSalesOrderMID ]) }}" style="border-bottom: dotted 1px rgba(var(--vz-link-color-rgb),var(--vz-link-opacity, 1))">
                                            <!-- <span style="line-height:1.5; margin-right: 3px" class="badge badge-pill bg-info" data-key="t-hot"> -->
                                            {{ $pickup['AcCusSalesOrderMID'] }}
                                            <br>
                                        </a>
                                    </td>
                                    <td class="MemberPointBalance">{{ $pickup['AcCustomerName'] }}</td>
                                    <td class="phone">{{ $pickup['DocumentDate'] }}</td>
                                    @if($pickup['status'] == '2')
                                        <td class="phone">
                                            <span class="badge bg-danger-subtle text-danger text-uppercase">Partially collected</span>
                                        </td>
                                    @elseif($pickup['status'] == '1')
                                        <td class="phone">
                                            <span class="badge bg-success-subtle text-success text-uppercase">Collected</span>
                                        </td>
                                    @else
                                        <td class="phone">
                                            <span class="badge bg-danger-subtle text-danger text-uppercase">Pending</span>
                                        </td>
                                    @endif

                                    {{-- <td class="phone">{{ $pickup['DeliveryDate'] }}</td> --}}
                                </tr>
                                 @endif
                                @endif
                                @endforeach
                
                            </tbody>
                        </table>
                        <div class="noresult"  
                        @if(count($pickups) > 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>
                    {{ $pickups->links() }}

                    @if(isset($sync_time))
                    <div style="text-align: right;"><small><i>Last sync was on {{$sync_time}}</i></small></div>
                    @endif
                </div>
            </div>
        </div>

    </div>
</div>
@endsection
@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script>
    function syncPickup(){
        const token = "{{ csrf_token() }}";  // CSRF token

        try {
                var response = fetch("{{ route('sync.getPickupByLocation',['location_id'=>$location_id])}}", {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': token,  // CSRF token in headers
                    }
                });
                // Create and display the loader
              
                callLoaddingScreen('Syncing pickup list...');
                setTimeout(function() {
                   
                    location.reload();
              
                }, 3000);  

                

                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }

            } catch (error) {
                console.error('Error:', error);  // Handle errors
            }
    
    }
</script>
@endsection