@extends('layouts.main')

@section('content')

<style>
/* Card */
.card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Header */
.card-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Table */
.table {
    border-radius: 10px;
    overflow: hidden;
}
.table thead {
    background: #f1f3f6;
}
.table th {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.table td {
    font-size: 14px;
}
.table tbody tr:hover {
    background: #f9fafc;
}

/* Badge */
.badge {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 20px;
}

/* Form */
.form-select-sm {
    font-size: 12px;
}

/* Modal */
.modal-content {
    border-radius: 12px;
}
 .custom-btn {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
    }

    .custom-btn:hover {
        background-color: #0056b3;
    }
</style>

<div>
    <div class="card">

        <div class="card-header">
            <h5 class="mb-0">🛒 Orders & Payments</h5>
            @can('order_create')
                <button class="custom-btn" data-bs-toggle="modal" data-bs-target="#createOrderModal">
                    + Add Order
                </button>
            @endcan
        </div>

        <div class="card-body">

            @if(session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif

            <div class="table-responsive">
                <table class="table table-hover text-center align-middle">

                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>User</th>
                            <th>Service</th>
                            <th>Amount</th>
                            <th>Method</th>
                            <th>Txn ID</th>
                            <th>Order</th>
                            <th>Payment</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach($orders as $order)
                        <tr>
                            <td>#{{ $order->id }}</td>

                            <td>{{ $order->user->name ?? $order->user->first_name ?? 'N/A' }}</td>

                            <td>{{ $order->service->title ?? 'N/A' }}</td>

                            <td>₹{{ optional($order->payment)->amount ?? '0' }}</td>

                           <td>{{ $order->payment->payment_method ?? '-' }}</td>

                                <td>
                                    <small class="text-muted">
                                        {{ $order->payment->transaction_id ?? '-' }}
                                    </small>
                                </td>

                            <td>
                                <span class="badge 
                                    {{ $order->order_status == 'completed' ? 'bg-success' : 
                                       ($order->order_status == 'pending' ? 'bg-warning text-dark' : 
                                       ($order->order_status == 'processing' ? 'bg-info' : 'bg-danger')) }}">
                                    {{ ucfirst($order->order_status) }}
                                </span>
                            </td>

                            <td>
                                <span class="badge 
                                    {{ $order->payment_status == 'paid' ? 'bg-success' : 
                                       ($order->payment_status == 'pending' ? 'bg-warning text-dark' : 'bg-danger') }}">
                                    {{ ucfirst($order->payment_status) }}
                                </span>
                            </td>

                            <td>
                                <form action="{{ route('superadmin.orders.update', $order->id) }}" method="POST">
                                    @csrf
                                    @method('PUT')

                                    <select name="order_status" class="form-select form-select-sm mb-1">
                                        <option value="pending" {{ $order->order_status=='pending'?'selected':'' }}>Pending</option>
                                        <option value="processing" {{ $order->order_status=='processing'?'selected':'' }}>Processing</option>
                                        <option value="completed" {{ $order->order_status=='completed'?'selected':'' }}>Completed</option>
                                        <option value="cancelled" {{ $order->order_status=='cancelled'?'selected':'' }}>Cancelled</option>
                                    </select>

                                    <select name="payment_status" class="form-select form-select-sm mb-1">
                                        <option value="pending" {{ $order->payment_status=='pending'?'selected':'' }}>Pending</option>
                                        <option value="paid" {{ $order->payment_status=='paid'?'selected':'' }}>Paid</option>
                                        <option value="failed" {{ $order->payment_status=='failed'?'selected':'' }}>Failed</option>
                                    </select>

                                    <button class="btn btn-primary btn-sm w-100">
                                        Update
                                    </button>
                                </form>
                            </td>

                        </tr>
                        @endforeach
                    </tbody>

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

<!-- Modal -->
<div class="modal fade" id="createOrderModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <form action="{{ route('superadmin.orders.store') }}" method="POST">
                @csrf

                <div class="modal-header">
                    <h5>Create Order</h5>
                    <button class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <select name="user_id" class="form-select mb-2" required>
                        <option value="">Select User</option>
                        @foreach($users as $user)
                            <option value="{{ $user->id }}">{{ $user->name ?? $user->first_name }}</option>
                        @endforeach
                    </select>

                    <select name="service_id" class="form-select mb-2" required>
                        <option value="">Select Service</option>
                        @foreach($services as $service)
                            <option value="{{ $service->id }}">{{ $service->title }}</option>
                        @endforeach
                    </select>

                    <input type="number" name="amount" class="form-control mb-2" placeholder="Amount" required>

                    <select name="payment_method" class="form-select" required>
                        <option value="">Payment Method</option>
                        <option value="UPI">UPI</option>
                        <option value="Card">Card</option>
                    </select>

                </div>

                <div class="modal-footer">
                    <button class="custom-btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button class="custom-btn btn-primary">Save</button>
                </div>

            </form>

        </div>
    </div>
</div>

@endsection