@extends('admin.layouts.main')
@section('title', 'Chi tiết đơn hàng')
@section('css')
<link rel="stylesheet" href="/admin_asset/css/show-detail-order.css?v={{ time() }}">
<style>
        /* Styles cho modal sửa đơn hàng */
    .modal-xl {
        max-width: 95%;
    }

    .product-edit-item {
        background-color: #f8f9fa;
        transition: all 0.3s ease;
    }

    .product-edit-item:hover {
        background-color: #e9ecef;
    }

    .quantity-input,
    .price-input {
        font-size: 12px;
    }

    .order-summary {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 5px;
        margin-top: 10px;
    }

    .btn-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1;
        color: #000;
        text-shadow: 0 1px 0 #fff;
        opacity: .5;
        cursor: pointer;
    }

    .btn-close:hover {
        color: #000;
        text-decoration: none;
        opacity: .75;
    }

    /* Custom search results styling */
    .search-result-item {
        padding: 10px;
        border: 1px solid #dee2e6;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .search-result-item:hover {
        background-color: #f8f9fa;
    }

    .search-result-item:first-child {
        border-top-left-radius: 0.375rem;
        border-top-right-radius: 0.375rem;
    }

    .search-result-item:last-child {
        border-bottom-left-radius: 0.375rem;
        border-bottom-right-radius: 0.375rem;
    }

    .search-result-item+.search-result-item {
        border-top: none;
    }

    .product-search-info {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .product-search-details {
        flex: 1;
    }

    .product-search-name {
        font-weight: 600;
        margin-bottom: 2px;
    }

    .product-search-meta {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .loading-spinner {
        text-align: center;
        padding: 20px;
        color: #6c757d;
    }
    .status-form {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 10px 0;
    }

    .status-select {
        /* padding: 6px 12px; */
        font-size: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .status-button {
        padding: 6px 18px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
    }

    .status-button:hover {
        background-color: #0056b3;
    }

    /* Styles for notes section */
    .notes-section textarea {
        resize: vertical;
        min-height: 100px;
    }

    .notes-display {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 15px;
        min-height: 100px;
        font-size: 14px;
        line-height: 1.5;
    }

    .notes-form {
        margin-top: 10px;
    }

    .save-notes-btn {
        background-color: #28a745;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        margin-top: 10px;
    }

    .save-notes-btn:hover {
        background-color: #218838;
    }

    .edit-notes-btn {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        float: right;
    }

    .edit-notes-btn:hover {
        background-color: #0056b3;
    }
</style>
@endsection

@section('content')
<div class="content-wrapper">
    <div class="content">
          @if(session("alert"))
                    <div class="alert alert-success">
                        {{session("alert")}}
                    </div>
                    @elseif(session('error'))
                    <div class="alert alert-warning">
                        {{session("error")}}
                    </div>
                    @endif
        <!-- Order Header -->
        <div class="order-header-wrapper">
            <div class="order-header">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <div class="col-lg-7 col-md-7">
                            <div class="order-id">#{{ $data->code }}</div>
                            <div class="order-meta">
                                {{ $data->created_at->format('d/m/Y - H:i') }}
                            </div>
                            <div class="status-badges">
                                @foreach ($data->listStatus as $status)
                                @if ($status['status'] == $data->status)
                                @php
                                $statusClass = 'status-pending';
                                if ($status['status'] == 2) {
                                $statusClass = 'status-processing';
                                } elseif ($status['status'] > 3) {
                                $statusClass = 'status-completed';
                                } elseif ($status['status'] == -1) {
                                $statusClass = 'status-cancelled';
                                }
                                @endphp
                                <span class="status-badge {{ $statusClass }}">
                                    {{ $status['name'] }}
                                </span>
                                @endif
                                @endforeach

                                <span
                                    class="status-badge {{ $data->thanhtoan == 1 ? 'status-paid' : 'status-unpaid' }}">
                                    {{ $data->thanhtoan == 1 ? 'Đã thanh toán' : 'Chưa thanh toán' }}
                                </span>
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-5 text-end">
                            @if ($data->thanhtoan != 1 && $data->status !=4)
                            <a class="print-btn btn-danger mr-2 edit-order-btn">
                                Sửa đơn hàng
                            </a>
                            @endif
                            {{--<a target="_blank" href="{{ route('admin.transaction.detail.export.pdf', $data->id) }}" class="print-btn mr-2">
                                🖨️ In Hóa đơn
                            </a>
                            <a target="_blank" href="{{ route('admin.transaction.out.stock', $data->id) }}" class="print-btn btn-success">
                                 Xuất kho
                            </a>--}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <!-- Main Content -->
                <div class="col-lg-8 col-md-7">
                    <div class="card">
                        <div class="card-header">
                            📦 Chi tiết sản phẩm
                        </div>

                        <div class="card-body p-0">
                            @foreach ($data->orders as $item)
                            <div class="product-item">
                                <div class="product-image">
                                    <img src="{{ asset($item->avatar_path) }}" alt="{{ $item->name }}"
                                        loading="lazy">
                                </div>
                                <div class="product-details">
                                    <div class="product-title">{{ $item->name }}</div>
                                    <div class="product-meta">
                                        <span><strong>SKU:</strong> {{ $item->product->masp ?? '' }}</span>
                                        @if (isset($item->product->content4) && $item->product->content4 != '')
                                        <span><strong>Quy cách:</strong> {{ $item->product->content4 }}</span>
                                        @endif
                                    </div>
                                    @if (!empty($item->option_name))
                                    <p>Loại: {{ $item->option_name }}</p>
                                    @endif
                                    <div class="product-quantity-price">
                                        <div class="quantity-badge">
                                            SL: {{ $item->quantity }}
                                        </div>
                                        <div class="price-group">
                                            <span class="price-current">{{ number_format($item->new_price) }}
                                        đ</span>
                                            @if ($item->old_price - $item->new_price > 0)
                                            <span class="price-old">{{ number_format($item->old_price) }}
                                                đ</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <!-- Summary Section -->
                        <div class="summary-section">
                            <div class="summary-row">
                                <span class="summary-label">Số lượng sản phẩm</span>
                                <span class="summary-value">{{ $data->quantity }}</span>
                            </div>
                            <!-- <div class="summary-row">
                                <span class="summary-label">Tổng tiền hàng</span>
                                <span class="summary-value">{{ number_format($data->total_origin) }} đ</span>
                            </div> -->
                           
                            <div class="summary-row total">
                                <span class="summary-label">Tổng giá trị đơn hàng</span>
                                <span class="summary-value">{{ number_format($data->total) }} đ</span>
                            </div>
                            @php
                            $thanhtoan = App\Models\Setting::find($data->httt);
                            @endphp
                            @isset($thanhtoan)
                            <div class="payment-method">
                                <div class="payment-label">Hình thức thanh toán: {{ $thanhtoan->name }}</div>
                                <!-- <div class="payment-value"></div> -->
                            </div>
                            @endisset
                            <div class="row" style="gap:10px">
                                @if ($data->status !== -1)
                                <form id="confirm-form2" style="width:100%;"
                                    action="{{ route('admin.product.load.thanhtoan2', $data->id) }}" method="GET">
                                    <button type="button"
                                        class="btn {{ $data->thanhtoan == 1 ? 'btn-success' : 'btn-warning' }} w-100 mt-3"
                                        id="confirm-button2">
                                        {{ $data->thanhtoan == 1 ? '✓ Đã xác nhận thanh toán' : 'Xác nhận thanh toán' }}
                                    </button>
                                </form>
                                @endif
                                {{--@if($data->thanhtoan == 0)
                                <div style="width:30%;">
                                    <a href="{{ route('payment.momo.retry', $data->code) }}"
                                        class="btn btn-info w-100 mt-3 copy-link"
                                        data-link="{{ route('payment.momo.retry', $data->code) }}">
                                        Copy Link
                                    </a>
                                </div>
                                @endif--}}
                            </div>
                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            📝 Ghi chú đơn hàng
                            <button type="button" class="edit-notes-btn" id="edit-notes-btn">
                                Chỉnh sửa
                            </button>
                        </div>
                        <div class="card-body">
                            <div id="notes-display" class="notes-display">
                                {!! $data->note ?? 'Chưa có ghi chú nào cho đơn hàng này.' !!}
                            </div>
                            <div id="notes-form" class="notes-form" style="display: none;">
                                <form action="{{route('admin.transaction.note',$data->id)}}" method="POST" id="form-note">
                                    @csrf
                                    <textarea name="notes" class="form-control tinymce_editor_init" id="notes" placeholder="Nhập ghi chú cho đơn hàng...">{{ $data->note ?? '' }}</textarea>
                                    <div class="mt-2">
                                        <button type="submit" class="save-notes-btn" id="click-form-note">Lưu ghi chú</button>
                                        <button type="button" class="btn btn-secondary ml-2 " id="cancel-edit-btn">Hủy</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4 col-md-5">
                    <!-- Order Actions -->
                    <div class="card">
                        <div class="card-header">
                            ⚡ Xác Thực Đơn Hàng
                        </div>
                        <div class="card-body">

                            <small class="text-muted">Chuyển trạng thái đơn hàng</small>
                            <div class="action-buttons mt-0">
                                @if ($data->status !== -1 && $data->status !== 4)

                                <form id="confirm-form1"
                                    action="{{ route('admin.transaction.loadNextStepStatus2', $data->id) }}"
                                    method="GET" class="status-form w-100">
                                    <div class="w-100">
                                        <select name="status" id="statusSelect" class="status-select form-control">
                                            @foreach ($data->listStatus as $status)
                                            <option value="{{ $status['status'] }}"
                                                {{ $status['status'] == $data->status ? 'selected' : '' }}>
                                                {{ $status['name'] }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="w-100">
                                        <button type="submit" class="status-button btn btn-primary">Cập
                                            nhật</button>
                                    </div>
                                </form>
                                @else
                                <div
                                    style="margin-top: 10px; padding: 10px; background: #e9f7ef; border: 1px solid #d4edda; border-radius: 4px; color: #155724;">
                                    @if ($data->status == -1)
                                    Đơn hàng đã bị hủy
                                    @else
                                    Đơn hàng đã hoàn tất
                                    @endif
                                </div>
                                @endif

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

                    <!-- Customer Info -->
                    <div class="card">
                        <div class="card-header">
                            👤 Thông Tin Người Mua
                        </div>
                        <div class="card-body">
                            <div class="info-section">

                                <div class="info-title">{{ $data->user->name ?? $data->name }}</div>
                                <div class="info-item">
                                    <span class="info-label">Đã đặt</span>
                                    <span class="info-value">{{ $data->quantity }} sản phẩm</span>
                                </div>
                                <div class="info-item">
                                    <span class="info-label">Tổng tiền</span>
                                    <span class="info-value">{{ number_format($data->total) }} đ</span>
                                </div>
                                @if ($data->status !== -1 && $data->status !== 4)
                                <form id="confirm-form3"
                                    action="{{ route('admin.transaction.loadNextStepStatus3', $data->id) }}"
                                    method="GET" style="flex: 1;">
                                    <button type="button" class="btn btn-danger w-100" id="confirm-button3">
                                        Hủy đơn
                                    </button>
                                </form>
                                @endif
                            </div>
                        </div>
                    </div>

                  

                    <!-- Delivery Info -->
                    <div class="card">
                        <div class="card-header">
                            🚚 Thông tin giao hàng @if ($data->vat == 1)
                            (Có VAT) @endif
                        </div>
                        <div class="card-body">
                            <div class="contact-item">
                                <span><strong>Họ Tên:</strong> {{ $data->name }}</span>
                            </div>
                            {{-- --}}
                            <div class="contact-item">
                                <span><strong>Số điện thoại:</strong> {{ $data->phone }}</span>
                            </div>
                                @if ($data->email && $data->email != '')
                            <div class="contact-item">
                                <span><strong>Email:</strong> {{ $data->email }}</span>
                            </div>
                            @endif

                          

                            <div class="address-section">
                                <div class="address-label">📍 Địa chỉ giao hàng </div>
                                <div class="address-text">{{ $data->address_detail }}</div>
                            </div>
                            @if ($data->vat == 1)
                            <div class="address-section">
                                <div class="address-label">📍 Xuất hóa đơn VAT</div>
                                <div class="contact-item">
                                    <span><strong>Tên công ty:</strong> {{ $data->user->company }}</span>
                                </div>
                                <div class="contact-item">
                                    <span><strong>Mã số thuế:</strong> {{ $data->user->tax }}</span>
                                </div>
                                <div class="contact-item">
                                    <span><strong>Địa chỉ công ty:</strong>
                                        {{ $data->user->address_company }}</span>
                                </div>
                                <div class="contact-item">
                                    <span><strong>Email nhận hóa đơn :
                                        </strong>{{ $data->user->email_bill }}</span>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Sửa Đơn Hàng -->
<div class="modal fade" id="editOrderModal" tabindex="-1" aria-labelledby="editOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editOrderModalLabel">
                    🛠️ Sửa Đơn Hàng #{{ $data->code }}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editOrderForm" action="{{route('admin.transaction.update',$data->id)}}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <!-- Phần sản phẩm -->
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">📦 Sản phẩm trong đơn hàng</h6>
                                    <button type="button" class="btn btn-sm btn-success" id="addProductBtn">
                                        + Thêm sản phẩm
                                    </button>
                                </div>
                                <div class="card-body">
                                    <div id="productsList">
                                        @foreach ($data->orders as $index => $item)
                                        <div class="product-edit-item mb-3 p-3 border rounded" data-index="{{ $index }}">
                                            <div class="row align-items-center">
                                                <div class="col-md-1">
                                                    <img src="{{ asset($item->avatar_path) }}" alt="{{ $item->name }}"
                                                        class="img-fluid rounded" style="max-height: 60px;">
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="product-name">{{ $item->name }}</div>
                                                    <small class="text-muted">SKU: {{ $item->product->masp ?? '' }}</small>
                                                    <input type="hidden" name="products[{{ $index }}][id]" value="{{ $item->id }}">
                                                    <input type="hidden" name="products[{{ $index }}][product_id]" value="{{ $item->product_id }}">
                                                </div>
                                                <div class="col-md-2">
                                                    <label class="form-label">Số lượng</label>
                                                    <input type="number" class="form-control quantity-input"
                                                        name="products[{{ $index }}][quantity]" value="{{ $item->quantity }}" min="1">
                                                </div>
                                                <div class="col-md-2">
                                                    <label class="form-label">Giá bán</label>
                                                    <input type="number" class="form-control price-input"
                                                        name="products[{{ $index }}][new_price]" value="{{ $item->new_price }}">
                                                </div>
                                                <div class="col-md-2">
                                                    <label class="form-label">Thành tiền</label>
                                                    <div class="subtotal text-primary fw-bold">
                                                        {{ number_format($item->new_price * $item->quantity) }}đ
                                                    </div>
                                                    <input type="hidden" name="products[{{ $index }}][priceChange]" class="priceChange" value="{{ $item->new_price * $item->quantity }}">
                                                </div>
                                                <div class="col-md-1">
                                                    <button type="button" class="btn btn-sm btn-danger remove-product">x</button>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach

                                    </div>
                                </div>
                                <div class="card mt-3" id="addProductCard" style="display: none;">

                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">Tìm kiếm sản phẩm</label>
                                        <input type="text" id="productSearch" class="form-control"
                                            placeholder="Nhập tên sản phẩm hoặc mã SKU...">
                                        <div id="searchResults" class="list-group mt-2" style="display: none; max-height: 250px; overflow-y: auto;"></div>
                                    </div>

                                    <div class="mb-3" id="selectedProductInfo" style="display: none;">
                                        <div class="card bg-light">
                                            <div class="card-body p-3">
                                                <div class="row align-items-center">
                                                    <div class="col-3">
                                                        <img id="selectedProductImage" src="" alt="" class="img-fluid rounded" style="max-height: 60px;">
                                                    </div>
                                                    <div class="col-9">
                                                        <div id="selectedProductName" class="fw-bold"></div>
                                                        <div id="selectedProductSKU" class="text-muted small"></div>
                                                        <div id="selectedProductPrice" class="text-primary"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" id="productQuantityPrice" style="display: none;">
                                        <div class="col-6">
                                            <label class="form-label">Số lượng</label>
                                            <input type="number" id="newProductQuantity" class="form-control" value="1" min="1">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label">Giá bán</label>
                                            <input type="number" id="newProductPrice" class="form-control" min="0">
                                        </div>
                                    </div>

                                    <div class="mt-3" id="addProductBtnContainer" style="display: none;">
                                        <button type="button" class="btn btn-success w-100" id="confirmAddProduct">
                                            ➕ Thêm vào đơn hàng
                                        </button>
                                        <button type="button" class="btn btn-secondary w-100 mt-2" id="cancelAddProduct">
                                            ❌ Hủy
                                        </button>
                                    </div>
                                </div>
                            </div>
                            </div>

                            <!-- Thông tin thanh toán -->
                            <div class="card mt-3">
                                <div class="card-header">
                                    💰 Thông tin thanh toán
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="form-label">Hình thức thanh toán</label>
                                            <select name="payment_method" class="form-select" style="padding: 5px">
                                                @foreach ($thanhToanAll->childs()->orderBy('order')->orderByDesc('created_at')->get() as $item)
                                                <option @selected($data->httt == $item->id) value="{{ $item->id }}">{{ $item->name }}</option>
                                                @endforeach

                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="order-summary">
                                                <b>Tổng cộng:</b>
                                                       <span id="finalTotal">{{ number_format($data->total) }}đ</span>
                                            </div>
                                        </div>
                                        <!-- <div class="col-md-6">
                                            <label class="form-label">Phí vận chuyển</label>
                                            <input type="number" name="shipping_fee" class="form-control"
                                                value="{{ $data->total_ship ?? 0 }}" min="0">
                                        </div> -->
                                    </div>
                                    <div class="row mt-3">
                                        <!-- <div class="col-md-6">
                                            <label class="form-label">Giảm giá</label>
                                            <input type="number" name="discount" class="form-control"
                                                value="{{ $data->discount }}" min="0">
                                        </div> -->
                                        <div class="col-md-6">
                                            <!-- <div class="order-summary"> -->
                                                <!-- <div class="d-flex justify-content-between">
                                                    <span>Tổng tiền:</span>
                                                    <span id="productTotal">{{ number_format($data->total_origin) }}đ</span>
                                                </div> -->
                                                <!-- <div class="d-flex justify-content-between">
                                                    <span>Phí vận chuyển:</span>
                                                    <span id="shippingTotal">{{ number_format($data->total_ship ?? 0) }}đ</span>
                                                </div>
                                                <div class="d-flex justify-content-between">
                                                    <span>Giảm giá:</span>
                                                    <span id="discountTotal">{{ number_format($data->discount) }}đ</span>
                                                </div> -->
                                                <!-- <hr> -->
                                                <!-- <div class="d-flex justify-content-between fw-bold">
                                                    <span>Tổng cộng:</span>
                                                    <span id="finalTotal">{{ number_format($data->total) }}đ</span>
                                                </div> -->
                                            <!-- </div> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Thông tin giao hàng -->
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-header">
                                    🚚 Thông tin giao hàng
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">Họ tên người nhận</label>
                                        <input type="text" name="customer_name" class="form-control"
                                            value="{{ $data->name }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Số điện thoại</label>
                                        <input type="text" name="customer_phone" class="form-control"
                                            value="{{ $data->phone }}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Email</label>
                                        <input type="email" name="customer_email" class="form-control"
                                            value="{{ $data->email }}">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Địa chỉ giao hàng</label>
                                        <textarea name="shipping_address" class="form-control" rows="3" required>{{ $data->address_detail }}</textarea>
                                    </div>
                                    {{--<div class="mb-3">
                                        <label class="form-label">Hình thức giao hàng</label>
                                        <select name="shipping_method" class="form-select">
                                            @foreach(config('web_default.shippingMethods') as $key => $method)
                                            <option value="{{ $key }}" {{ $data->ship_method == $key ? 'selected' : '' }}>
                                                {{ $method['name'] }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>--}}
                                </div>
                            </div>

                            <!-- Thêm sản phẩm mới -->
                            
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary close-form-edit" data-bs-dismiss="modal">Hủy</button>
                    <button type="submit" class="btn btn-primary">💾 Lưu thay đổi</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
    $(document).ready(function() {
        function escapeHtml(text) {
            if (typeof text !== 'string') return '';
            return $('<div>').text(text).html();
        }

       
       function numberFormat(num) {
            return new Intl.NumberFormat('vi-VN', {
                style: 'currency',
                currency: 'VND',
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
            }).format(num);
        }

        let productIndex = {{
                count($data -> orders)
            }};

        let selectedProductData = null;
        let searchTimeout = null;

            $('.close-form-edit').on('click', function(e) {
                e.preventDefault();
                $('#editOrderModal').modal('hide');
            });
        // Mở modal sửa đơn hàng
        $('.edit-order-btn').on('click', function(e) {
            e.preventDefault();
            $('#editOrderModal').modal('show');
        });


        // Hiển thị form thêm sản phẩm
        $('#addProductBtn').on('click', function() {
            $('#addProductCard').show();
            $('#productSearch').focus();
            resetProductSelection();
        });

        // Tìm kiếm sản phẩm
        $('#productSearch').on('input', function() {
            const query = $(this).val().trim();

            if (searchTimeout) clearTimeout(searchTimeout);

            if (query.length < 2) {
                $('#searchResults').hide().empty();
                resetProductSelection();
                return;
            }

            $('#searchResults').html('<div class="loading-spinner">🔍 Đang tìm kiếm...</div>').show();

            searchTimeout = setTimeout(() => {
                searchProducts(query);
            }, 300);
        });

        function searchProducts(query) {
            $.ajax({
                url: '{{ route("admin.product.search") }}',
                method: 'GET',
                data: {
                    q: query,
                    limit: 10
                },
                success: function(response) {
                    try {
                        const products = response.data || response;
                        displaySearchResults(products);
                    } catch (e) {
                        $('#searchResults').html('<div class="text-danger">❌ Lỗi phân tích dữ liệu</div>');
                        console.error('JSON Parse Error:', e);
                    }
                },
                error: function() {
                    $('#searchResults').html('<div class="text-danger">❌ Lỗi khi tìm kiếm</div>');
                }
            });
        }

        function displaySearchResults(products) {
            const resultsContainer = $('#searchResults');
            resultsContainer.empty();

            if (!products || products.length === 0) {
                resultsContainer.html('<div class="text-muted">😕 Không tìm thấy sản phẩm nào</div>').show();
                return;
            }

            products.forEach(product => {
                const price = product.price || 0;
                const imageSrc = '/'+product.avatar_path || '/images/no-image.png';

                const item = $(`
                <div class="search-result-item"
                    data-id="${product.id}"
                    data-name="${escapeHtml(product.name)}"
                    data-price="${price}"
                    data-image="${imageSrc}"
                    data-sku="${escapeHtml(product.masp || '')}">
                    <div class="product-search-info d-flex">
                        <img src="${imageSrc}" alt="${escapeHtml(product.name)}"
                            style="width: 50px; height: 50px; object-fit: cover; border-radius: 6px;"
                            onerror="this.src='/images/no-image.png'">
                        <div class="ms-2">
                            <div class="fw-bold">${escapeHtml(product.name)}</div>
                            <div class="text-muted">SKU: ${escapeHtml(product.masp || 'N/A')} | Giá: ${numberFormat(price)}</div>
                        </div>
                    </div>
                </div>
            `);

                resultsContainer.append(item);
            });

            resultsContainer.show();
        }

        // Chọn sản phẩm
        $(document).on('click', '.search-result-item', function() {
            if ($(this).hasClass('text-muted') || $(this).hasClass('text-danger')) return;

            selectedProductData = {
                id: $(this).data('id'),
                name: $(this).data('name'),
                price: $(this).data('price'),
                image: $(this).data('image'),
                sku: $(this).data('sku')
            };

            $('#productSearch').val(selectedProductData.name);
            $('#searchResults').hide();
            showSelectedProduct(selectedProductData);
        });

        function showSelectedProduct(product) {
            $('#selectedProductImage').attr('src', product.image).attr('alt', product.name);
            $('#selectedProductName').text(product.name);
            $('#selectedProductSKU').text('SKU: ' + (product.sku || 'N/A'));
            $('#selectedProductPrice').text('Giá bán: ' + numberFormat(product.price));
            $('#newProductPrice').val(product.price);

            $('#selectedProductInfo').show();
            $('#productQuantityPrice').show();
            $('#addProductBtnContainer').show();
        }

        function resetProductSelection() {
            selectedProductData = null;
            $('#selectedProductInfo, #productQuantityPrice, #addProductBtnContainer').hide();
            $('#newProductQuantity').val(1);
            $('#newProductPrice').val('');
        }

        // Click ngoài để ẩn kết quả
        $(document).on('click', function(e) {
            if (!$(e.target).closest('#productSearch, #searchResults').length) {
                $('#searchResults').hide();
            }
        });
        $('#editOrderForm').on('submit', function(e) {
            e.preventDefault();
            const form = this;
            Swal.fire({
                title: 'Xác nhận?',
                text: 'Bạn có muốn lưu thay đổi đơn hàng?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Cập nhật',
                cancelButtonText: 'Hủy'
            }).then((result) => {
                if (result.isConfirmed) {
                    const data = $(form).serializeArray();
                    form.submit();
                }
            });
        });


        // Thêm sản phẩm
        $('#confirmAddProduct').on('click', function() {
            if (!selectedProductData) {
                return Swal.fire('Lỗi', 'Vui lòng chọn sản phẩm trước khi thêm.', 'error');
            }

            const quantity = parseInt($('#newProductQuantity').val()) || 1;
            const price = parseInt($('#newProductPrice').val()) || selectedProductData.price;

            if (quantity < 1 || price < 0) {
                return Swal.fire('Lỗi', 'Số lượng và giá không hợp lệ.', 'error');
            }

            const exists = $(`.product-edit-item input[name$="[product_id]"][value="${selectedProductData.id}"]`).closest('.product-edit-item');

            if (exists.length) {
                return Swal.fire({
                    title: 'Sản phẩm đã có',
                    text: 'Bạn có muốn cập nhật số lượng không?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Cập nhật',
                    cancelButtonText: 'Hủy'
                }).then((res) => {
                    if (res.isConfirmed) {
                        const currentQty = parseInt(exists.find('.quantity-input').val()) || 0;
                        exists.find('.quantity-input').val(currentQty + quantity).trigger('input');
                        resetProductSelection();
                        $('#addProductCard').hide();
                    }
                });
            } else {
                addProductToOrder({
                    id: selectedProductData.id,
                    name: selectedProductData.name,
                    price,
                    image: selectedProductData.image,
                    sku: selectedProductData.sku,
                    quantity
                });

                resetProductSelection();
                $('#addProductCard').hide();
                $('#productSearch').val('');
            }
        });

        $('#cancelAddProduct').on('click', function() {
            resetProductSelection();
            $('#addProductCard').hide();
            $('#productSearch').val('');
            $('#searchResults').hide();
        });

        // Thêm sản phẩm vào danh sách
        function addProductToOrder(product) {
            const html = `
        <div class="product-edit-item mb-3 p-3 border rounded" data-index="${productIndex}">
            <div class="row align-items-center">
                <div class="col-md-1">
                    <img src="${product.image}" alt="${escapeHtml(product.name)}"
                        class="img-fluid rounded" style="max-height: 60px;"
                        onerror="this.src='/images/no-image.png'">
                </div>
                <div class="col-md-4">
                    <div class="product-name">${escapeHtml(product.name)}</div>
                    <small class="text-muted">SKU: ${escapeHtml(product.sku)}</small>
                    <input type="hidden" name="products[${productIndex}][product_id]" value="${product.id}">
                    <input type="hidden" name="products[${productIndex}][is_new]" value="1">
                </div>
                <div class="col-md-2">
                    <input type="number" class="form-control quantity-input"
                        name="products[${productIndex}][quantity]"
                        value="${product.quantity}" min="1">
                </div>
                <div class="col-md-2">
                    <input type="number" class="form-control price-input"
                        name="products[${productIndex}][new_price]"
                        value="${product.price}" min="0">
                </div>
                <div class="col-md-2 subtotal text-primary fw-bold">
                    ${numberFormat(product.price * product.quantity)}
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-sm btn-danger remove-product">✕</button>
                </div>
            </div>
        </div>`;
            $('#productsList').append(html);
            productIndex++;
            updateOrderTotal();

            Swal.fire('Thành công!', 'Đã thêm sản phẩm vào đơn hàng', 'success');
        }

        // Xóa sản phẩm
        $(document).on('click', '.remove-product', function() {
            const name = $(this).closest('.product-edit-item').find('.product-name').text();

            Swal.fire({
                title: 'Xác nhận xóa?',
                text: `Xóa sản phẩm "${name}" khỏi đơn hàng?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Xóa',
                cancelButtonText: 'Hủy'
            }).then((res) => {
                if (res.isConfirmed) {
                    $(this).closest('.product-edit-item').remove();
                    updateOrderTotal();
                    Swal.fire('Đã xóa!', '', 'success');
                }
            });
        });

        // Cập nhật tổng tiền khi thay đổi số lượng hoặc giá
        $(document).on('input', '.quantity-input, .price-input', function() {
            const row = $(this).closest('.product-edit-item');
            updateProductSubtotal(row);
            updateOrderTotal();
        });

        $('input[name="shipping_fee"], input[name="discount"]').on('input', function() {
            updateOrderTotal();
        });

        function updateProductSubtotal(row) {
            const quantityInput = row.find('.quantity-input');
            const priceInput = row.find('.price-input');

            let quantity = parseInt(quantityInput.val()) || 0;
            let price = parseInt(priceInput.val()) || 0;

            quantityInput.val(quantity);
            priceInput.val(price);

            const total = quantity * price;

            // Cập nhật lại hidden input
            row.find('input[name*="[priceChange]"]').val(total);

            // Cập nhật lại text hiển thị
            row.find('.subtotal').text(numberFormat(total));
        }


        // Tính và cập nhật tổng đơn hàng
        function updateOrderTotal() {
            let total = 0;

            $('.product-edit-item').each(function() {
                const quantity = parseInt($(this).find('.quantity-input').val()) || 0;
                const price = parseInt($(this).find('.price-input').val()) || 0;
                total += quantity * price;
            });

            const shipping = parseInt($('input[name="shipping_fee"]').val()) || 0;
            const discount = parseInt($('input[name="discount"]').val()) || 0;
            const final = Math.max(0, total + shipping - discount);

            $('#productTotal').text(numberFormat(total));
            $('#shippingTotal').text(numberFormat(shipping));
            $('#discountTotal').text(numberFormat(discount));
            $('#finalTotal').text(numberFormat(final));
        }





        $('#editOrderModal').on('hidden.bs.modal', function() {
            resetProductSelection();
            $('#addProductCard').hide();
        });
    });
</script>

@endsection

@section('js')
<!-- SweetAlert2 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@if (session('success'))
<script>
    Swal.fire({
        icon: 'success',
        title: 'Cập nhật thành công!',
        text: "{{ session('success') }}",
        confirmButtonText: 'OK',
        confirmButtonColor: '#16a34a'
    });
</script>
@endif


@if (session('errors'))
<script>
    Swal.fire({
        icon: 'error',
        title: 'Có lỗi xảy ra!',
        text: "{{ session('errors') }}",
        confirmButtonText: 'OK',
        confirmButtonColor: '#dc2626'
    });
</script>
@endif
<script>
    $(document).ready(function() {
        $('#edit-notes-btn').on('click', function() {
            $('#notes-display').hide();
            $('#notes-form').show();
            $(this).hide();
        });

        $('#cancel-edit-btn').on('click', function() {
            $('#notes-display').show();
            $('#notes-form').hide();
            $('#edit-notes-btn').show();
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Xác nhận gửi đơn vị vận chuyển
        const shippingForm = document.getElementById('shipping-form');
        if (shippingForm) {
            shippingForm.addEventListener('submit', function (e) {
                const confirmed = confirm('Bạn có chắc chắn muốn gửi đơn hàng cho đơn vị vận chuyển?');
                if (!confirmed) {
                    e.preventDefault();
                }
            });
        }

        const confirmButtons = [
            {
                id: 'confirm-button1',
                formId: 'confirm-form1',
                title: 'Xác nhận chuyển trạng thái?',
                text: 'Bạn có chắc chắn muốn chuyển trạng thái đơn hàng?',
                icon: 'question',
                confirmText: 'Xác nhận',
                confirmColor: '#1e293b'
            },
            {
                id: 'confirm-button2',
                formId: 'confirm-form2',
                title: 'Xác nhận thanh toán?',
                text: 'Bạn có chắc chắn muốn thay đổi trạng thái thanh toán?',
                icon: 'question',
                confirmText: 'Xác nhận',
                confirmColor: '#16a34a'
            },
            {
                id: 'confirm-button3',
                formId: 'confirm-form3',
                title: 'Hủy đơn hàng?',
                text: 'Bạn có chắc chắn muốn hủy đơn hàng này? Hành động này không thể hoàn tác!',
                icon: 'warning',
                confirmText: 'Hủy đơn',
                confirmColor: '#dc2626'
            }
        ];

        confirmButtons.forEach(button => {
            const element = document.getElementById(button.id);
            const form = document.getElementById(button.formId);

            if (element && form) {
                element.addEventListener('click', function (e) {
                    e.preventDefault();

                    Swal.fire({
                        title: button.title,
                        text: button.text,
                        icon: button.icon,
                        showCancelButton: true,
                        confirmButtonColor: button.confirmColor,
                        cancelButtonColor: '#6b7280',
                        confirmButtonText: button.confirmText,
                        cancelButtonText: 'Hủy bỏ',
                        reverseButtons: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            form.submit();
                        }
                    });
                });
            }
        });
    });
</script>
<script>
    $(document).ready(function () {
        $('#confirm-form-tran').on('submit', function (e) {
            e.preventDefault(); 

            Swal.fire({
                title: 'Xác nhận gửi mail?',
                text: "Bạn có chắc muốn gửi lại mail giao hàng?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Có, gửi ngay!',
                cancelButtonText: 'Hủy'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = $(this);
                    const actionUrl = form.attr('action');

                    $.ajax({
                        url: actionUrl,
                        method: 'GET',
                        success: function (response) {
                            if (response.sucesss) {
                                Swal.fire({
                                    icon: 'success',
                                    title: response.html,
                                    showConfirmButton: false,
                                    timer: 1500
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Gửi không thành công!',
                                    text: 'Vui lòng thử lại.',
                                });
                            }
                        },
                        error: function () {
                            Swal.fire({
                                icon: 'error',
                                title: 'Lỗi máy chủ!',
                                text: 'Không thể gửi mail. Vui lòng thử lại sau.',
                            });
                        }
                    });
                }
            });
        });
    });
</script>

<script>
    $(function() {
        $('#click-form-note').on('click', function(e) {
            e.preventDefault();
            $('#form-note').trigger('submit');
        });
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const copyButtons = document.querySelectorAll('.copy-link');

        copyButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault(); // Không chuyển trang
                const link = this.getAttribute('data-link');

                navigator.clipboard.writeText(link).then(() => {
                    // Hiện thông báo bằng SweetAlert2
                    Swal.fire({
                        icon: 'success',
                        title: 'Đã copy liên kết!',
                        text: link,
                        timer: 2000,
                        showConfirmButton: false
                    });
                }).catch(err => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Lỗi',
                        text: 'Không thể copy liên kết!',
                    });
                });
            });
        });
    });
</script>
@endsection