@extends('layouts.admin')

@section('title', 'Order Details')

@section('breadcrumb-item')
    <li class="breadcrumb-item">Orders List</li>
    <li class="breadcrumb-item active">Order Details</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-theme">
            <p class="h5 mb-0 float-left"><i class="fa fa-list pr-1"></i>Order Details</p>
            <a href="{{ route('admin.orders', ['page' => session('page')]) }}"
               class="btn btn-sm btn-light float-right text-success"><i class="fa fa-arrow-left pr-1"></i>Back</a>
        </div>
        <div class="card-body">
            <table class="table table-hover">
                <tbody>
                <tr class="tr-border-top-0">
                    <th>Order ID:</th>
                    <td>{{ $order->id }}</td>
                </tr>
                <tr>
                    <th>Amount:</th>
                    <td>{{ $order->amount ?? '0' }}</td>
                </tr>
                <tr>
                    <th>Balance:</th>
                    <td>
                    @if ($order->payments->isNotEmpty())
                        {{ $order->payments->sortByDesc('created_at')->first()->balance }}
                    @else
                        0
                    @endif
                    </td>
                </tr>
                <tr>
                    <th>Shop:</th>
                    <td>{{ $order->shop->name }}</td>
                </tr>
                <tr>
                    <th>Employee:</th>
                    <td>{{ $order->employee->name }}</td>
                </tr>
                <tr>
                    <th>Placed On:</th>
                    <td>{{ $order->created_at->format('d-M-Y') }}</td>
                </tr>
                <tr>
                    <th>Remarks:</th>
                    <td>{{ $order->remarks }}</td>
                </tr>
                {{-- <tr>
                <th>Status:</th>
                <td>{{ $order->statusString }}</td>
            </tr> --}}
                </tbody>
            </table>
            <hr>
            <form action="{{ route('admin.order.update_status', $order->id) }}" method="post" onsubmit="return validateForm()">
                {{ csrf_field() }}
            
                <div class="form-group col-12">
                    <label for="status">Status</label>
                    <select name="status" id="status"
                            class="form-control{{ $errors->has('status') ? ' is-invalid' : '' }}"
                            onchange="toggleRemarks(this.value)">
                        @if ($order->status == 0)
                            <option value="0" selected>Not Approved</option>
                        @endif
                        <option value="1" {{ $order->status == 1 ? 'selected' : '' }}>Pending</option>
                        <option value="2" {{ $order->status == 2 ? 'selected' : '' }}>Completed</option>
                        <option value="3" {{ $order->status == 3 ? 'selected' : '' }}>Cancelled</option>
                        <option value="6" {{ $order->status == 6 ? 'selected' : '' }}>Online</option>
                    </select>
                    @include('includes.partials.error', ['field' => 'status'])
                </div>
            
                <div class="form-group col-12" id="remarks-section" style="display: {{ $order->status == 3 ? 'block' : 'none' }};">
                    <label for="remarks">Remarks (add your remarks)</label>
                    <textarea name="remarks" id="remarks" class="form-control{{ $errors->has('remarks') ? ' is-invalid' : '' }}">{{ old('remarks', $order->remarks ?? '') }}</textarea>
                    @include('includes.partials.error', ['field' => 'remarks'])
                </div>
            
                <div class="form-group">
                    <div class="text-center">
                        <button class="btn btn-success" type="submit">Update</button>
                    </div>
                </div>
            </form>
            <div class="card shadow col-md-12">
                <div class="card-body">
                    <h5 class="h5">Products:</h5>
                    <table class="table table-responsive table-hover">
                        <thead>
                        <tr>
                            <th>Image</th>
                            <th>Quantity Sales|Bonus</th>
                            <th>Item Description</th>
                            <th>Pack Size</th>
                            <th>Batch Nos.</th>
                            <th>Price</th>
                            <th>Total Value</th>
                            <th>Discount% Regular|Special</th>
                            <th>Discount Amount</th>
                            <th>GST %</th>
                            <th>GST</th>
                            <th>Net Amount</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($order->products()->orderBy('name', 'ASC')->get() as $product)
                            <tr>
                                <td>
                                    <img class="img app-thumbnail" src="{{ $product->image }}"
                                         alt="{{ $product->name }}">
                                </td>
                                <td>{{ $product->pivot->quantity }} | {{ $product->pivot->bonus }}</td>
                                <td>{{ $product->name }}</td>
                                <td>{{ $product->size }}</td>
                                <td>-</td>
                                <td>{{ $product->unit_price }}</td>
                                <td>{{ $product->unit_price * $product->pivot->quantity }}</td>
                                <td>{{ $product->discount_percentage }}%</td>
                                <td>{{ $product->pivot->discount * $product->pivot->quantity }}</td>
                                <td>{{ $product->tax_percentage }}</td>
                                <td>{{ $product->pivot->tax * $product->pivot->quantity }}</td>
                                <td>{{ $product->totalAmount }}</td>
                            </tr>
                        @empty
                            <tr>
                                <th colspan="7" class="text-center">No Products Yet</th>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script>
        function toggleRemarks(value) {
            const remarksSection = document.getElementById('remarks-section');
            if (value == '3') {
                remarksSection.style.display = 'block';
            } else {
                remarksSection.style.display = 'none';
            }
        }
        function validateForm() {
        const status = document.getElementById('status').value;
        const remarks = document.getElementById('remarks').value.trim();

        if (status == 3 && remarks === '') {
            alert('Please enter remarks.');
            document.getElementById('remarks').focus();
            return false; // Prevent form submission
        }

        return true; // Allow form submission
    }
    </script>
    
@endsection