@extends('layouts.master')
@section('title') Items Order @endsection

@section('css')
<!--Datatable CSS-->
<link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
<!--Datatable Responsive CSS -->
<link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')

<!-- Breadcrumb Trail -->
@component('components.breadcrumb')
@slot('li_1')
Items Order
@endslot
@slot('title')
List
@endslot
@endcomponent

<!-- Session Messages -->
@include('partials.session')

<!-- Datatable Start -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h1 class="card-title mb-0" style="width:50%;float:left">Item List</h1>
                <!-- Add Button -->
                {{-- @can('Add items')
                <a href="{{url('/items/add')}}" class="btn btn-primary btn-sm" style="float:right;">Add Item</a>
                @endcan --}}
            </div>
            <div class="card-body table-responsive">
                <table id="example" class="table table-bordered dt-responsive nowrap table-striped align-middle" style="width:100%">
                    <thead>
                        <tr>
                            <th class="text-center">ID</th>
                            <th class="text-center">Item(s)</th>
                            {{-- <th class="text-center">Quantity</th> --}}
                            <th class="text-center">Status</th>
                            <th class="text-center">Placed By</th>
                            <th class="text-center">Price</th>
                            <th class="text-center">Created At</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($orders as $order)
                        <tr>
                            <td>{{$order->id}}</td>
                            <td>
                                @php
                                    $quantity = 0;
                                    $isPhysical = false;
                                @endphp
                                @foreach($order->order_items as $order_item)
                                    {{-- @php
                                        $quantity = $order_item->quantity;
                                    @endphp --}}
                                    @if($order_item->item->type==\App\Models\Item::PHYSICAL)
                                        @php
                                            $isPhysical = true;
                                        @endphp
                                        <h6>
                                            {{$order_item->item->title}} x {{$order_item->quantity}}
                                        </h6>
                                    @else
                                    <h6>
                                    {{$order_item->item->digital_item->name}} ({{$order_item->quantity}}) x {{$order_item->recieved_quantity}}
                                    </h6>
                                    @endif
                                @endforeach
                            </td>
                            {{-- <td>
                                {{$quantity}}
                            </td> --}}
                            <td>
                                @if($order->status==\App\Models\ItemOrder::PENDING)
                                <span class="badge rounded-pill bg-warning text-dark">pending</span>
                                @elseif($order->status==\App\Models\ItemOrder::PROCESSING)
                                <span class="badge rounded-pill bg-info text-dark">processing</span>
                                @elseif($order->status==\App\Models\ItemOrder::COMPLETED)
                                <span class="badge rounded-pill bg-success">completed</span>
                                @else
                                <span class="badge rounded-pill bg-danger">cancelled</span>
                                @endif
                            </td>
                            <td>
                                {{-- @dd($order->user) --}}
                                {{$order->user->first_name .' '.$order->user->last_name}}
                            </td>
                            <td>
                                @foreach($order->order_items as $order_item)
                                    @if(count($order_item->prices)>0)
                                        @foreach($order_item->prices as $price)
                                        @php
                                            $bought_price = $order_item->recieved_quantity ?? $order_item->quantity;
                                        @endphp
                                        <span class="badge bg-primary">{{$price->digital_asset->name}} x {{$price->digital_item_quantity*$bought_price}}</span>
                                        @endforeach
                                    @else
                                        @if(count($order_item->item->price)>0)
                                            @foreach($order_item->item->price as $price)
                                            @php
                                                $bought_price = $order_item->recieved_quantity ?? $order_item->quantity;
                                            @endphp
                                            <span class="badge bg-primary">{{$price->digital_asset->name}} x {{$price->digital_item_quantity*$bought_price}}</span>
                                            @endforeach
                                        @endif
                                    @endif
                                @endforeach
                            </td>
                            <td>{{ $order->created_at }}</td>
                            <td>
                                <div class="dropdown d-inline-block">
                                    <button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="ri-more-fill align-middle"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <a type="button" class="dropdown-item remove-item-btn" data-bs-toggle="modal" data-bs-target="#itemModal{{$order->id}}"><i class="ri-eye-line align-bottom me-2 text-muted"></i> View Details</a>
                                        </li>
                                        @if(Auth::user()->hasRole('Super Admin'))
                                        <li>
                                            <a type="button" class="dropdown-item edit-item-btn" data-bs-toggle="modal" data-bs-target="#itemEditModal{{$order->id}}"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i>Edit Status</a>
                                        </li>
                                        @endif
                                    </ul>
                                </div>
                            </td>
                        </tr>
                         <!-- View Modal -->
                         <div class="modal fade" id="itemModal{{$order->id}}" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="itemModalLabel">View</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        @if($isPhysical)
                                        <div class="row mt-4">
                                            <div class="col-md-12">
                                                <div class="form-group mb-2">
                                                    <label for="name" class="form-label">Name</label>
                                                    <input type="text" class="form-control" name="name" id="main_quantity" value="{{$order->name}}" disabled>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group mb-2">
                                                    <label for="state" class="form-label">State</label>
                                                    <input type="text" class="form-control" name="state" id="state" value="{{$order->state}}" disabled>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group mb-2">
                                                    <label for="zip" class="form-label">Zip Code</label>
                                                    <input type="text" class="form-control" name="zip" id="zip" value="{{$order->zip}}" disabled>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group mb-2">
                                                    <label for="address" class="form-label">Address</label>
                                                    <textarea name="address" id="address" class="form-control" cols="30" rows="10" disabled>{{$order->address}}</textarea>
                                                </div>
                                            </div>
                                        </div>
                                        @else
                                        <p class="text-center">Nothing to show here!</p>
                                        @endif
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Edit Modal -->
                        <div class="modal fade" id="itemEditModal{{$order->id}}" tabindex="-1" aria-labelledby="itemEditModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <form action="{{url('items/orders/status/update')}}" method="POST">
                                    @csrf
                                    <input type="hidden" name="order_id" value="{{$order->id}}">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="itemModalLabel">Edit Status</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <label for="type" class="form-label">Status</label>
                                            <select class="form-select item-type" name="status" required>
                                                <option value="{{\App\Models\ItemOrder::PENDING}}" {{$order->status==\App\Models\ItemOrder::PENDING? 'selected': ''}}>pending</option>
                                                <option value="{{\App\Models\ItemOrder::PROCESSING}}" {{$order->status==\App\Models\ItemOrder::PROCESSING? 'selected': ''}}>procesing</option>
                                                <option value="{{\App\Models\ItemOrder::COMPLETED}}" {{$order->status==\App\Models\ItemOrder::COMPLETED? 'selected': ''}}>completed</option>
                                            </select>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="submit" class="btn btn-primary">Save</button>
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        @endforeach
                    </tbody>
                </table>

            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Data Table JS -->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="{{ URL::asset('assets/js/pages/datatables.init.js') }}"></script>
<!-- Modal JS -->
<script src="{{ URL::asset('assets/js/pages/modal.init.js') }}"></script>
<!-- App JS -->
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<!-- Custom JS -->
<script>

</script>
@endsection