@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>
        <div class="container">
            <div class="card shadow mb-4" style="padding: 20px;z-index: 2;margin-top: -40px;">
                <div class="card-header py-3">
                    <div class="text-left">
                        <h3 class="m-0 font-weight-bold text-primary">{{ $PageHeading }}</h3>
                    </div>
                    <div class="text-right">
                        <div id="status-btn"
                            class="btn
                        @if ($order->order_status == 'pending') btn-warning
                        @elseif ($order->order_status == 'paid') btn-success
                        @elseif ($order->order_status == 'canceled') btn-danger
                        @elseif ($order->order_status == 'confirmed') btn-info @endif">
                            {{ $order->order_status }}
                        </div>
                    </div>
                    <input type="hidden" value="{{ $order->id }}" id="hiddenId">
                </div>
                <div class="card-body">
                    <div class="container mt-5">


                        <div class="form-group row">
                            <label for="title" class="col-sm-2 col-form-label">Customer Name: </label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="" name="" placeholder=""
                                    value="{{ $order->first_name . ' ' . $order->last_name }}" readonly>

                            </div>
                        </div>



                        <div class="form-group row">
                            <label for="address" class="col-sm-2 col-form-label">Email: </label>
                            <div class="col-sm-10">
                                <input value="{{ $order->email }}" type="eamil" class="form-control" id=""
                                    name="" placeholder="" readonly>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="address" class="col-sm-2 col-form-label">Phone: </label>
                            <div class="col-sm-10">
                                <input readonly value="{{ $order->phone }}" type="text" class="form-control"
                                    id="" name="" placeholder="">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="city" class="col-sm-2 col-form-label">City:</label>
                            <div class="col-sm-10">
                                <input readonly value="{{ $order->city ? json_decode($order->city->name)->en : 'N/A' }}"
                                    type="text" class="form-control" id="city" name="city" placeholder="">
                            </div>
                        </div>


                        {{-- {{ json_decode($order->city_name)->en }}  --}}
                        <div class="form-group row d-none" data-id="{{ $order->order_id }}">
                            <label for="meta_title" class="col-sm-2 col-form-label">Status</label>
                            <div class="col-sm-10 table-status">
                                <td class="">
                                    <select class="form-control status-btn">
                                        <option value="1" {{ $order->status == 1 ? 'selected' : '' }}>Active</option>
                                        <option value="0" {{ $order->status == 0 ? 'selected' : '' }}>Not Active
                                        </option>
                                    </select>
                                </td>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="meta_title" class="col-sm-2 col-form-label">Order Status</label>
                            <div class="col-sm-10">
                                <select name="order_status" class="status-dropdown form-control" id="status-dropdown">
                                    <option value="" disabled>Select Order status</option>
                                    <option value="pending" {{ $order->order_status == 'pending' ? 'selected' : '' }}>
                                        Pending</option>
                                    <option value="paid" {{ $order->order_status == 'paid' ? 'selected' : '' }}>Paid
                                    </option>
                                    <option value="canceled" {{ $order->order_status == 'canceled' ? 'selected' : '' }}>
                                        Canceled</option>
                                    <option value="confirmed" {{ $order->order_status == 'confirmed' ? 'selected' : '' }}>
                                        Confirmed</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="address" class="col-sm-2 col-form-label">Shipement Charges: </label>
                            <div class="col-sm-10">
                                <input readonly value="{{ number_format($order->shipping, 2) }} " type="text"
                                    class="form-control" id="" name="" placeholder="">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="feature_image_title" class="col-sm-2 col-form-label">Address: </label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="" name="" placeholder="" rows="6" readonly>{{ $order->address }}
                            </textarea>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end">
                            <a href="{{ route('admin.BusinessOrderListing') }}" class="btn btn-primary">
                                <i class="fas fa-arrow-left"></i> Back
                            </a>
                        </div>




                        {{-- <div class="form-group row">
                            <div class="col-sm-10">                                
                                <a href="" class="btn btn-primary text-right">Back</a>
                            </div>
                        </div> --}}


                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="inner-section compare-part">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="table-scroll">
                        <table class="table table-list">
                            <thead class="table-head">
                                <tr>
                                    <th scope="col">Sr.</th>
                                    <th scope="col">Service Name</th>
                                    <th scope="col">Service Price</th>
                                    <th scope="col">Quantity</th>
                                    <th scope="col">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $grandTotal = 0;
                                @endphp
                                @foreach ($order->orderDetails as $index => $detail)
                                    @php
                                        $totalPrice = $detail->qty * $detail->price;
                                        $grandTotal += $totalPrice;
                                    @endphp
                                    <tr>
                                        <td class="text-center">{{ $index + 1 }}</td>
                                        <td class="text-center">
                                            {{ $detail->product ? $detail->product->title : 'Product Name Not Found' }}
                                        </td>
                                        <td class="text-center">{{ number_format($detail->price,2) }}</td>
                                        <td class="text-center">{{ $detail->qty }}</td>
                                        <td class="text-center">{{ number_format($detail->total_price,2) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="4" class="text-center font-weight-bold">Grand Total</td>
                                    <td class="font-weight-bold text-center">{{ number_format($grandTotal,2) }}</td>
                                </tr>
                            </tfoot>
                        </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-dropdown').change(function() {
            var status = $(this).val();
            var id = $('#hiddenId').val();

            $('#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) {
                        // Update status button
                        var statusBtn = $('#status-btn');
                        statusBtn.text(response.new_status.charAt(0).toUpperCase() +
                            response.new_status.slice(1));

                        // Remove all status classes
                        statusBtn.removeClass(
                        'btn-warning btn-success btn-danger btn-info');

                        // Add the new status class
                        switch (response.new_status) {
                            case 'pending':
                                statusBtn.addClass('btn-warning');
                                break;
                            case 'paid':
                                statusBtn.addClass('btn-success');
                                break;
                            case 'canceled':
                                statusBtn.addClass('btn-danger');
                                break;
                            case 'confirmed':
                                statusBtn.addClass('btn-info');
                                break;
                        }

                        // 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);
                }
            });
        });

        $('.status-btn').change(function() {
            var status = $(this).val();
            var id = $(this).closest('.form-group').data('id');
            $('#overlay').show();
            $('#loader').show();
            $.ajax({
                url: '{{ route('admin.StatusUpdate') }}',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    status: status,
                    id: id
                },
                success: function(response) {
                    console.log(response);
                    $('#overlay').hide();
                    $('#loader').hide();
                    // Update the status text based on response
                    if (response.success) {
                        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');
                        }
                        // Show success message with SweetAlert
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message
                        });
                    } else {
                        // Show error message with SweetAlert
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: response.message
                        });
                    }
                },
                error: function(xhr, status, error) {
                    $('#overlay').hide();
                    $('#loader').hide();
                    // Show error message with SweetAlert
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: 'An error occurred while processing your request.'
                    });
                }
            });
        });


    });
</script>