000

@extends('admin.layout')

@section('page_title', 'Order Details')
@section('order_select', 'active')

@section('styles')
    <style>
        .order-details-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

.order-details-header {
            margin-bottom: 20px;
            text-align: center;
        }

.order-details-header h1 {
            font-size: 24px;
            margin-bottom: 10px;
            color: #333;
        }

.order-operation {
            margin-bottom: 20px;
        }

.order-operation select,
        .order-operation textarea {
            width: 100%;
            max-width: 300px;
            margin-bottom: 10px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

.order-operation select {
            display: inline-block;
            vertical-align: middle;
            width: auto;
            max-width: 200px;
        }

.order-operation button {
            padding: 8px 20px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.order-operation button:hover {
            background-color: #218838;
        }

.order-detail-section {
            margin-bottom: 30px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 15px;
            background-color: #fff;
        }

.order-detail-section h3 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #333;
        }

.order-detail-section p {
            margin-bottom: 5px;
        }

.order-detail-table {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #ccc;
            margin-top: 15px;
        }

.order-detail-table th,
        .order-detail-table td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }

.order-detail-table th {
            background-color: #f2f2f2;
        }

.total-row {
            font-weight: bold;
        }

.table-responsive {
            overflow-x: auto;
        }

.order-detail-table img {
            max-width: 100px;
            max-height: 100px;
        }
    </style>
@endsection

@section('container')
    <div class="container order-details-container">
        <div class="order-details-header">
            <h1>Order - {{$orders_details[0]->id}}</h1>
        </div>

<div class="order-operation">
            <div class="form-group">
                <label for="order_status"><b>Update Order Status</b></label>
                <select class="form-control" id="order_status" onchange="update_order_status({{$orders_details[0]->id}})">
                    @foreach($orders_status as $status)
                        <option value="{{ $status->id }}" {{ $orders_details[0]->order_status == $status->id ? 'selected' : '' }}>
                            {{ $status->orders_status }}
                        </option>
                    @endforeach
                </select>
            </div>

<div class="form-group">
                <label for="payment_status"><b>Update Payment Status</b></label>
                <select class="form-control" id="payment_status" onchange="update_payment_status({{$orders_details[0]->id}})">
                    @foreach($payment_status as $status)
                        <option value="{{ $status }}" {{ $orders_details[0]->payment_status == $status ? 'selected' : '' }}>
                            {{ $status }}
                        </option>
                    @endforeach
                </select>
            </div>

<div class="form-group">
                <label for="track_details"><b>Track Details</b></label>
                <form method="post">
                    <textarea name="track_details" class="form-control" rows="4" required>{{$orders_details[0]->track_details}}</textarea>
                    <button type="submit" class="btn btn-success mt-3">
                        <i class="fas fa-sync-alt"></i> Update
                    </button>
                    @csrf
                </form>
            </div>
        </div>

<div class="order-detail-section">
            <div class="row">
                <div class="col-md-6">
                    <h3>Details Address</h3>
                    <p>{{$orders_details[0]->name}} ({{$orders_details[0]->mobile}})</p>
                    <p>{{$orders_details[0]->address}}, {{$orders_details[0]->city}}, {{$orders_details[0]->state}}, {{$orders_details[0]->pincode}}</p>
                </div>

<div class="col-md-6">
                    <h3>Order Details</h3>
                    <p><b>Order Status:</b> {{$orders_details[0]->orders_status}}</p>
                    <p><b>Payment Status:</b> {{$orders_details[0]->payment_status}}</p>
                    <p><b>Payment Type:</b> {{$orders_details[0]->payment_type}}</p>
                    @if($orders_details[0]->payment_id)
                        <p><b>Payment ID:</b> {{$orders_details[0]->payment_id}}</p>
                    @endif
                </div>
            </div>

<div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table order-detail-table">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Image</th>
                                    <th>Size</th>
                                    <th>Color</th>
                                    <th>Price</th>
                                    <th>Qty</th>
                                    <th>Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $totalAmt = 0; @endphp
                                @foreach($orders_details as $list)
                                    @php $totalAmt += $list->price * $list->qty; @endphp
                                    <tr>
                                        <td>{{$list->pname}}</td>
                                        <td>
                                        <img src="{{ asset('storage/media/' . $list->attr_image) }}" style="max-width: 100px; max-height: 100px;" alt="Image">

</td>
                                        <td>{{$list->size}}</td>
                                        <td>{{$list->color}}</td>
                                        <td>{{$list->price}}</td>
                                        <td>{{$list->qty}}</td>
                                        <td>{{$list->price * $list->qty}}</td>
                                    </tr>
                                @endforeach
                                <tr class="total-row">
                                    <td colspan="5">&nbsp;</td>
                                    <td><b>Total</b></td>
                                    <td><b>{{$totalAmt}}</b></td>
                                </tr>
                                @if($orders_details[0]->coupon_value > 0)
                                    <tr>
                                        <td colspan="5">&nbsp;</td>
                                        <td><b>Coupon <span class="coupon_apply_txt">({{$orders_details[0]->coupon_code}})</span></b></td>
                                        <td>{{$orders_details[0]->coupon_value}}</td>
                                    </tr>
                                    @php $totalAmt -= $orders_details[0]->coupon_value; @endphp
                                    <tr class="total-row">
                                        <td colspan="5">&nbsp;</td>
                                        <td><b>Final Total</b></td>
                                        <td><b>{{$totalAmt}}</b></td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="confirmationModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmationModalLabel">Confirm Action</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to update the order status?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmUpdate">Yes</button>
                </div>
            </div>
        </div>
    </div>

// Handle confirmation
            $('#confirmUpdate').on('click', function () {
                var order_status = $('#order_status').val();
                if (order_status) {
                    window.location.href = '/admin/update_order_status/' + order_status + '/' + id;
                }
            });

// Handle cancel
            $('.modal-footer .btn-secondary').on('click', function () {
                $('#confirmationModal').modal('hide'); // Close modal without action
            });
        }
    </script>
@endsection