@extends('layouts.store.store')
@section('title', 'Store Orders')
@section('content')
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush


 <main>
        <div class="container-fluid p-0">
            <div class="row g-0">
              @include('partials.header')
                @include('layouts.store.sidebar')
                <section class="content-section col primary-bg-light p-xl-4 p-3">
                    <div class="bg-white rounded-3 shadow-sm p-3">
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="small fw-medium d-flex flex-wrap">Order Management<span><i class="bi bi-chevron-right"></i></span>Orders<span><i class="bi bi-chevron-right"></i></span>Order Details</div>
                                <hr class="mb-4">
                                <h5>Order Details</h5>
                                <form action="">
                                    <div class="row g-2">
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="row g-2 mb-2">
                                                <div class="col-6">
                                                    <div class="fw-medium">Order Id:</div>
                                                </div>
                                                <div class="col-6">{{$order->id}}</div>
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="row g-2 mb-2">
                                                <div class="col-6">
                                                    <div class="fw-medium">Order Date:</div>
                                                </div>
                                                <div class="col-6">04/11/2025</div>
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="row g-2 mb-2">
                                                <div class="col-6">
                                                    <div class="fw-medium">Order Type:</div>
                                                </div>
                                                <div class="col-6">{{ucfirst($order->order_type)}}</div>
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="row g-2 mb-2">
                                                <div class="col-6">
                                                    <div class="fw-medium">Store Number:</div>
                                                </div>
                                                <div class="col-6">{{$order->store->store_number}}</div>
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="row g-2 mb-2">
                                                <div class="col-6">
                                                    <div class="fw-medium">Store Name:</div>
                                                </div>
                                                <div class="col-6">{{$order->store->store_name}}</div>
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="row g-2 mb-2">
                                                <div class="col-6">
                                                    <div class="fw-medium">Division:</div>
                                                </div>
                                                <div class="col-6">{{$order->store->divisions->name}}</div>
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="row g-2 mb-2">
                                                <div class="col-6">
                                                    <div class="fw-medium">Region:</div>
                                                </div>
                                                <div class="col-6">{{$order->store->regions->name}}</div>
                                            </div>
                                        </div>
                                        <div class="col-xl-4 col-sm-6">
                                            <div class="row g-2 mb-2">
                                                <div class="col-6">
                                                    <div class="fw-medium">Area:</div>
                                                </div>
                                                <div class="col-6">{{$order->store->areas->name}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col-xl-8 col-md-10">
                                <table class="table table-bordered">
                                    <tr>
                                        <th>SL.NO.</th>
                                        <th>Returning Wrenches</th>
                                        <th>Replacement Wrenches</th>
                                    </tr>
                                     @php
                                        $maxRows = max($order->OrderDetails->count(), $order->ReplacementWrenches->count());
                                    @endphp
                                    @for ($i = 0; $i < $maxRows; $i++)
                                    @php
                                        $orderDetail = $order->OrderDetails[$i] ?? null;
                                        $replacementDetail = $order->ReplacementWrenches[$i] ?? null;

                                        $store_wrenches = $orderDetail?->wrenches?->serial_number ?? 'N/A';
                                        $replacement_wrenches = $replacementDetail?->wrenches?->serial_number ?? 'N/A';

                                        $urlStore = $orderDetail && $orderDetail->wrenches ? route('wrenches.edit', $orderDetail->wrenches->id) : null;
                                        $urlReplacement = $replacementDetail && $replacementDetail->wrenches ? route('wrenches.edit', $replacementDetail->wrenches->id) : null;
                                   
                                    @endphp
                                    <tr>
                                        <td>{{ $i + 1 }}</td>
                                        <td>
                                            {!! $store_wrenches !== 'N/A' ? $store_wrenches : '' !!}
                                                
                                        </td>
                                        <td>
                                            {!! $replacement_wrenches !== 'N/A' ? $replacement_wrenches : '' !!}
                                        </td>
                                    </tr>
                                    @endfor
                                  
                                </table>
                            </div>
                            @if($order->order_status !='Cancelled')
                            <div class="col-12">
                                <div class="bg-white overflow-hidden d-flex flex-column justify-content-between border py-5">
                                    <div class="d-flex fw-bold align-items-center justify-content-center flex-xl-nowrap flex-wrap text-center mb-5">
                                        <h5>End-to-End Order Management Support Process</h5>
                                    </div>
                                    <ul class="list-unstyled multi-steps">
                                        {{-- {{dd($statuses)}} --}}
                                        @foreach($statuses as $status)
                                        @php
                                         $orderid =  $order->id;
                                         $helper = new \App\Helpers\Helpers();
                                         $history = $helper->check_status_history($orderid,$status);
                                         $history_count = $helper->status_history_count($orderid,$status);
                                       
                                         if($history_count !=0){
                                            $status_date = $history->created_at->format('m/d/Y');
                                         } else {
                                            $status_date = '-';
                                         }
                                        @endphp
                                       
                                        <li id="step-1" @if($history_count !=0) class="is-active" @endif>
                                            <div>
                                                <span class="date-track">{{$status_date}}</span>
                                                 {{$status}}
                                            </div>
                                            <div class="progress-bar">
                                                <div class="progress-bar__bar"></div>
                                            </div>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                            @endif
                            @if($order->order_status =='Notification sent to Store')
                            <div class="col-12">
                                <form action="">
                                    <div class="row g-2">
                                        <div class="col-12">
                                            <label for="" class="form-label fw-semibold">Cancellation Reason</label>
                                            <textarea name="" id="" rows="4" class="form-control"></textarea>
                                        </div>
                                        <div class="col-12 d-flex justify-content-end">
                                            <button type="button" class="btn btn-type1 px-5 border-0 shadow-sm" data-bs-toggle="modal" data-bs-target="#confirmCancel">Cancel Order</button>
                                        </div>
                                        <div class="modal fade" id="confirmCancel" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
                                            aria-labelledby="confirmCancelLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered">
                                                <div class="modal-content">
                                                    <div class="modal-header border-0">
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body fs-5">
                                                        Are you sure you want to cancel the order?
                                                    </div>
                                                    <div class="modal-footer border-0">
                                                        <button type="button" class="btn btn-dark border-0 shadow-sm" data-bs-dismiss="modal">Cancel</button>
                                                        <button type="button" class="btn btn-type1 border-0 shadow-sm" data-bs-target="#successPopup" data-bs-toggle="modal">Confirm</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                      
                                    </div>
                                </form>
                            </div>
                            @endif

                            <div class="col-12">
                                <a href="{{route('storeOrders.index')}}" class="btn btn-type3 px-5 border-0 shadow-sm">Back to Orders</a>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>








@stop