@php use App\Enums\OrderStatusEnum; @endphp
@extends('layouts.master')
@section('title', trans('admin.order_details'))

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/css/pages/app-chat.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/sweetalert2/sweetalert2.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}"/>
    <style>
        .chat-history-card .chat-message-text {
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.4);
            max-width: 85%;
            word-wrap: break-word;
        }

        .chat-message-right .chat-message-text {
            border-top-right-radius: 0;
        }

        .chat-message:not(.chat-message-right) .chat-message-text {
            border-top-left-radius: 0;
        }

        .app-chat-history {
            background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%237367f0' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
        }

        .fulfillment-option {
            transition: all 0.3s ease;
            border: 1px solid rgba(75, 70, 92, 0.1) !important;
            cursor: pointer;
        }
        .fulfillment-option:hover {
            transform: translateY(-3px);
            box-shadow: 0 0.5rem 1rem rgba(165, 163, 174, 0.15);
            border-color: #7367f0 !important;
        }
        .fulfillment-option.active {
            background-color: rgba(115, 103, 240, 0.08);
            border-color: #7367f0 !important;
        }
    </style>
@endsection

@section('content')
    @include('layouts._breadcrumb', [
        'list' => [
            ['data' => trans('admin.dashboard'), 'url' => route('admin.landing')],
            ['data' => trans('admin.orders_list'), 'url' => route('admin.order.index')],
            ['data' => trans('admin.order_details'), 'url' => null],
        ],
    ])

    <div class="row">
        <!-- Order Overview & Details -->
        <div class="col-xl-8 col-lg-7">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ trans('admin.order_details') }} #{{ $order->id }}</h5>
                    <div class="d-flex align-items-center">
                        @if(auth()->user()->can(\App\Enums\PermissionEnum::ORDER_PRINT->value))
                            <a href="{{ route('admin.order.print', $order->id) }}" target="_blank"
                               class="btn btn-label-secondary waves-effect me-2">
                                <i class="ti ti-printer me-1"></i> {{ trans('admin.print_order') }}
                            </a>
                        @endif
                        <span id="order-status-badge"
                              class="badge bg-label-{{ $order->status->color() }}">{{ $order->status->name() }}</span>
                    </div>
                </div>
                <div class="card-body">
                    @if(auth()->user()->can(\App\Enums\PermissionEnum::ORDER_UPDATE_STATUS->value))
                        <div class="row mb-4 border-bottom pb-4">
                            <div class="col-md-6 mb-3 mb-md-0">
                                <label class="form-label fw-bold">{{ trans('admin.update_order_status') }}</label>
                                <div class="input-group">
                                    <select id="update-status-select" class="form-select">
                                        @foreach(OrderStatusEnum::cases() as $status)
                                            <option
                                                value="{{ $status->value }}" {{ $order->status == $status ? 'selected' : '' }}>{{ $status->name() }}</option>
                                        @endforeach
                                    </select>
                                    <button class="btn btn-primary" type="button"
                                            id="btn-update-status">{{ trans('admin.update') }}</button>
                                </div>
                            </div>

                        @php
                            $isPushedToProvider = $order->status === OrderStatusEnum::PENDING && $order->fulfillment_type === \App\Enums\OrderFulfillmentTypeEnum::PROVIDER;
                            $canSetPrice = !$order->service_id && $order->status !== OrderStatusEnum::PAID && !$isPushedToProvider;
                        @endphp

                        @if($canSetPrice)
                                <div class="col-md-6">
                                    <label class="form-label fw-bold">{{ trans('admin.set_price') }}</label>
                                    <div class="input-group">
                                        <input type="number" id="order-price-input" class="form-control"
                                               value="{{ $order->price }}" step="0.01" min="0">
                                        <button class="btn btn-success" type="button"
                                                id="btn-set-price">{{ trans('admin.save') }}</button>
                                    </div>
                                    <small class="text-muted">{{ trans('admin.admin_price_help') }}</small>
                                </div>
                            @endif
                        </div>
                        @if(!$order->service_id && !in_array($order->status, [OrderStatusEnum::PENDING, OrderStatusEnum::PENDING_PAYMENT, OrderStatusEnum::UNDER_REVIEW]))
                           @if(!$order->provider_id && $order->status === OrderStatusEnum::PAID && $order->fulfillment_type === \App\Enums\OrderFulfillmentTypeEnum::PROVIDER)
                            <div class="row mb-4 border-bottom pb-4">
                                <div class="col-12">
                                    <button class="btn btn-label-warning w-100 waves-effect" id="btn-push-to-providers">
                                        <i class="ti ti-rocket me-1"></i> {{ trans('admin.push_to_providers') }}
                                    </button>
                                </div>
                            </div>
                           @endif

                           @if(!$order->provider_id && !in_array($order->status, [OrderStatusEnum::CANCELLED, OrderStatusEnum::REJECTED_BY_ADMIN]))
                                <div class="row mb-4 border-bottom pb-4">
                                    <div class="col-12">
                                        <button class="btn btn-label-info w-100 waves-effect" id="btn-assign-provider">
                                            <i class="ti ti-user-plus me-1"></i> {{ trans('admin.assign_provider') }}
                                        </button>
                                    </div>
                                </div>
                            @endif
                        @endif
                        @if($order->status === OrderStatusEnum::CANCELLATION_UNDER_REVIEW && auth()->user()->can(\App\Enums\PermissionEnum::ORDER_UPDATE_STATUS->value))
                            <div class="row mb-4 border-bottom pb-4">
                                <div class="col-md-6 mb-2">
                                    <button class="btn btn-label-success w-100 waves-effect" id="btn-approve-cancellation-refund">
                                        <i class="ti ti-wallet me-1"></i> {{ trans('admin.approve_refund') }}
                                    </button>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <button class="btn btn-label-warning w-100 waves-effect" id="btn-approve-cancellation-no-refund">
                                        <i class="ti ti-lock-off me-1"></i> {{ trans('admin.approve_no_refund') }}
                                    </button>
                                </div>
                            </div>
                        @endif
                        @if(!$order->service_id && $order->status === OrderStatusEnum::UNDER_REVIEW)
                            <div class="row mb-4 border-bottom pb-4">
                                <div class="col-md-6 mb-2">
                                    <button class="btn btn-label-success w-100 waves-effect" id="btn-accept-custom">
                                        <i class="ti ti-check me-1"></i> {{ trans('admin.approve_and_set_price') }}
                                    </button>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <button class="btn btn-label-danger w-100 waves-effect" id="btn-reject-custom">
                                        <i class="ti ti-x me-1"></i> {{ trans('admin.reject') }}
                                    </button>
                                </div>
                            </div>
                        @endif
                    @endif
                    <div class="row g-3">
                        <div class="col-md-6">
                            <h6 class="text-muted small text-uppercase mb-2">{{ trans('admin.service') }}</h6>
                            <p class="fw-medium mb-0">{{ $order->service->name ?? $order->custom_service_name ?? trans('admin.na') }}</p>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <h6 class="text-muted small text-uppercase mb-2">{{ trans('admin.price') }}</h6>
                            <p class="fw-medium mb-0 h5 text-primary">{{ number_format($order->price, 2) }} {{ trans('admin.sar') }}</p>
                        </div>
                        <div class="col-12 mt-4">
                            <h6 class="text-muted small text-uppercase mb-2">{{ trans('admin.notes') }}</h6>
                            <p class="mb-0">{{ $order->notes ?? trans('admin.na') }}</p>
                        </div>
                        @if($order->status === OrderStatusEnum::CANCELLED)
                            @if($order->cancellationReason)
                                <div class="col-md-6 mt-4">
                                    <h6 class="text-muted small text-uppercase mb-2 text-danger">{{ trans('admin.cancellation_reason') }}</h6>
                                    <p class="mb-0 fw-bold text-danger">{{ $order->cancellationReason->reason }}</p>
                                </div>
                            @endif
                            @if($order->cancellation_note)
                                <div class="col-md-6 mt-4">
                                    <h6 class="text-muted small text-uppercase mb-2 text-danger">{{ trans('admin.cancellation_note') }}</h6>
                                    <p class="mb-0 text-danger">{{ $order->cancellation_note }}</p>
                                </div>
                            @endif
                        @endif
                        @if($order->attachments->count() > 0)
                            <div class="col-12 mt-4">
                                <h6 class="text-muted small text-uppercase mb-2">{{ trans('admin.attachments') }}</h6>
                                <div class="row g-2">
                                    @foreach($order->attachments as $attachment)
                                        <div class="col-md-3 col-6">
                                            <a href="{{ asset('storage/' . $attachment->path) }}" target="_blank">
                                                <img src="{{ asset('storage/' . $attachment->path) }}"
                                                     class="img-fluid rounded border"
                                                     style="max-height: 150px; width: 100%; object-fit: cover;">
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Chat History -->
            <div class="card mb-4 chat-history-card">
                <div class="card-header border-bottom d-flex align-items-center">
                    <h5 class="mb-0">{{ trans('admin.chat_history') }}</h5>
                </div>
                <div class="card-body p-0" style="max-height: 500px; overflow-y: auto; background-color: #f8f9fa;">
                    @if(count($chatMessages) > 0)
                        <div class="app-chat-history">
                            <ul class="list-unstyled chat-history mb-0 p-4">
                                @foreach($chatMessages as $message)
                                    @php
                                        $isAdmin = $message->sender_id === null;
                                        $isClient = !$isAdmin && $message->sender_id == $order->client_id;
                                        $senderName = $isAdmin ? 'Admin' : ($message->sender->name ?? trans('admin.na'));
                                        $initials = substr($senderName, 0, 1);
                                    @endphp
                                    <li class="chat-message {{ $isAdmin ? 'chat-message-right' : '' }} mb-4">
                                        <div class="d-flex overflow-hidden">
                                            @if(!$isAdmin)
                                                <div class="user-avatar flex-shrink-0 me-3">
                                                    <div class="avatar avatar-sm">
                                                        <span
                                                            class="avatar-initial rounded-circle bg-label-success">{{ $initials }}</span>
                                                    </div>
                                                </div>
                                            @endif
                                            <div class="chat-message-wrapper flex-grow-1">
                                                <div class="chat-message-text"
                                                     style="{{ $isAdmin ? 'background-color: #7367f0; color: white;' : 'background-color: white;' }}">
                                                    @if($message->type->value == 'text')
                                                        <p class="mb-0">{{ $message->message }}</p>
                                                    @elseif($message->type->value == 'image')
                                                        @if($message->attachment_url)
                                                            <a href="{{ $message->attachment_url }}" target="_blank">
                                                                <img src="{{ $message->attachment_url }}"
                                                                     class="img-fluid rounded mb-2"
                                                                     style="max-width: 250px; display: block;"/>
                                                            </a>
                                                        @endif
                                                        @if($message->message)
                                                            <p class="mb-0">{{ $message->message }}</p>
                                                        @endif
                                                    @elseif($message->type->value == 'voice')
                                                        <audio controls class="mw-100 mb-1" style="height: 35px;">
                                                            <source src="{{ $message->attachment_url }}"
                                                                    type="audio/mpeg">
                                                            Your browser does not support the audio element.
                                                        </audio>
                                                        @if($message->duration)
                                                            <div class="d-block small"><i
                                                                    class="ti ti-microphone me-1"></i> {{ floor($message->duration / 60) }}
                                                                :{{ str_pad($message->duration % 60, 2, '0', STR_PAD_LEFT) }}
                                                            </div>
                                                        @endif
                                                    @endif
                                                </div>
                                                <div class="text-{{ $isAdmin ? 'end' : 'start' }} text-muted mt-1">
                                                    <small class="fw-medium">{{ $senderName }}</small>
                                                    <small class="mx-1">•</small>
                                                    <small>{{ $message->created_at->format('h:i A') }}</small>
                                                </div>
                                            </div>
                                            @if($isAdmin)
                                                <div class="user-avatar flex-shrink-0 ms-3">
                                                    <div class="avatar avatar-sm">
                                                        <span
                                                            class="avatar-initial rounded-circle bg-label-primary">{{ $initials }}</span>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @else
                        <div class="p-5 text-center text-muted">
                            <i class="ti ti-message-off mb-2 fs-2 d-block"></i>
                            {{ trans('admin.no_messages_yet') }}
                        </div>
                    @endif
                </div>
                <div class="card-footer border-top px-4 py-3">
                    <form id="admin-chat-form" class="d-flex align-items-center">
                        <input type="text" class="form-control message-input me-3" placeholder="Type your message here..." id="chat-message-input">
                        <button class="btn btn-primary d-flex" type="submit" id="btn-send-message">
                            <i class="ti ti-send me-md-1 me-0"></i>
                            <span class="d-md-block d-none">{{ trans('admin.send') }}</span>
                        </button>
                    </form>
                </div>
            </div>

            <!-- Status Logs -->
            <div class="card mb-4">
                <div class="card-header border-bottom">
                    <h5 class="mb-0">{{ trans('admin.status_logs') }}</h5>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>{{ trans('admin.status') }}</th>
                            <th>{{ trans('admin.changed_by') }}</th>
                            <th>{{ trans('admin.date') }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($order->statusLogs as $log)
                            <tr>
                                <td><span
                                        class="badge bg-label-{{ $log->status->color() }}">{{ $log->status->name() }}</span>
                                </td>
                                <td>{{ $log->changed_by->name() }}</td>
                                <td>{{ $log->created_at->format('Y-m-d H:i') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center">{{ trans('admin.no_logs_yet') }}</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Client & Provider Sidebar -->
        <div class="col-xl-4 col-lg-5">
            <!-- Client Card -->
            <div class="card mb-4">
                <div class="card-header border-bottom">
                    <h5 class="mb-0">{{ trans('admin.client_details') }}</h5>
                </div>
                <div class="card-body pt-4">
                    <div class="d-flex justify-content-start align-items-center mb-4">
                        <div class="avatar me-3">
                            <span
                                class="avatar-initial rounded-circle bg-label-primary">{{ substr($order->client->name ?? 'C', 0, 1) }}</span>
                        </div>
                        <div class="d-flex flex-column">
                            <a href="{{ route('admin.app_user.show', $order->client_id) }}" class="text-body fw-medium">
                                <h6 class="mb-0">{{ $order->client->name ?? trans('admin.na') }}</h6>
                            </a>
                        </div>
                    </div>
                    <div class="info-container">
                        <ul class="list-unstyled">
                            <li class="mb-2">
                                <span class="fw-medium me-1">{{ trans('admin.phone') }}:</span>
                                <span>{{ $order->client->phone ?? trans('admin.na') }}</span>
                            </li>
                            <li class="mb-2">
                                <span class="fw-medium me-1">{{ trans('admin.email') }}:</span>
                                <span>{{ $order->client->email ?? trans('admin.na') }}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="border-top pt-3 px-0">
                        <h6 class="small text-muted text-uppercase mb-2"><i class="ti ti-message me-1"></i>{{ trans('admin.send_message_to_client') }}</h6>
                        <form class="admin-quick-chat-form d-flex align-items-center gap-2" data-target="client">
                            <input type="text" class="form-control form-control-sm quick-chat-input" placeholder="{{ trans('admin.type_message') }}..." required>
                            <button class="btn btn-sm btn-primary d-flex align-items-center" type="submit">
                                <i class="ti ti-send"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Provider Card -->
            <div class="card mb-4">
                <div class="card-header border-bottom">
                    <h5 class="mb-0">{{ trans('admin.provider_details') }}</h5>
                </div>
                <div class="card-body pt-4">
                    @if($order->provider)
                        <div class="d-flex justify-content-start align-items-center mb-4">
                            <div class="avatar me-3">
                                <span
                                    class="avatar-initial rounded-circle bg-label-success">{{ substr($order->provider->name ?? 'P', 0, 1) }}</span>
                            </div>
                            <div class="d-flex flex-column">
                                <a href="{{ route('admin.app_user.show', $order->provider_id) }}"
                                   class="text-body fw-medium">
                                    <h6 class="mb-0">{{ $order->provider->name }}</h6>
                                </a>
                            </div>
                        </div>
                        <div class="info-container">
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <span class="fw-medium me-1">{{ trans('admin.phone') }}:</span>
                                    <span>{{ $order->provider->phone }}</span>
                                </li>
                                <li class="mb-2">
                                    <span class="fw-medium me-1">{{ trans('admin.email') }}:</span>
                                    <span>{{ $order->provider->email }}</span>
                                </li>
                            </ul>
                        </div>
                        <div class="border-top pt-3 px-0">
                            <h6 class="small text-muted text-uppercase mb-2"><i class="ti ti-message me-1"></i>{{ trans('admin.send_message_to_provider') }}</h6>
                            <form class="admin-quick-chat-form d-flex align-items-center gap-2" data-target="provider">
                                <input type="text" class="form-control form-control-sm quick-chat-input" placeholder="{{ trans('admin.type_message') }}..." required>
                                <button class="btn btn-sm btn-success d-flex align-items-center" type="submit">
                                    <i class="ti ti-send"></i>
                                </button>
                            </form>
                        </div>
                    @else
                        <div class="text-center py-3">
                            <p class="text-muted mb-0">{{ trans('admin.no_provider_assigned') }}</p>
                        </div>
                    @endif
                </div>
            </div>
            </div>
        </div>
    </div>

    <!-- Assign Provider Modal -->
    <div class="modal fade" id="assignProviderModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content p-3 p-md-5">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="text-center mb-4">
                        <h3 class="mb-2">{{ trans('admin.assign_provider') }}</h3>
                        <p class="text-muted">{{ trans('admin.assign_provider_desc') }}</p>
                    </div>
                    <form id="assignProviderForm" class="row g-3">
                        <div class="col-12">
                            <label class="form-label" for="provider_id_select">{{ trans('admin.provider') }}</label>
                            <select id="provider_id_select" name="provider_id" class="form-select">
                                <option value="">{{ trans('admin.select_provider') }}</option>
                            </select>
                        </div>
                        <div class="col-12 text-center mt-4">
                            <button type="submit" class="btn btn-primary me-sm-3 me-1">{{ trans('admin.confirm') }}</button>
                            <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">{{ trans('admin.cancel') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset('admin_assets/vendor/libs/sweetalert2/sweetalert2.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/select2/select2.js') }}"></script>
@endsection

@section('page-script')
    <script>
        $(document).ready(function () {
            $('#btn-update-status').on('click', function () {
                const status = $('#update-status-select').val();
                const url = "{{ route('admin.order.update_status', $order->id) }}";

                Swal.fire({
                    title: "{{ trans('admin.are_you_sure') }}",
                    text: "{{ trans('admin.you_wont_be_able_to_revert_this') }}",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#7367f0',
                    cancelButtonColor: '#d33',
                    confirmButtonText: "{{ trans('admin.yes_update_it') }}",
                    cancelButtonText: "{{ trans('admin.cancel') }}"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}",
                                status: status
                            },
                            success: function (response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: response.message,
                                    showConfirmButton: false,
                                    timer: 1500
                                }).then(() => {
                                    // Update badge and refresh page to show logs
                                    location.reload();
                                });
                            },
                            error: function (xhr) {
                                Swal.fire({
                                    icon: 'error',
                                    title: "{{ trans('admin.error') }}",
                                    text: xhr.responseJSON.message || "{{ trans('admin.something_went_wrong') }}"
                                });
                            }
                        });
                    }
                });
            });

            $('#btn-set-price').on('click', function () {
                const price = $('#order-price-input').val();
                const url = "{{ route('admin.order.update', $order->id) }}";

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        price: price
                    },
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        }).then(() => {
                            location.reload();
                        });
                    },
                    error: function (xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: "{{ trans('admin.error') }}",
                            text: xhr.responseJSON.message || "{{ trans('admin.something_went_wrong') }}"
                        });
                    }
                });
            });

            $('#btn-push-to-providers').on('click', function () {
                const url = "{{ route('admin.order.push_to_providers', $order->id) }}";

                Swal.fire({
                    title: "{{ trans('admin.are_you_sure') }}",
                    text: "{{ trans('admin.push_to_fulfillment') }}",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#7367f0',
                    cancelButtonColor: '#d33',
                    confirmButtonText: "{{ trans('admin.confirm') }}",
                    cancelButtonText: "{{ trans('admin.cancel') }}"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}"
                            },
                            success: function (response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: response.message,
                                    showConfirmButton: false,
                                    timer: 1500
                                }).then(() => {
                                    location.reload();
                                });
                            },
                            error: function (xhr) {
                                Swal.fire({
                                    icon: 'error',
                                    title: "{{ trans('admin.error') }}",
                                    text: xhr.responseJSON.message || "{{ trans('admin.something_went_wrong') }}"
                                });
                            }
                        });
                    }
                });
            });

            $('#btn-assign-provider').on('click', function() {
                $('#provider_id_select').val(null).trigger('change');
                $('#assignProviderModal').modal('show');
            });

            $('#assignProviderModal').on('shown.bs.modal', function () {
                $('#provider_id_select').select2({
                    dropdownParent: $('#assignProviderModal'),
                    ajax: {
                        url: "{{ route('admin.app_user.select2') }}",
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term,
                                role: 'provider'
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: data.data
                            };
                        },
                        cache: true
                    },
                    placeholder: "{{ trans('admin.select_provider') }}",
                    allowClear: true
                });
            });

            $('#assignProviderForm').on('submit', function(e) {
                e.preventDefault();
                var providerId = $('#provider_id_select').val();
                var url = "{{ route('admin.order.assign_to_provider', $order->id) }}";

                if (!providerId) {
                    Swal.fire({
                        icon: 'error',
                        title: "{{ trans('admin.error') }}",
                        text: "{{ trans('admin.please_select_provider') }}",
                    });
                    return;
                }

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        provider_id: providerId
                    },
                    success: function(response) {
                        $('#assignProviderModal').modal('hide');
                        Swal.fire({
                            icon: 'success',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        }).then(() => {
                            location.reload();
                        });
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: "{{ trans('admin.error') }}",
                            text: xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : "{{ trans('admin.something_went_wrong') }}",
                        });
                    }
                });
            });

            $('#btn-approve-cancellation-refund').on('click', function () {
                const url = "{{ route('admin.order.approve_cancellation_refund', $order->id) }}";
                confirmCancellationAction(url, "{{ trans('admin.are_you_sure') }}", "{{ trans('admin.approve_refund_msg') }}");
            });

            $('#btn-approve-cancellation-no-refund').on('click', function () {
                const url = "{{ route('admin.order.approve_cancellation_no_refund', $order->id) }}";
                confirmCancellationAction(url, "{{ trans('admin.are_you_sure') }}", "{{ trans('admin.approve_no_refund_msg') }}");
            });

            function confirmCancellationAction(url, title, text) {
                Swal.fire({
                    title: title,
                    text: text,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#7367f0',
                    cancelButtonColor: '#d33',
                    confirmButtonText: "{{ trans('admin.confirm') }}",
                    cancelButtonText: "{{ trans('admin.cancel') }}"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: url,
                            type: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}"
                            },
                            success: function (response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: response.message,
                                    showConfirmButton: false,
                                    timer: 1500
                                }).then(() => {
                                    location.reload();
                                });
                            },
                            error: function (xhr) {
                                Swal.fire({
                                    icon: 'error',
                                    title: "{{ trans('admin.error') }}",
                                    text: xhr.responseJSON.message || "{{ trans('admin.something_went_wrong') }}"
                                });
                            }
                        });
                    }
                });
            }

            // Chat Logic
            const chatHistoryBody = $('.chat-history-card .card-body');
            chatHistoryBody.scrollTop(chatHistoryBody[0].scrollHeight);

            $('#admin-chat-form').on('submit', function (e) {
                e.preventDefault();
                const message = $('#chat-message-input').val();
                if (!message.trim()) return;

                const btn = $('#btn-send-message');
                btn.prop('disabled', true);

                $.ajax({
                    url: "{{ route('admin.order.send_message', $order->id) }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        message: message,
                        type: 'text'
                    },
                    success: function (response) {
                        $('#chat-message-input').val('');
                        appendMessage(response.data);
                        btn.prop('disabled', false);
                    },
                    error: function (xhr) {
                        btn.prop('disabled', false);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Failed to send message'
                        });
                    }
                });
            });

            function appendMessage(data) {
                const isAdmin = data.sender_id === null;
                const senderName = isAdmin ? 'Admin' : (data.sender ? data.sender.name : 'Unknown');
                const initials = senderName.charAt(0);
                const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

                const noMessages = $('.ti-message-off').parent();
                if(noMessages.length) {
                    $('.chat-history-card .card-body').html('<div class="app-chat-history"><ul class="list-unstyled chat-history mb-0 p-4"></ul></div>');
                }

                const chatList = $('.chat-history');
                const html = `
                    <li class="chat-message ${isAdmin ? 'chat-message-right' : ''} mb-4">
                        <div class="d-flex overflow-hidden">
                            ${!isAdmin ? `
                            <div class="user-avatar flex-shrink-0 me-3">
                                <div class="avatar avatar-sm">
                                    <span class="avatar-initial rounded-circle bg-label-success">${initials}</span>
                                </div>
                            </div>` : ''}
                            <div class="chat-message-wrapper flex-grow-1">
                                <div class="chat-message-text" style="${isAdmin ? 'background-color: #7367f0; color: white;' : 'background-color: white;'}">
                                    <p class="mb-0">${data.message}</p>
                                </div>
                                <div class="text-${isAdmin ? 'end' : 'start'} text-muted mt-1">
                                    <small class="fw-medium">${senderName}</small>
                                    <small class="mx-1">•</small>
                                    <small>${time}</small>
                                </div>
                            </div>
                            ${isAdmin ? `
                            <div class="user-avatar flex-shrink-0 ms-3">
                                <div class="avatar avatar-sm">
                                    <span class="avatar-initial rounded-circle bg-label-primary">${initials}</span>
                                </div>
                            </div>` : ''}
                        </div>
                    </li>
                `;
                chatList.append(html);
                chatHistoryBody.animate({ scrollTop: chatHistoryBody[0].scrollHeight }, 500);
            }

            // Quick Chat Forms (Client & Provider sidebar)
            $('.admin-quick-chat-form').on('submit', function (e) {
                e.preventDefault();
                const form = $(this);
                const input = form.find('.quick-chat-input');
                const message = input.val();
                const target = form.data('target');
                if (!message.trim()) return;

                const btn = form.find('button[type="submit"]');
                btn.prop('disabled', true);

                $.ajax({
                    url: "{{ route('admin.order.send_message', $order->id) }}",
                    type: 'POST',
                    data: {
                        _token: "{{ csrf_token() }}",
                        message: `[${target === 'client' ? '{{ trans("admin.to_client") }}' : '{{ trans("admin.to_provider") }}'}] ${message}`,
                        type: 'text'
                    },
                    success: function (response) {
                        input.val('');
                        appendMessage(response.data);
                        btn.prop('disabled', false);

                        Swal.fire({
                            icon: 'success',
                            title: "{{ trans('admin.sent_successfully') }}",
                            showConfirmButton: false,
                            timer: 1000
                        });
                    },
                    error: function (xhr) {
                        btn.prop('disabled', false);
                        Swal.fire({
                            icon: 'error',
                            title: "{{ trans('admin.error') }}",
                            text: xhr.responseJSON ? xhr.responseJSON.message : "{{ trans('admin.something_went_wrong') }}"
                        });
                    }
                });
            });

            // Accept Custom Order (with fulfillment type + provider selection)
            $('#btn-accept-custom').on('click', function () {
                var url = "{{ route('admin.order.accept_custom', $order->id) }}";

                Swal.fire({
                    title: "{{ trans('admin.approve_and_set_price') }}",
                    html: `
                        <div class="row g-3 mt-2">
                            <div class="col-12 text-start">
                                <label class="form-label fw-bold">{{ trans('admin.set_initial_price') }} ({{ trans('admin.sar') }})</label>
                                <input type="number" id="approval-price" class="form-control" placeholder="0.00" step="0.01" min="0" value="{{ $order->price }}">
                                <hr class="my-3">
                                <label class="form-label fw-bold text-muted mb-2">{{ trans('admin.select_fulfillment_type') }}</label>
                            </div>
                            <div class="col-12">
                                <div class="card fulfillment-option p-3 text-start" data-type="direct" style="cursor: pointer; border: 1px solid #eee;">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-md me-3">
                                            <span class="avatar-initial rounded bg-label-info"><i class="ti ti-user-check ti-md"></i></span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1">{{ trans('admin.direct_fulfillment') }}</h6>
                                            <small class="text-muted">{{ trans('admin.direct_fulfillment_help') }}</small>
                                        </div>
                                        <div class="ms-2">
                                            <i class="ti ti-chevron-right text-muted"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="card fulfillment-option p-3 text-start" data-type="provider" style="cursor: pointer; border: 1px solid #eee;">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar avatar-md me-3">
                                            <span class="avatar-initial rounded bg-label-success"><i class="ti ti-users ti-md"></i></span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1">{{ trans('admin.provider_fulfillment') }}</h6>
                                            <small class="text-muted">{{ trans('admin.provider_fulfillment_help') }}</small>
                                        </div>
                                        <div class="ms-2">
                                            <i class="ti ti-chevron-right text-muted"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 d-none" id="provider-select-section">
                                <hr class="my-2">
                                <label class="form-label fw-bold">{{ trans('admin.select_provider') }}</label>
                                <select id="approval-provider-select" class="form-select" style="width: 100%;">
                                    <option value="">{{ trans('admin.select_provider') }}</option>
                                </select>
                                <small class="text-muted mt-1 d-block">{{ trans('admin.select_provider_optional_help') }}</small>
                                <button type="button" class="btn btn-success w-100 mt-3" id="btn-confirm-approval">
                                    <i class="ti ti-check me-1"></i> {{ trans('admin.confirm') }}
                                </button>
                            </div>
                        </div>
                    `,
                    showConfirmButton: false,
                    showCancelButton: true,
                    cancelButtonText: "{{ trans('admin.cancel') }}",
                    customClass: {
                        cancelButton: 'btn btn-label-secondary mt-3'
                    },
                    buttonsStyling: false,
                    didOpen: () => {
                        const content = Swal.getHtmlContainer();
                        const options = content.querySelectorAll('.fulfillment-option');
                        var selectedType = null;

                        // Initialize Select2 for provider search
                        $('#approval-provider-select').select2({
                            ajax: {
                                url: "{{ route('admin.app_user.select2') }}",
                                dataType: 'json',
                                delay: 250,
                                data: function (params) {
                                    return { q: params.term, role: 'provider' };
                                },
                                processResults: function (data) {
                                    return {
                                        results: data.data,
                                        pagination: { more: data.next_page_url !== null }
                                    };
                                },
                                cache: true
                            },
                            placeholder: "{{ trans('admin.select_provider') }}",
                            allowClear: true,
                            dropdownParent: $(content)
                        });

                        // Fulfillment type click handler
                        options.forEach(option => {
                            option.addEventListener('click', () => {
                                const type = option.getAttribute('data-type');
                                const price = document.getElementById('approval-price').value;

                                if (!price || price < 0) {
                                    Swal.showValidationMessage("{{ trans('admin.please_enter_valid_price') }}");
                                    return;
                                }

                                // Highlight selected option
                                options.forEach(o => o.classList.remove('active'));
                                option.classList.add('active');
                                selectedType = type;

                                if (type === 'direct') {
                                    // Direct: submit immediately
                                    document.getElementById('provider-select-section').classList.add('d-none');
                                    Swal.showLoading();
                                    submitApproval(url, price, type, null);
                                } else {
                                    // Provider: show provider selection
                                    document.getElementById('provider-select-section').classList.remove('d-none');
                                }
                            });
                        });

                        // Confirm button for provider selection
                        document.getElementById('btn-confirm-approval').addEventListener('click', () => {
                            const price = document.getElementById('approval-price').value;
                            const providerId = $('#approval-provider-select').val();

                            if (!price || price < 0) {
                                Swal.showValidationMessage("{{ trans('admin.please_enter_valid_price') }}");
                                return;
                            }

                            Swal.showLoading();
                            submitApproval(url, price, 'provider', providerId);
                        });

                        function submitApproval(url, price, type, providerId) {
                            var data = {
                                _token: "{{ csrf_token() }}",
                                fulfillment_type: type,
                                price: price
                            };
                            if (providerId) {
                                data.provider_id = providerId;
                            }

                            $.ajax({
                                url: url,
                                type: 'POST',
                                data: data,
                                success: function (response) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: "{{ trans('admin.updated_successfully') }}",
                                        showConfirmButton: false,
                                        timer: 1500
                                    }).then(() => {
                                        location.reload();
                                    });
                                },
                                error: function (xhr) {
                                    Swal.fire({
                                        icon: 'error',
                                        title: "{{ trans('admin.error') }}",
                                        text: xhr.responseJSON ? xhr.responseJSON.message : "{{ trans('admin.something_went_wrong') }}"
                                    });
                                }
                            });
                        }
                    }
                });
            });

            // Reject Custom Order
            $('#btn-reject-custom').on('click', function () {
                var url = "{{ route('admin.order.reject_custom', $order->id) }}";

                Swal.fire({
                    title: "{{ trans('admin.are_you_sure') }}",
                    text: "{{ trans('admin.reject_custom_order_msg') }}",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ea5455',
                    confirmButtonText: "{{ trans('admin.yes_reject_it') }}",
                    cancelButtonText: "{{ trans('admin.cancel') }}",
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        return $.ajax({
                            url: url,
                            type: 'POST',
                            data: {_token: "{{ csrf_token() }}"}
                        }).catch(xhr => {
                            Swal.showValidationMessage(
                                xhr.responseJSON ? xhr.responseJSON.message : "{{ trans('admin.something_went_wrong') }}"
                            );
                        });
                    },
                    allowOutsideClick: () => !Swal.isLoading()
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            icon: 'success',
                            title: result.value.message,
                            showConfirmButton: false,
                            timer: 1500
                        }).then(() => {
                            location.reload();
                        });
                    }
                });
            });
        });
    </script>
@endsection