@include('./util/header')

<script language="JavaScript">
<!--
//	popup window opener 6/1/5
	var newPopupWindow
	function openPopupWindow(pageName,windowHeight,windowWidth) {
		
		if (!newPopupWindow || newPopupWindow.closed) {
			newPopupWindow=window.open( pageName ,'popup_window','scrollbars,resizable,status,height=' + windowHeight + ',width=' + windowWidth + ',screenX=260,screenY=160' );
			if (!newPopupWindow.opener) {
				newPopupWindow.opener = window;
				}
			} else {
				newPopupWindow.location.href = pageName;
				newPopupWindow.focus();
			}
		} // openPopupWindow
//-->
</script>

<div class="row">
                        <h4 class="card-title">CLI Certified Practitioners' Resource Center: Orders</h4>
                        
                        @if($errors->any())
                            <div class="col-12 mb-3">
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <h5 class="alert-heading">Error!</h5>
                                    @foreach ($errors->all() as $error)
                                        <p class="mb-0">{{ $error }}</p>
                                    @endforeach
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            </div>
                        @endif

                        @if(session('success'))
                            <div class="col-12 mb-3">
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <h5 class="alert-heading">Success!</h5>
                                    <p class="mb-0">{{ session('success') }}</p>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            </div>
                        @endif
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Unpaid Orders</h4>
                                        <!-- <p class="card-title-desc">DataTables has most features enabled by
                                            default, so all you need to do to use it with your own tables is to call
                                            the construction function: <code>$().DataTable();</code>.
                                        </p> -->
                                    </div>
                                    <div class="card-body">
        
                                        <table id="datatable" class="table table-bordered dt-responsive  nowrap w-100">
                                            <thead>
                                            <tr>
                                                <th>Order #</th>
                                                <th>Date </th>
                                                <th>Group</th>
                                                <th>Total</th>
                                                <th>Payment Status</th>
                                                <th>Action</th>
                                             
                                            </tr>
                                            </thead>
        
        
                                            <tbody>
                                            @php
                                            
                                            @endphp
                                            @foreach($orders as $order)

                                                @php
                                                $datePaid = $order->datePaid;
                                                $dateCancelled = $order->dateCancelled;
                                                
                                                $isUnpaid = is_null($datePaid) || empty($datePaid) || 
                                                           $datePaid === '0000-00-00' || 
                                                           $datePaid === '0000-00-00 00:00:00' ||
                                                           trim($datePaid) === '';
                                                           
                                                $isCancelled = !is_null($dateCancelled) && !empty($dateCancelled) && 
                                                              $dateCancelled !== '0000-00-00' && 
                                                              $dateCancelled !== '0000-00-00 00:00:00' &&
                                                              trim($dateCancelled) !== '';

                                                if ($isUnpaid && !$isCancelled) {
                                            @endphp
                                                <tr>
                                                    <td>#{{ $order->orderID }}</td>
                                                    <td>{{ $order->dateAdded }}</td>
                                                    <td>{{ $order->groupName }}</td>
                                                    <td>{{ $order->subTotal }}</td>
                                                    <td><span class="badge badge-danger">Not paid</span></td>
                                                    <td>
                                                        <a href="{{ route('account-order-display', ['orderID' => $order->orderID]) }}" class="btn btn-sm btn-info">Info</a>
                                                        <form method="POST" action="{{ route('payment.order') }}" style="display: inline-block;" class="ml-2">
                                                            @csrf
                                                            <input type="hidden" name="order_id" value="{{ $order->orderID }}">
                                                            <button type="submit" class="btn btn-sm btn-success">
                                                                <i class="fas fa-credit-card"></i> Pay Now (${{ number_format($order->subTotal, 2) }})
                                                            </button>
                                                        </form>
                                                    </td>
                                                </tr>
                                            @php
                                                }
                                            @endphp
                                            
                                               
                                            @endforeach
                                        
                                            </tbody>
                                        </table>
        
                                    </div>
                                </div>
                            </div> <!-- end col -->
                        </div> <!-- end row -->

                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Paid Orders</h4>
                                        <!-- <p class="card-title-desc">DataTables has most features enabled by
                                            default, so all you need to do to use it with your own tables is to call
                                            the construction function: <code>$().DataTable();</code>.
                                        </p> -->
                                    </div>
                                    <div class="card-body">
        
                                        <table id="datatable" class="table table-bordered dt-responsive  nowrap w-100">
                                            <thead>
                                            <tr>
                                                <th>Order #</th>
                                                <th>Date </th>
                                                <th>Group</th>
                                                <th>Total</th>
                                                <th>Payment Status</th>
                                                <th>Action</th>
                                            </tr>
                                            </thead>
        
        
                                            <tbody>
                                            @foreach($orders as $order)

                                            @php
                                                $datePaid = $order->datePaid;
                                                $isPaid = !is_null($datePaid) && !empty($datePaid) && 
                                                         $datePaid !== '0000-00-00' && 
                                                         $datePaid !== '0000-00-00 00:00:00' &&
                                                         trim($datePaid) !== '';

                                                if ($isPaid) {
                                            @endphp
                                                <tr>
                                                    <td>#{{ $order->orderID }}</td>
                                                    <td>{{ $order->dateAdded }}</td>
                                                    <td>{{ $order->groupName }}</td>
                                                    <td>{{ $order->subTotal }}</td>
                                                    <td><span class="badge badge-success">Paid</span></td>
                                                    <td>
                                                        <a href="{{ route('account-order-display', ['orderID' => $order->orderID]) }}" class="btn btn-sm btn-info">Info</a>
                                                        <div class="text-muted small">Paid on {{ \Carbon\Carbon::parse($datePaid)->format('M d, Y') }}</div>
                                                    </td>

                                                </tr>
                                            @php
                                                }
                                            @endphp

                                                
                                                @endforeach
                                        
                                            </tbody>
                                        </table>
        
                                    </div>
                                </div>
                            </div> <!-- end col -->
                        </div> <!-- end row -->

                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title">Cancelled  Orders</h4>
                                        <!-- <p class="card-title-desc">DataTables has most features enabled by
                                            default, so all you need to do to use it with your own tables is to call
                                            the construction function: <code>$().DataTable();</code>.
                                        </p> -->
                                    </div>
                                    <div class="card-body">
        
                                        <table id="datatable" class="table table-bordered dt-responsive  nowrap w-100">
                                            <thead>
                                            <tr>
                                                <th>Order #</th>
                                                <th>Date </th>
                                                <th>Group</th>
                                                <th>Total</th>
                                                <th>Payment Status</th>
                                                <th>Action</th>
                                            </tr>
                                            </thead>
        
        
                                            <tbody>
                                            @foreach($orders as $order)

                                                @php
                                                    $dateCancelled = $order->dateCancelled;
                                                    $isCancelled = !is_null($dateCancelled) && !empty($dateCancelled) && 
                                                                  $dateCancelled !== '0000-00-00' && 
                                                                  $dateCancelled !== '0000-00-00 00:00:00' &&
                                                                  trim($dateCancelled) !== '';

                                                    if ($isCancelled) {
                                                @endphp
                                                    <tr>
                                                        <td>#{{ $order->orderID }}</td>
                                                        <td>{{ $order->dateAdded }}</td>
                                                        <td>{{ $order->groupName }}</td>
                                                        <td>{{ $order->subTotal }}</td>
                                                        <td><span class="badge badge-warning">Cancelled</span></td>
                                                        <td>
                                                            <a href="{{ route('account-order-display', ['orderID' => $order->orderID]) }}" class="btn btn-sm btn-info">Info</a>
                                                            <div class="text-muted small">Cancelled on {{ \Carbon\Carbon::parse($dateCancelled)->format('M d, Y') }}</div>
                                                        </td>
                                                </tr>
                                            @php
                                                }
                                            @endphp

                                                
                                                @endforeach
                                        
                                            </tbody>
                                        </table>
        
                                    </div>
                                </div>
                            </div> <!-- end col -->
                        </div> <!-- end row -->

<style>
    /* Dark Mode Styles for Account Orders Page Tables */
    body[data-layout-mode="dark"] #datatable {
        color: #e9ecef;
    }
    
    body[data-layout-mode="dark"] #datatable thead th {
        background: #323849 !important;
        color: #adb5bd !important;
        border-bottom: 2px solid #3a4052 !important;
    }
    
    body[data-layout-mode="dark"] #datatable tbody tr {
        background-color: #2a3042 !important;
        color: #e9ecef !important;
    }
    
    body[data-layout-mode="dark"] #datatable tbody td {
        background-color: #2a3042 !important;
        color: #e9ecef !important;
        border-color: #3a4052 !important;
    }
    
    body[data-layout-mode="dark"] #datatable tbody tr:hover {
        background-color: #3a4052 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    
    body[data-layout-mode="dark"] #datatable tbody td[style*="border"] {
        border-color: #3a4052 !important;
    }
    
    /* Badge Dark Mode Styles */
    body[data-layout-mode="dark"] .badge-danger,
    body[data-layout-mode="dark"] .badge.badge-danger {
        background-color: #dc3545 !important;
        color: #ffffff !important;
    }
    
    body[data-layout-mode="dark"] .badge-success,
    body[data-layout-mode="dark"] .badge.badge-success {
        background-color: #28a745 !important;
        color: #ffffff !important;
    }
    
    body[data-layout-mode="dark"] .badge-warning,
    body[data-layout-mode="dark"] .badge.badge-warning {
        background-color: #ffc107 !important;
        color: #212529 !important;
    }
    
    /* Text Muted Dark Mode */
    body[data-layout-mode="dark"] .text-muted {
        color: #adb5bd !important;
    }
    
    /* DataTables Dark Mode Styles */
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_length,
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_filter,
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_info,
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_paginate {
        color: #adb5bd !important;
    }
    
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_filter input {
        background-color: #2a3042 !important;
        border-color: #3a4052 !important;
        color: #e9ecef !important;
    }
    
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_filter input:focus {
        background-color: #2a3042 !important;
        border-color: #6c9bff !important;
        color: #e9ecef !important;
        box-shadow: 0 0 0 0.2rem rgba(108, 155, 255, 0.25);
    }
    
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_length select {
        background-color: #2a3042 !important;
        border-color: #3a4052 !important;
        color: #e9ecef !important;
    }
    
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_length select:focus {
        background-color: #2a3042 !important;
        border-color: #6c9bff !important;
        color: #e9ecef !important;
    }
    
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_length select option {
        background-color: #2a3042 !important;
        color: #e9ecef !important;
    }
    
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
        background-color: #2a3042 !important;
        border-color: #3a4052 !important;
        color: #adb5bd !important;
    }
    
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: #6c9bff !important;
        border-color: #6c9bff !important;
        color: #ffffff !important;
    }
    
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: #3a4052 !important;
        border-color: #3a4052 !important;
        color: #e9ecef !important;
    }
    
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
        background-color: #2a3042 !important;
        border-color: #3a4052 !important;
        color: #495057 !important;
        opacity: 0.5;
    }
    
    body[data-layout-mode="dark"] .dataTables_wrapper .dataTables_info {
        color: #adb5bd !important;
    }
    
    /* Card Dark Mode Styles */
    body[data-layout-mode="dark"] .card {
        background-color: #2a3042 !important;
        border-color: #3a4052 !important;
    }
    
    body[data-layout-mode="dark"] .card-header {
        background-color: #323849 !important;
        border-bottom-color: #3a4052 !important;
        color: #e9ecef !important;
    }
    
    body[data-layout-mode="dark"] .card-title {
        color: #e9ecef !important;
    }
    
    body[data-layout-mode="dark"] .card-body {
        background-color: #2a3042 !important;
        color: #e9ecef !important;
    }
    
    /* Alert Dark Mode Styles */
    body[data-layout-mode="dark"] .alert {
        background-color: #2a3042 !important;
        border-color: #3a4052 !important;
        color: #e9ecef !important;
    }
    
    body[data-layout-mode="dark"] .alert-danger {
        background-color: #4a1f1f !important;
        border-color: #6c2a2a !important;
        color: #ffb3b3 !important;
    }
    
    body[data-layout-mode="dark"] .alert-success {
        background-color: #1f4a2f !important;
        border-color: #2a6c3f !important;
        color: #b3ffd9 !important;
    }
    
    body[data-layout-mode="dark"] .alert-heading {
        color: #e9ecef !important;
    }
    
    /* Button Dark Mode Styles */
    body[data-layout-mode="dark"] .btn-info {
        background-color: #17a2b8 !important;
        border-color: #17a2b8 !important;
        color: #ffffff !important;
    }
    
    body[data-layout-mode="dark"] .btn-info:hover {
        background-color: #138496 !important;
        border-color: #117a8b !important;
    }
    
    body[data-layout-mode="dark"] .btn-success {
        background-color: #28a745 !important;
        border-color: #28a745 !important;
        color: #ffffff !important;
    }
    
    body[data-layout-mode="dark"] .btn-success:hover {
        background-color: #218838 !important;
        border-color: #1e7e34 !important;
    }
</style>

@include('./util/footer')