@include('layouts.header')
<style>
	.btn-outline-pink:hover{
		background-color: #d6487e!important;
		color:#fff!important
	}
</style>
		<!-- /Header -->
			
			@include('layouts.sidebar')

			<div class="page-wrapper">
				<div class="content">
					<div class="page-header">
						<div class="add-item d-flex">
							<div class="page-title">
								<h4>Orders</h4>
								<h6>Manage your orders</h6>
							</div>
						</div>
						@if(hasPermission('orders', 'add'))
						<div class="page-btn">
						<a href="{{url('add-new-order')}}" class="btn btn-added"><i data-feather="plus-circle" class="me-2"></i>Add New Order</a>
						</div>
						@endif

					</div>

					@if(session()->has('success'))
                    <div class="alert alert-success">
                        {{ session()->get('success') }}
                    </div>
                @endif
                @if(session()->has('error'))
                <div class="alert alert-danger">
                    {{ session()->get('error') }}
                </div>
            @endif

		

@if(session('download_link'))
    <script>
        window.onload = function() {
            // Auto download PDF after redirect
            let link = "{{ session('download_link') }}";
            let a = document.createElement('a');
            a.href = link;
            a.download = ''; // let browser use the original file name
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        };
    </script>
@endif


					<!-- /product list -->
					<div class="card table-list-card">
						<div class="card-body">
							<div class="table-top">
								<div class="search-set">
									<div class="search-input">
										<a href="" class="btn btn-searchset"><i data-feather="search" class="feather-search"></i></a>
									</div>
								</div>
								 {{--<div class="search-path">
									<a class="btn btn-filter" id="filter_search">
										<i data-feather="filter" class="filter-icon"></i>
										<span><img src="assets/img/icons/closes.svg" alt="img"></span>
									</a>
								</div>
								<div class="form-sort">
									<i data-feather="sliders" class="info-img"></i>
									<select class="select">
										<option>Sort by Date</option>
										<option>Newest</option>
										<option>Oldest</option>
									</select>
								</div> --}}

							</div>
							<!-- /Filter -->
								<div class="card mb-0" id="filter_inputs">
									<div class="card-body pb-0">
										<div class="row">
											<div class="col-lg-12 col-sm-12">
												<div class="row">
													<div class="col-lg-2 col-sm-6 col-12">
													</div>
													<div class="col-lg-1 col-sm-6 col-12">
													</div>
											
													<!-- Supplier Select -->
													<div class="col-lg-3 col-sm-6 col-12">
														<div class="input-blocks">
															<label for="supplier_id">Customer</label>
															<i data-feather="git-merge" class="info-img" style="margin-top: 14px;"></i>
															
															<select class="select" name="customer_id" id="customer_id">
																<option value="">Choose Customer</option>
																@foreach($customers as $row)
																<option value="{{ $row->id }}">{{ $row->customer_name }}</option>
																@endforeach
															</select>
														</div>
													</div>
											
													<!-- Start Date -->
													<div class="col-lg-2 col-sm-6 col-12">
														<div class="input-blocks">
															<label for="start_date">Start Date</label>
															<i data-feather="calendar" class="info-img" style="margin-top: 14px;"></i>
															<input type="date" class="form-control" id="start_date" placeholder="Start Date" name="start_date">
														</div>
													</div>
											
													<!-- End Date -->
													<div class="col-lg-2 col-sm-6 col-12">
														<div class="input-blocks">
															<label for="end_date">End Date</label>
															<i data-feather="calendar" class="info-img" style="margin-top: 14px;"></i>
															<input type="date" class="form-control" id="end_date" placeholder="End Date" name="end_date">
														</div>
													</div>
											
													
												</div>
											</div>
											
										</div>
									</div>
								</div>
								<!-- /Filter -->
							<div class="table-responsive"  id="ordersTable">
								<table class="table  datanew">
									<thead>
										<tr>
											<th class="no-sort">Action</th>
											<th>Order Id</th>
											<th>Customer</th>
                                            <th>Order Date</th>
											<th>Order Total</th>
											<th>Balance </th>
											<th>Order Status</th>
											<th>Order Type</th>
											<th>Payment Status</th>
										</tr>
									</thead>
									<tbody>
										@foreach($orders as $row)
										<tr>
											<td class="action-table-data" style="height:47px;">
											<a href="{{ url('view-order/'.$row->id)}}"  title="View Order"><i data-feather="eye" class="feather-eye"></i></a>
											&nbsp;&nbsp;
										@php
											$canEdit = in_array($row->status, ['Ordered', 'Measurement']);
										@endphp

										<a
											href="{{ $canEdit ? url('edit-new-order/'.$row->id) : 'javascript:void(0)' }}"
											style="margin-right: 10px;"
											title="{{ $canEdit ? 'Edit Order' : 'Editing is only allowed when status is Ordered or Measurement' }}"
										>
											<span style="{{ !$canEdit ? 'pointer-events: none; opacity: 0.5; cursor: not-allowed;' : '' }}">
												<i data-feather="edit" class="feather-edit"></i>
											</span>
										</a>


											


                                               
                                            </td>
											<td>{{ $row->order_code}}</td>
											<td>{{ $row->customer_name}}</td>
											<td>{{ date('d M Y', strtotime($row->order_date))}}</td>
											<td>₹{{ $row->grandtotal}}</td>
											<td>₹{{ $row->remaining_amount ?? $row->grandtotal}}</td>
											<td> 
											@if($row->status == "Ordered")
											<span type="button" class="btn btn-md btn-outline-primary  me-2">
												{{ $row->status }}
											</button>
											@elseif($row->status == "Measurement")
											<button type="button" class="btn btn-md btn-outline-danger my-1 me-2">
												{{ $row->status }}
											</button>
											@elseif($row->status == "Cutting Done")
											<button type="button" class="btn btn-md btn-outline-info my-1 me-2">
												{{ $row->status }}
											</button>
											@elseif($row->status == "Payment Done")
											<button type="button" class="btn btn-md btn-outline-success my-1 me-2">
												{{ $row->status }}
											</button>
											@elseif($row->status == "Packed")
											<button type="button" class="btn btn-md btn-outline-warning my-1 me-2">
												{{ $row->status }}
											</button>
											@elseif($row->status == "Shipped") 
												
											<button type="button" class="btn btn-md btn-outline-pink my-1 me-2" style="background-color: #fff;border-color:#d6487e;	
												color: #d6487e;">
												{{ $row->status }}
											</button>
											@else
											<button type="button" class="btn btn-md btn-outline-dark">
												{{ $row->status }}
											</button>
											@endif
												<!-- <span class="badge {{ $row->status == 'Completed' ? 'badge badge-md bg-success' : 'badge badge-md bg-info' }}">
												{{ $row->status }}
												</span> -->
												
											</td>
											<td>
												@if($row->order_type == "Delivery")
												<span class="badge badge-md bg-success  my-1 me-2">{{ $row->order_type }}</span>
												@else
												<span class="badge badge-md bg-primary my-1 me-2">{{ $row->order_type }}</span>
												@endif
												
											</td>
										<td><span class="badge {{ $row->payment_status == 'Paid' ? 'badge badge-md bg-outline-success' : 'badge badge-md bg-outline-danger' }}">
											{{ $row->payment_status }}
										</span></td>
										</tr>
										@endforeach
										
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<!-- /product list -->
				</div>
			</div>
			</div>
			<!-- /Main Wrapper -->

			<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
			
<script>
	$(document).ready(function() {
		function fetchFilteredOrders() {
			var customer_id = $('#customer_id').val();
			var start_date = $('#start_date').val();
			var end_date = $('#end_date').val();

			$.ajax({
				url: "{{ url('orders') }}",
				method: "GET",
				data: {
					customer_id: customer_id,
					start_date: start_date,
					end_date: end_date
				},
				success: function(response) {
					var tbody = $("#ordersTable tbody");
					tbody.empty();

					if (response.orders.length > 0) {
						
						$.each(response.orders, function(index, order) {
							var editUrl = `edit-new-order/${order.id}`;
							var viewUrl = `view-order/${order.id}`;

							var row = `<tr>
								<td class="action-table-data">
									<a href="${editUrl}" style="margin-right: 10px" title="Edit Order">
										<i data-feather="edit" class="feather-edit"></i>
									</a>
									<a href="${viewUrl}" title="View Order">
										<i data-feather="eye" class="feather-eye"></i>
									</a>
								</td>
								<td>${order.order_code}</td>
								<td>${order.customer_name}</td>
								<td>${new Date(order.order_date).toLocaleDateString()}</td>
								<td>${order.grandtotal}</td>
								<td>
									<span class="badge ${order.status === 'Completed' ? 'badge-bgsuccess' : 'badge-bgdanger'}">
										${order.status}
									</span>
								</td>
								<td>
									<span class="badge ${order.status === 'Paid' ? 'badge-linesuccess' : 'badge-linedanger'}">
										Pending
									</span>
								</td>
							</tr>`;

							tbody.append(row);
						});

						feather.replace(); // Re-initialize icons
					} else {
						tbody.append('<tr><td colspan="7" class="text-center">No records found.</td></tr>');
					}
				}
			});
		}

		$('#customer_id, #start_date, #end_date').on('change', function() {
			//alert(1);
			fetchFilteredOrders();
		});
	});


	</script>

		@include('layouts.footer')
	<script>

	$(document).ready(function() {
	   /* if ($.fn.DataTable.isDataTable('.datanew')) {
	        $('.datanew').DataTable().destroy(); 
	    }*/

	    $('.datanew').DataTable({
	        "pageLength": 25,
	        "lengthMenu": [ [10, 25, 50, 100], [10, 25, 50, 100] ], 
	        "ordering": false, 
	        "retrieve": true 
	    });
	});

</script>

<script>
    function handleInvoiceDownload(productId) {
        const key = `invoice_downloaded_${productId}`;

        // Check if already downloaded
        if (localStorage.getItem(key)) {
            alert("Invoice already downloaded. If you want to download it again, please visit the View Invoice page.");
            return;
        }

        // Proceed to download
        window.location.href = `/download-invoice/${productId}`;

        // Mark as downloaded
        localStorage.setItem(key, true);

        // Update icon to checkmark
        const icon = document.getElementById(`icon-${productId}`);
        if (icon) {
            icon.classList.remove('feather-download');
            icon.classList.add('feather-check-circle');
            icon.classList.add('text-success');
        }

        // Optionally, disable further clicks
        const btn = document.getElementById(`download-btn-${productId}`);
        if (btn) {
            btn.setAttribute('onclick', 'showInvoiceAlert()');
        }
    }

    function showInvoiceAlert() {
        alert("Invoice already downloaded. If you want to download it again, please visit the View Invoice page.");
    }

    // On page load, update icons based on localStorage
    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll('[id^="icon-"]').forEach(icon => {
            const productId = icon.id.split('-')[1];
            const key = `invoice_downloaded_${productId}`;
            if (localStorage.getItem(key)) {
                icon.classList.remove('feather-download');
                icon.classList.add('feather-check-circle');
                icon.classList.add('text-success');

                const btn = document.getElementById(`download-btn-${productId}`);
                if (btn) {
                    btn.setAttribute('onclick', 'showInvoiceAlert()');
                }
            }
        });
    });
</script>