@extends('admin.layouts.layouts')

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

@section('content')
    <div class="page-header">
        <h3 class="page-title">
            Order View
        </h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('order.index') }}">Order</a></li>
                <li class="breadcrumb-item active" aria-current="page">View</li>
            </ol>
        </nav>
    </div>
    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-body bg-white">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row mb-2">
                            <div class="col-md-5"><strong>Farmer Name:</strong></div>
                            <div class="col-md-7">{{ $showDetails->users->name ?? '-' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-5"><strong>Order Number:</strong></div>
                            <div class="col-md-7">{{ $showDetails->order_number ?? '-' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-5"><strong>Order Date:</strong></div>
                            <div class="col-md-7">
                                {{ isset($showDetails->order_date) ? date('d-m-Y', strtotime($showDetails->order_date)) : '-' }}
                            </div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-5"><strong>Total Amount:</strong></div>
                            <div class="col-md-7"><i class="icon-sm fa fa-indian-rupee-sign"></i>
                                {{ number_format((float) $showDetails->total_amount, 2, '.', '') ?? '-' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-5"><strong>Created At:</strong></div>
                            <div class="col-md-7">{{ $showDetails->created_at->format('d-m-Y h:i A') ?? '-' }}</div>
                        </div>

                        {{-- <div class="row mb-2">
                            <div class="col-md-5"><strong>Created By:</strong></div>
                            <div class="col-md-7">{{ $showDetails->creator->name ?? '' }}</div>
                        </div> --}}

                        <div class="row mb-2">
                            <div class="col-md-5"><b>Status:</b></div>
                            <div class="col-md-7">
                                @php
                                    switch ($showDetails->status) {
                                        case '0':
                                            $buttonClass = 'warning';
                                            $buttonText = 'Pending';
                                            break;
                                        case '1':
                                            $buttonClass = 'info';
                                            $buttonText = 'Confirmed';
                                            break;
                                        case '2':
                                            $buttonClass = 'success';
                                            $buttonText = 'Completed';
                                            break;
                                        case '3':
                                            $buttonClass = 'danger';
                                            $buttonText = 'Cancelled';
                                            break;
                                        case '4':
                                            $buttonClass = 'primary';
                                            $buttonText = 'Dispatch';
                                            break;
                                        default:
                                            $buttonClass = 'secondary'; // A neutral default for unknown statuses
                                            $buttonText = 'Unknown Status';
                                            break;
                                    }
                                @endphp
                                <div class="btn-group">
                                    <button type="button" class="btn btn-{{ $buttonClass }}"
                                        {{ $showDetails->status == 2 || $showDetails->status == 3 ? 'disabled' : '' }}>{{ $buttonText }}</button>
                                    <button type="button"
                                        class="btn btn-{{ $buttonClass }} dropdown-toggle dropdown-toggle-split"
                                        id="dropdownMenuSplitButton5" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false"
                                        {{ $showDetails->status == 2 || $showDetails->status == 3 ? 'disabled' : '' }}>
                                        <span class="sr-only">Toggle Dropdown</span>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton5">
                                        <h5 class="dropdown-header">Select Status</h5>
                                        <a class="dropdown-item set-status" href="#" data-id="{{ $showDetails->id }}"
                                            data-show="show" data-status="0">Pending</a>
                                        <a class="dropdown-item set-status" href="#" data-id="{{ $showDetails->id }}"
                                            data-show="show" data-status="1">Confirmed</a>
                                        <a class="dropdown-item set-status dispatchStatus" href="#" data-id="{{ $showDetails->id }}"
                                            data-show="show" data-status="4" data-byHandOrCourier="{{ $showDetails->by_hand_or_courier }}" data-courierId="{{ $showDetails->courier_company_id }}" data-trackingNo="{{ $showDetails->tracking_no }}">Dispatch</a>
                                        <a class="dropdown-item set-status" href="#" data-id="{{ $showDetails->id }}"
                                            data-show="show" data-status="2">Completed</a>
                                        <a class="dropdown-item set-status" href="#" data-id="{{ $showDetails->id }}"
                                            data-show="show" data-status="3">Cancelled</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="row mb-2">
                            <div class="col-md-5"><strong>By Hand or Courier:</strong></div>
                            <div class="col-md-7 byHandOrCourierDiv">
                                @if (isset($showDetails->by_hand_or_courier))
                                    @if ($showDetails->by_hand_or_courier == 0 || $showDetails->by_hand_or_courier == '0')
                                        By Hand
                                    @else
                                        By Courier
                                    @endif
                                @else
                                    -
                                @endif
                            </div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-5"><strong>Courier Company:</strong></div>
                            <div class="col-md-7 courierCompanyDiv">{{ $showDetails->courierCompany?->name ?? '-' }}</div>
                        </div>

                        <div class="row mb-2">
                            <div class="col-md-5"><strong>Tracking Number:</strong></div>
                            <div class="col-md-7 trackingNoDiv">{{ $showDetails->tracking_no ?? '-' }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Unified Modal for Assign --}}
    <div class="modal fade" id="dispatchOrderModal" tabindex="-1" role="dialog" aria-labelledby="dispatchOrderModalLabel" aria-hidden="true"
        data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dispatchOrderModalLabel">Dispatch Order</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" id="dispatchOrderForm" action="javascript:void(0)">
                    @csrf
                    <input type="hidden" name="id" id="ordrerID" value="{{ $showDetails->id }}">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="form-label">By Hand or Courier <span class="text-danger">*</span></label>
                            <div class="d-flex mt-1">
                                <div class="form-check mr-2">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" name="by_hand_or_courier" id="by_hand_or_courier_no"
                                        data-parsley-required="true"
                                        data-parsley-errors-container="#by_hand_or_courier_error"
                                        data-parsley-required-message="Please select an option" value="0">
                                        By Hand
                                        <i class="input-helper"></i>
                                    </label>
                                </div>
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" name="by_hand_or_courier" id="by_hand_or_courier_yes"
                                            value="1">
                                        By Courier
                                        <i class="input-helper"></i>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="courier-fields" style="display: none;">
                            <div class="form-group">
                                <label for="name" class="form-label">Courier Company <span class="text-danger">*</span></label>
                                <select name="courier_company_id" id="courierCompanyIdInput" class="form-control courierCompanySelect"
                                    data-parsley-required
                                    data-parsley-trigger="keyup"
                                    data-parsley-required-message="Please select courier company"
                                    data-parsley-errors-container="#courier_company_id_error">
                                    <option value="">Select Courier Company</option>
                                    @foreach ($courierCompanyLists as $index => $courierCompanyList)
                                        <option value="{{ $index }}" {{ old('courier_company_id', $showDetails->courier_company_id) == $index ? 'selected' : '' }}>{{ $courierCompanyList }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="courier_company_id_error"></div>
                            </div>

                            <div class="form-group">
                                <label for="tracking_no" class="form-label">Tracking Number <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="tracking_no"
                                    id="trackingNumberInput" placeholder="Enter Tracking Number"
                                    value="{{ $showDetails->tracking_no ?? '' }}" data-parsley-required
                                    data-parsley-required-message="Please enter tracking number"
                                    data-parsley-trigger='keyup' data-parsley-errors-container='#tracking_no_error'>
                                <span class="text-danger" id="tracking_no_error">{{ $errors->first('tracking_no') }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="dispatchOrderBtn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Order Items</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table id="order-item-table" class="table w-100">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Product Name</th>
                                        <th>Product Type</th>
                                        <th>Price <i class="icon-sm fa fa-indian-rupee-sign"></i></th>
                                        <th>Quantity</th>
                                        <th>Created Date</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container py-4">
        <div class="card shadow-sm rounded border-0">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Order History</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table id="order-history-table" class="table w-100">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Status</th>
                                        <th>Status Date</th>
                                        <th>Updated Date</th>
                                        <th>Updated By</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var orderId = "{{ $showDetails->id }}";
        var orderItemAjaxList = "{{ route('order.order-item-ajax') }}";
        var orderHistoryAjaxList = "{{ route('order.order-history-ajax') }}";
        var orderStatus = "{{ route('order-status') }}";
        var dispatchOrder = "{{ route('order-dispatch') }}";
    </script>
    <script src="{{ asset('assets/js/admin/order.js') }}"></script>
@endsection