@extends('layouts.app')
@section('content')
{{-- <style>
    .wg-product .name {
        flex: 0 0 350px; /* fixed width */
        min-width: 350px;
    }
    .wg-table .table-title, .wg-product {
        display: grid;
        grid-template-columns: 30px 500px 120px 80px 120px 150px 150px 150px 150px 150px 150px 100px 100px;
        align-items: center;
    }
    .orderdetails-table {
        max-height: 420px;    /* vertical max height */
        overflow-y: scroll;     /* vertical scrollbar */
        overflow-x: auto;     /* horizontal scrollbar when needed */
        max-width: 100%;      /* allow container to shrink on small screens */
    }

        /* Table width: 100% by default */
    .orderdetails-table table {
        width: 100%;
        min-width: 600px;  /* force horizontal scroll on smaller widths */
    }
</style> --}}
<style>
    /* Allow Product column to wrap at 300px */
    .wg-table .table-title, .wg-product {
        display: grid;
        grid-template-columns: 50px 100px 600px 120px 80px 120px 120px 150px 150px 150px 150px 150px 100px 100px;
        align-items: center;
    }
    /* Remove fixed width for .wg-product .name */
    .wg-product .name {
        max-width: 600px;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    /* Prevent wrapping for other columns, keep ellipsis */
    .wg-table .table-title > li:not(:nth-child(2)),
    .wg-product > div:not(.name):not(.branch):not(.date),
    .wg-product > li:not(.name):not(.branch):not(.date) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .orderdetails-table {
        max-height: 420px;    /* vertical max height */
        overflow-y: scroll;     /* vertical scrollbar */
        overflow-x: auto;     /* horizontal scrollbar when needed */
        max-width: 100%;      /* allow container to shrink on small screens */
    }
    .orderdetails-table table {
        width: 100%;
        min-width: 600px;  /* force horizontal scroll on smaller widths */
    }
    .wg-product .branch {
        max-width: 150px;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }
</style>
<div class="flex items-center flex-wrap justify-between gap20 mb-30">
    <h3>Order List</h3>
    <ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
        <li>
            <a href="javascript:void(0)"><div class="text-tiny">Dashboard</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <a href="#"><div class="text-tiny">Order</div></a>
        </li>
        <li>
            <i class="icon-chevron-right"></i>
        </li>
        <li>
            <div class="text-tiny">Order List</div>
        </li>
    </ul>
</div>
<!-- order-list -->
<div class="wg-box">
    <div class="flex items-center justify-between gap10 flex-wrap">
        <div class="wg-filter flex-grow">
            <div class="show">
                <div class="text-tiny">Showing</div>
                <div class="row-filter">
                    <select>
                        <option {{$filters['rows'] == 10 ? 'selected' : ''}}>10</option>
                        <option {{$filters['rows'] == 50 ? 'selected' : ''}}>50</option>
                        <option {{$filters['rows'] == 100 ? 'selected' : ''}}>100</option>
                        <option {{$filters['rows'] == "All" ? 'selected' : ''}}>All</option>
                    </select>
                </div>
                <div class="text-tiny">entries</div>
            </div>
            <form class="form-search">
                <input type="hidden" name="rows">
                <fieldset class="name">
                    <input type="text" placeholder="Search here..." class="" name="search" tabindex="2" value="{{$filters['search']??""}}">
                </fieldset>
                <div class="button-submit">
                    <button type="submit"><i class="icon-search"></i></button>
                </div>
            </form>
        </div>

        <a class="tf-button style-1 w208" href="#filter" data-bs-toggle="modal"><i class="icon-search"></i>Advanced Filter</a>

        <form action="{{route('shop-bo.order.batch.update')}}" id="formBatchProcess" method="POST">
            @csrf
            <input type="hidden" id="order_id" name="order_id">
            <div class="button-submit">
                <button class="tf-button style-1 w208" id="button_batch_process" onClick="validationBatchProcess()" type="submit"><i class="icon-check"></i> Batch Process</button>
            </div>
        </form>

        <form action="{{ route('shop-bo.order.list.download') }}" method="GET" id="exportForm">
            @csrf
            <!-- Hidden for selected checkboxes -->
            <input type="hidden" name="selected_ids" id="selected_ids">
            <!-- Hidden for filters -->
            @foreach($filters as $key => $value)
                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
            @endforeach

            <button type="submit" class="tf-button style-1 w208">
                <i class="icon-file-text"></i> Export Selected / All
            </button>
        </form>
        {{-- <a class="tf-button style-1 w208" href="{{route('shop-bo.order.list.download').'?'.http_build_query($filters)}}"><i class="icon-file-text"></i>Export all order</a> --}}
    </div>

    <div class="wg-table table-all-category">
        <ul class="table-title flex gap20 mb-14">

            <li style="">
                <input type="checkbox" id="select-all">
            </li>

            <li>
                <div class="body-title">Action</div>
            </li>

            <li>
                <div class="body-title">Product</div>
            </li>

            <li>
                <div class="body-title">Order ID</div>
            </li>
            <li>
                <div class="body-title">Amount</div>
            </li>
            <li>
                <div class="body-title">Quantity</div>
            </li>
            <li>
                <div class="body-title">Total</div>
            </li>
            <li>
                <div class="body-title">Shipping Method</div>
            </li>
            <li>
                <div class="body-title">Payment Method</div>
            </li>
            <li>
                <div class="body-title">Transaction Status</div>
            </li>
            <li>
                <div class="body-title">Branch</div>
            </li>
            <li>
                <div class="body-title">Order Status</div>
            </li>
            <li>
                <div class="body-title">Date</div>
            </li>
			<li>
                <div class="body-title">Time</div>
            </li>
        </ul>
        <ul class="flex flex-column">
            @foreach($orders as $order)
                @php
                    $names = $productNamesByOrder[$order->order_id] ?? [];
                    $count = count($names);

                @endphp
            <li class="wg-product item-row gap20">

                <div class="body-text text-main-dark mt-4">
                    <input type="checkbox" class="select-item" value="{{$order->order_id}}">
                </div>
                <div class="list-icon-function">
                    @can('do',['view','order'])
                    <div class="item eye">
                        <a href="{{route('shop-bo.order.detail',['order_id' => Crypt::encrypt($order->order_id)])}}"><i class="icon-eye"></i></a>
                    </div>
                    @endcan
                    @can('delete','order')
                    <div class="item edit">
                        <a href="{{route('shop-bo.order.destroy',['id'=>$order->order_id])}}" class="confirm-link" data-confirm-message="Are you sure you want to move this order to archived?" data-confirm-text="Yes"><i class="icon-trash-2"></i></a>
                    </div>
                    @endcan
                </div>

                <div class="name">
                    <div class="image">
                        <img src="{{url('storage/admin/shop-bo/'.$order->product_image)}}" alt="{{$order->name}}">
                    </div>
                    <div class="title line-clamp-2 mb-0">
                        <span class="body-text fw-6">
                            <strong class="text-uppercase">{{ optional($name[$order->order_id] ?? null)->firstname }} {{ optional($name[$order->order_id] ?? null)->surname }}<br></strong>
                            @if($count > 2)
                                {{ $names[0] }}, {{ $names[1] }}, (and {{ $count - 2 }} <a href="javascript:void(0)" onclick="orderDetailsShow('{{Crypt::encrypt($order->order_id)}}')"><span class="text-primary">more</span></a>)
                            @elseif($count == 2)
                                {{ $names[0] }}, {{ $names[1] }}
                            @elseif($count == 1)
                                {{ $names[0] }}
                            @else
                                No Products
                            @endif
                        </span>
                        <br>
                    </div>
                </div>

                <div class="body-text text-main-dark mt-4">{{$order->reference}}</div>
                <div class="body-text text-main-dark mt-4">₱{{number_format($order->amount,2)}}</div>
                <div class="body-text text-main-dark mt-4">{{$order->product_quantity}}</div>
                <div class="body-text text-main-dark mt-4">₱{{number_format($order->amount*$order->product_quantity,2)}}</div>
                <div class="body-text text-main-dark mt-4">{{$order->shipping_method}}</div>
                <div class="body-text text-main-dark mt-4">{{$order->payment_method}}</div>
                <div>
                    @if($order->payment_status == "UNPAID")
                    <div class="block-tracking text-danger bg-1 fw-7">{{$order->payment_status}}</div>
                    @else
                    <div class="block-available bg-1 fw-7">{{$order->payment_status}}</div>
                    @endif
                </div>
                <div class="body-text text-main-dark mt-4 branch">{{$order->branch}}</div>
                <div>
                    @if ($order->status == "PENDING")
                        <div class="block-available bg-1 fw-7 text-warning">{{$order->status}}</div>
                    @elseif ($order->status == "PROCESSING")
                        <div class="block-available bg-1 fw-7 text-info">{{$order->status}}</div>
                    @elseif ($order->status == "OUT FOR DELIVERY")
                        <div class="block-available bg-1 fw-7 text-primary">{{$order->status}}</div>
                    @elseif ($order->status == "DELIVERED")
                        <div class="block-available bg-1 fw-7 text-success">{{$order->status}}</div>
                    @elseif ($order->status == "FAILED")
                        <div class="block-available bg-1 fw-7 text-danger">{{$order->status}}</div>
                    @else
                        <div class="block-available bg-1 fw-7 text-primary">{{$order->status}}</div>
                    @endif
                </div>
                <div class="body-text text-main-dark mt-4 date">{{ \Carbon\Carbon::parse($order->created_at)->format('Y-m-d') }}</div>
				<div class="body-text text-main-dark mt-4 date">{{ \Carbon\Carbon::parse($order->created_at)->format('h:i:s A') }}</div>

            </li>
            @endforeach
        </ul>
    </div>
    @if($orders->count()>0)
        @if($filters['rows'] != "All")
        <div class="divider"></div>
        <div class="flex items-center justify-between flex-wrap gap10">
            <div class="text-tiny">
                Showing {{ $orders->count() }} entries
            </div>
            <ul class="wg-pagination">
                <!-- Previous Page Link -->
                @if ($orders->onFirstPage())
                    <li class="disabled">
                        <a href="#"><i class="icon-chevron-left"></i></a>
                    </li>
                @else
                    <li>
                        <a href="{{ $orders->previousPageUrl() }}"><i class="icon-chevron-left"></i></a>
                    </li>
                @endif

                <!-- Page Number Links -->
                @foreach ($orders->getUrlRange(1, $orders->lastPage()) as $page => $url)
                    <li class="{{ $page == $orders->currentPage() ? 'active' : '' }}">
                        <a href="{{ $url }}">{{ $page }}</a>
                    </li>
                @endforeach

                <!-- Next Page Link -->
                @if ($orders->hasMorePages())
                    <li>
                        <a href="{{ $orders->nextPageUrl() }}"><i class="icon-chevron-right"></i></a>
                    </li>
                @else
                    <li class="disabled">
                        <a href="#"><i class="icon-chevron-right"></i></a>
                    </li>
                @endif
            </ul>
        </div>
        @endif
    @endif

</div>
<!-- /order-list -->
<form method="post">
    @csrf
    @honeypot
    <div class="modal fade" id="filter">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header d-flex justify-content-betweeen">
                    <h4>Advanced Filter</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
                </div>
                <div class="modal-body">
                    <div class="row " style="padding:10px">
                        <div class="col-md-6 col-sm-12 mb-30">
                            <fieldset>
                                <label class="body-title">From<span class="tf-color-1">*</span></label>
                                <input type="date" class="form-control" name="from" value="{{$filters['from']??""}}">
                            </fieldset>
                        </div>
                        <div class="col-md-6 col-sm-12 mb-30">
                            <fieldset>
                                <label class="body-title">To<span class="tf-color-1">*</span></label>
                                <input type="date" class="form-control" name="to" value="{{$filters['to']??""}}">
                            </fieldset>
                        </div>
						<div class="col-md-12 col-sm-12 mb-30">
                            <fieldset>
                                <label class="body-title">Time<span class="tf-color-1">*</span></label>
                                <input type="time" class="form-control" name="time" value="{{$filters['time']??""}}">
                            </fieldset>
                        </div>
                        <div class="col-md-12 col-sm-12 mb-30">
                            <fieldset>
                                <label class="body-title">Customer Name</label>
                                <input type="text" placeholder="All" class="form-control" name="customer_name" value="{{$filters['customer_name']??""}}">
                            </fieldset>
                        </div>
                        <div class="col-md-12 col-12 mb-30">
                            <fieldset>
                                <div class="body-title">Transaction Status</div>
                                <select class="flex-grow" type="text" name="transaction_status">
                                    <option value="">All</option>
                                    <option value="PAID" {{($filters['transaction_status']??'')=="PAID"?'selected':''}}>PAID</option>
                                    <option value="UNPAID" {{($filters['transaction_status']??'')=="UNPAID"?'selected':''}}>UNPAID</option>
                                </select>
                            </fieldset>
                        </div>
                        <div class="col-md-12 col-12">
                            <fieldset>
                                <div class="body-title">Order Status</div>
                                <select class="flex-grow" type="text" name="order_status">
                                    <option value="">All</option>
                                    <option value="PENDING" {{($filters['order_status']??'')=="PENDING"?'selected':''}}>PENDING</option>
                                    <option value="PROCESSING" {{($filters['order_status']??'')=="PROCESSING"?'selected':''}}>PROCESSING</option>
                                    <option value="OUT FOR DELIVERY" {{($filters['order_status']??'')=="OUT FOR DELIVERY"?'selected':''}}>OUT FOR DELIVERY</option>
                                    <option value="DELIVERED" {{($filters['order_status']??'')=="DELIVERED"?'selected':''}}>DELIVERED</option>
                                    <option value="FAILED" {{($filters['order_status']??'')=="FAILED"?'selected':''}}>FAILED</option>
                                    <option value="READY FOR PICKUP" {{($filters['order_status']??'')=="READY FOR PICKUP"?'selected':''}}>READY FOR PICKUP</option>
                                </select>
                            </fieldset>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="tf-button w100" type="submit">Search Now</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</form>
<div class="modal fade" id="order-details">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header d-flex justify-content-betweeen">
                <h4>Order Details #<span id="orderid"></span></h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
            </div>
            <div class="modal-body">
                <div class="row" style="padding:10px">
                    <div class="col-12">
                         <div class="table-responsive orderdetails-table" style="max-height:420px; overflow-y:auto;">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th style="width:50%" class="body-title">Product</th>
                                        <th style="width:25%" class="body-title">Price</th>
                                        <th style="width:25%" class="body-title">Quantity</th>
                                        <th style="width:25%" class="body-title">Total</th>
                                    </tr>
                                </thead>
                                <tbody id="orderDetails">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page_script')
@parent
<script>

    $(".order-menu").addClass("active");
    $(".order-list").addClass("active");


    function orderDetailsShow(orderID)
    {
        let url = `{{ url('admin/shop-bo/order/order-details') }}/${orderID}`;

        $.ajax({
            url       : url,
            success   : function(response){
                console.log(response)

                $('#orderDetails').empty();
                $('#orderid').text(response.data.reference)
                response.data.items.forEach(function(item) {
                    let product = item.product_details;
                    let storagePath = "{{ url('storage/admin/shop-bo') }}";
                    let row = `
                        <tr class="align-middle">
                            <td class="align-middle p-2">
                                <div class="d-flex align-items-center">
                                    <img src="${storagePath}/${product.image}" alt="${product.name}" class="img-thumbnail mr-2" style="width:80px; height:80px; object-fit:cover;">
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    <strong>${product.name}</strong>
                                </div>
                            </td>
                            <td class="align-middle p-2"><strong>₱${parseFloat(item.product_price).toFixed(2)}</strong></td>
                            <td class="align-middle p-2"><strong>${item.product_quantity}</strong></td>
                            <td class="align-middle p-2"><strong>₱${parseFloat(item.total_price).toFixed(2)}</strong></td>
                        </tr>
                    `;

                    $('#orderDetails').append(row);
                });
            },
            error: function() {
                alert('Failed to load order details.');
            }
        });

        var myModal = new bootstrap.Modal(document.getElementById('order-details'));
        myModal.show();

    }

    // Master checkbox logic
    $('#select-all').on('change', function () {
        $('.select-item').prop('checked', this.checked);
        updateOrderIdInput(); // update value every toggle
    });

    // Individual checkbox logic
    $('.select-item').on('change', function () {
        let total = $('.select-item').length;
        let checked = $('.select-item:checked').length;

        $('#select-all').prop('checked', total === checked);
        updateOrderIdInput(); // update value every individual change
    });

    // Function to update #order_id input with selected values
    function updateOrderIdInput() {
        let selectedValues = $('.select-item:checked').map(function () {
            return $(this).val();
        }).get().join(',');

        $('#order_id').val(selectedValues);
    }

    $('#exportForm').on('submit', function () {
        let selectedValues = $('.select-item:checked').map(function () {
            return $(this).val();
        }).get().join(',');

        $('#selected_ids').val(selectedValues); // store selected checkboxes
    });

    $('#button_batch_process').on('click', function (e) {
        e.preventDefault();

        var selected = $('.select-item:checked').length;
        if (selected === 0) {
            e.preventDefault();
            alert('Please select at least one order to batch process.');
        }else{
            Swal.fire({
                text: "Are you sure you want to batch process the selected orders?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes",
                cancelButtonText: "No",
                customClass: {
                    confirmButton: "btn btn-primary",
                    cancelButton: "btn btn-secondary"
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#formBatchProcess').submit();
                }
            });
        }
    });

</script>
<script>
    $('input[name="rows"]').val("{{$filters['rows']??"10"}}");
    $('.row-filter select').change(function () {
        var selectedValue = $(this).val();
        $('input[name="rows"]').val(selectedValue);
    });
</script>
@endsection
<!-- App js -->