@extends('admin/layouts/layout')

@section('title', "Orders")

@section('page-style')
@endsection


@section('page-script')
<script src="{{asset('assets/admin/js/orders.js')}}"></script>
@endsection

@section('content')
<h1>Orders</h1>
<div class="card">
    <div class="card-body">
        <div class="table-responsive d-none d-md-block">
            <table class="table dataTable">
                <thead>
                    <tr>
                        <th class="text-nowrap">ORDER #</th>
                        <th>Email</th>
                        <th>Phone Number</th>
                        <th>Item</th>
                        <th>Payment</th>
                        <th>AMOUNT</th>
                        <th>DATE</th>                        
                        <th>Status</th>
                        <th class="text-end">Reference</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($orders as $history)
                    <tr data-order_id="{{$history->id}}" data-referrence="{{$history->reference}}">
                        <td>#{{ $history->order_number }}</td>
                        <td>
                            @if($history->user->email)
                                {{$history->user->email}}
                            @else
                                -
                            @endif
                        </td>
                        <td>
                            @if($history->user->phone_number)
                                {{$history->user->phone_number}}
                            @else
                                -
                            @endif
                        </td>
                        <td class="text-nowrap">
                            @if($history->item == "QBio Pro")
                                <img src="{{asset('assets/imgs/goods-pro.png')}}" class="product-img">
                            @elseif($history->item == "QBio Elixir")
                                <img src="{{asset('assets/imgs/goods-elixir.png')}}" class="product-img">
                            @elseif($history->item == "QBio Gro")
                                <img src="{{asset('assets/imgs/goods-gro.png')}}" class="product-img">
                            @endif
                            <span class="ms-1">{{$history->item}}</span>
                        </td>
                        <td>
                            @if($history->payment_method == 1)
                            <i class="fa-brands fa-stripe"></i>
                            @elseif($history->payment_method == 2)
                            <i class="fa-brands fa-google"></i>
                            @elseif($history->payment_method == 3)
                            <i class="fa-brands fa-apple"></i>
                            @endif
                        </td>
                        <td>
                            @if($history->is_full_paid == 1)
                            ${{ $history->total_amount }}
                            @else
                            ${{ $history->amount }}
                            @endif
                        </td>
                        <td>{{ (new DateTime($history->created_at))->format('F d, Y'); }}</td>
                        <td class="gap-2">
                            @if($history->is_full_paid == 1)
                                <span class="badge bg-label-sucess mb-1" data-bs-toggle="tooltip" title="Full Paid at: {{$history->full_amount_paid_at ? substr($history->full_amount_paid_at, 0, 10) : '' }}"><i class="fa-regular fa-handshake"></i></span>
                            @else
                                <span class="badge bg-label-info mb-1" data-bs-toggle="tooltip" title="Preorder">P</span>
                            @endif
                            
                            @if($history->status != 2 && $history->is_cancel_request == 1)
                                <span class="badge bg-label-danger mb-1" data-bs-toggle="tooltip" title="Cancelled and Refunded at: {{$history->cancel_request_send_at}}">C</span>
                            @endif

                            @if($history->status == 1)
                            
                            @elseif($history->status == 2)
                            <span class="badge bg-label-secondary mb-1" data-bs-toggle="tooltip" title="Cancel Request Approved at: {{$history->cancelled_at}}"><i class="fa-solid fa-xmark"></i></span>
                            @elseif($history->status == 3)
                            <span class="badge bg-label-warning mb-1" data-bs-toggle="tooltip" title="Ready To Ship"><i class="fa-solid fa-cart-shopping"></i></span>
                            @elseif($history->status == 4)
                            <span class="badge bg-label-primary mb-1" data-bs-toggle="tooltip" title="Shipping started at: {{substr($history->delivery_at, 0, 10)}}"><i class="fa-solid fa-truck-fast"></i></span>
                             @elseif($history->status == 5)
                            <span class="badge bg-label-sucess mb-1" data-bs-toggle="tooltip" title="Order Completed at: {{substr($history->ship_completed_at, 0, 10)}}"><i class="fa-solid fa-check"></i></span>
                            @endif
                        </td>
                        <td class="text-end">
                            <a href="javascript:;" class="view-reference-btn"><i class="fa fa-eye"></i></a>
                        </td>
                        <td class="text-end text-nowrap">
                            <div class="d-flex justify-content-between">
                                <div>
                                    @if($history->status == 1 || $history->status == 3)
                                        <!-- Cancel Order Button -->
                                        <a href="javascript:;" class="cancel-order-btn text-danger me-2" title="Cancel Order" data-bs-toggle="tooltip"><i class="fa-solid fa-xmark"></i></a>
                                    @endif
                                </div>
                                <div>
                                    @if($history->is_full_paid == 0 && ($history->status == 1 || $history->status == 3))
                                        <!-- Ready To Ship button for sending email to pay remain balance -->
                                        <a href="javascript:;" class="ready-ship-btn text-warning me-1" title="Ready To Ship - Send a request to Pay rest amount" data-bs-toggle="tooltip"><i class="fa-solid fa-cart-shopping"></i></a>
                                    @endif    

                                    @if($history->is_full_paid == 1 && ($history->status == 1 || $history->status == 3 || $history->status == 4))
                                        <!-- Start delivery Button -->
                                        <a href="javascript:;" class="delivery-btn ms-1 label-primary" data-bs-toggle="tooltip" title="Start Delivery"><i class="fa-solid fa-truck-fast"></i></a>
                                    @endif

                                    @if($history->is_full_paid == 1 && $history->status != 2 && $history->status != 5)
                                        <a href="javascript:;" class="completed-order-btn text-success" data-bs-toggle="tooltip" title="Order Completed"><i class="fa-solid fa-check"></i></a>
                                    @endif
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="transaction_detail_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-simple modal-dialog-centered modal-add-new-role">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Details</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="col-12 mb-4">
                    <div id="m_detail_info">
                    </div>           
                </div>

                <div class="col-12 text-center">
                    <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                </div>
            </div>
            
        </div>
    </div>
</div>


<div class="modal fade" id="delivery_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-simple modal-dialog-top modal-add-new-role">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Start Delivery</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="delivery_form">
                    <input type="hidden" id="m_order_id" >
                    <div class="form-group mb-4">
                        <label for="m_delivery_start_date">Delivery Start Date:</label>
                        <input class="form-control flatpickr-date" id="m_delivery_start_date" placeholder="Delivery Start Date" value="{{date('Y-m-d')}}" required>
                    </div>
                    <div class="form-group mb-4">
                        <label for="m_ship_track_number">Tracking Number:</label>
                        <input class="form-control" id="m_ship_track_number" placeholder="Tracking Number" value="" required>
                    </div>
                    <div class="form-group mb-4">
                        <label for="m_ship_track_link">Track Your Shipment:</label>
                        <textarea class="form-control" id="m_ship_track_link" placeholder="Tracking Link" value="" required></textarea>
                    </div>

                    <div class="ext-center">
                        <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>
@endsection