@extends('admin.layout.main')
@section('main-container')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        .single-banner {
            background: url('../../frontend/images/new/tranationhistery.png');
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: cover !important;
            padding: 100px 0px !important;
            position: relative !important;
            z-index: 1;
        }

        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            /* Semi-transparent black */
            z-index: 9999;
            /* Ensure it's above other content */
        }

        #loader {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10000;
            /* Ensure it's above the overlay */
        }
    </style>
    <style>
        .single-banner {
            background: url('../../frontend/images/new/tranationhistery.png');
            background-repeat: no-repeat !important;
            background-position: center !important;
            background-size: cover !important;
            padding: 100px 0px !important;
            position: relative !important;
            z-index: 1;
        }
    </style>
    <section class="single-banner dashboard-banner">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="single-content">
                        <h2>{{ $PageHeading }}</h2>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ $PageHeading }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div id="overlay" style="display: none"></div>
    <div id="loader" style="display: none">
        <!-- Add your spinner HTML here -->
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <section class="inner-section compare-part">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="table-scroll">
                        <table class="table-list">
                            <thead class="table-head">
                                <tr>
                                    <th scope="col">Sr.</th>
                                    <th scope="col">User Info</th>
                                    <!-- <th scope="col">Product Info</th> -->
                                    <th scope="col">Shipment Charges</th>
                                    <th scope="col">Order Status</th>
                                    <!-- <th scope="col"> Status</th> -->
                                    <th scope="col"> Action</th>
                                    
                                </tr>
                            </thead>
                            <tbody class="table-body">
                                @foreach ($orders as $index => $order)
                                    <tr>
                                        <td class="table-number">
                                            <h6>{{ $index + 1 }}</h6>
                                        </td>

                                        <td class="table-price" style="text-align: start">
                                            <h5>
                                            <small>    Name: {{ $order->first_name }} {{ $order->last_name }}</small> <br>
                                             <small>   Email: <span
                                                        style="text-transform:lowercase;">{{ $order->email }}</span></small><br>
                                               <small> Phone : {{ $order->phone }}</small> <br>


                                            </h5>
                                        </td>
                                        <td>
                                            <h5> {{ number_format($order->shipping, 2) }}</h5>
                                        </td>
                                        <td class="table-price" style="text-align: start">
                                            <h5>
                                                @if ($order->order_status == 'pending')
                                                    <div class="btn btn-warning">{{$order->order_status}}</div>
                                                @elseif ($order->order_status == 'paid')
                                                <div class="btn btn-success">{{$order->order_status}}</div>
                                                @elseif ($order->order_status == 'canceled')
                                                <div class="btn btn-danger">{{$order->order_status}}</div>
                                                @elseif ($order->order_status == 'confirmed')
                                                <div class="btn btn-info">{{$order->order_status}}</div>
                                                @endif

                                            </h5>

                                        </td>
                                        <td class="table-action">
                                            <a href="{{ route('OrderDetail', ['id' => $order->id]) }}" class="btn btn-primary">
                                                <i class="fas fa-eye"></i> 
                                            </a>
                                        </td>
                                        
                                    </tr>
                                    <input type="hidden" id="hiddenId" value="{{ $order->id }}">
                                @endforeach


                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </section>
@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // $('.status-btn').click(function() {
        //     var id = $(this).data('id');
        //     $('#overlay').show();
        //     $('#loader').show();
        //     $.ajax({
        //         url: '{{ route('admin.StatusUpdate') }}',
        //         type: 'POST',
        //         headers: {
        //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //         },
        //         data: {
        //             id: id
        //         },
        //         success: function(response) {
        //             console.log(response);
        //             $('#overlay').hide();
        //             $('#loader').hide();
        //             // Update the status text based on response
        //             if (response.new_status == 1) {
        //                 $('.status-btn[data-id="' + id + '"]').removeClass('btn-danger')
        //                     .addClass('btn-primary').text('Active');
        //             } else {
        //                 $('.status-btn[data-id="' + id + '"]').removeClass('btn-primary')
        //                     .addClass('btn-danger').text('Not Active');
        //             }
        //         },
        //         error: function(xhr, status, error) {
        //             console.error(xhr.responseText);
        //         }
        //     });
        // });
        // $('.status-dropdown').change(function() {
        //     var status = $(this).val();
        //     var id = $('#hiddenId').val();
        //     // alert(status);
        //     $('#overlay').show();
        //     $('#loader').show();
        //     $.ajax({
        //         url: '{{ route('admin.orderStatusUpdate') }}',
        //         method: 'POST',
        //         data: {
        //             _token: '{{ csrf_token() }}',
        //             id: id,
        //             status: status
        //         },
        //         success: function(response) {
        //             $('#overlay').hide();
        //             $('#loader').hide();
        //             if (response.status) {
        //                 // Display SweetAlert success notification
        //                 Swal.fire({
        //                     title: 'Success!',
        //                     text: 'Order status updated to ' + response.new_status,
        //                     icon: 'success',
        //                     confirmButtonText: 'OK'
        //                 });
        //             } else {
        //                 // Show error flash message using SweetAlert
        //                 Swal.fire({
        //                     title: 'Error!',
        //                     text: response.error,
        //                     icon: 'error',
        //                     confirmButtonText: 'OK'
        //                 });
        //             }
        //         },
        //         error: function(xhr, status, error) {
        //             $('#overlay').hide();
        //             $('#loader').hide();
        //             // Handle error with SweetAlert
        //             Swal.fire({
        //                 title: 'Error!',
        //                 text: 'An error occurred while updating the order status.',
        //                 icon: 'error',
        //                 confirmButtonText: 'OK'
        //             });
        //             console.error(error);
        //         }
        //     });

        // });
    });
</script>