@extends('layouts.app')

@section('title')
    {{ __('card') }}
@endsection

@section('card')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Thẻ cào') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('app.index') }}">{{ __('home') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('Thẻ cào') }}</li>
                    </ol>
                </div>
            </div>
            <hr>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="card">
            <div id="loading-overlay" class="overlay d-none">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
                <div class="loading-text">{{ __('Đang xử lí, vui lòng chờ...') }}</div>
            </div>
            <div class="card-body" style="background-color: #9fb69f">
                <form class="row" id="search-card">
                    @csrf
                    @role('admin|support')
                        <div class="col-lg-2">
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">{{ __('partner') }}</span>
                                    </div>
                                    <select id="partner" name="partner" class="select2 form-control">
                                        <option value="">{{ __('select') }}</option>
                                        @foreach (\App\Models\User\User::getPartners() as $partner)
                                            <option value="{{ $partner->id }}">{{ $partner->username }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endrole
                    @role('accountant')
                        <div class="col-lg-2">
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">{{ __('partner') }}</span>
                                    </div>
                                    <select name="partner" class="form-control">
                                        <option value="">{{ __('select') }}</option>
                                        @foreach (\App\Models\User\User::getPartnerAccountantCanView() as $partner)
                                            <option value="{{ $partner->id }}">{{ $partner->username }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endrole
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('card_type') }}</span>
                                </div>
                                <select name="card_type" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    <option value="VIETTEL">{{ __('viettel_card') }}</option>
                                    <option value="VINAPHONE">{{ __('vinaphone_card') }}</option>
                                    <option value="MOBIPHONE">{{ __('mobifone_card') }}</option>
                                    <option value="VIETNAMOBILE">{{ __('vietnamobile_card') }}</option>
                                    <option value="ZING">{{ __('zing_card') }}</option>
                                    <option value="VCOIN">{{ __('vcoin_card') }}</option>
                                    <option value="GARENA">{{ __('garena_card') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('status') }}</span>
                                </div>
                                <select name="status" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    <option value="pending">{{ __('pending') }}</option>
                                    <option value="failed">{{ __('failed') }}</option>
                                    <option value="success">{{ __('success') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('card_value') }}</span>
                                </div>
                                <select name="card_value" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    <option value="10000">10.000 VND</option>
                                    <option value="20000">20.000 VND</option>
                                    <option value="30000">30.000 VND</option>
                                    <option value="50000">50.000 VND</option>
                                    <option value="100000">100.000 VND</option>
                                    <option value="200000">200.000 VND</option>
                                    <option value="300000">300.000 VND</option>
                                    <option value="500000">500.000 VND</option>
                                    <option value="1000000">1.000.000 VND</option>
                                    <option value="2000000">2.000.000 VND</option>
                                    <option value="3000000">3.000.000 VND</option>
                                    <option value="5000000">5.000.000 VND</option>
                                    <option value="10000000">10.000.000 VND</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    @role('admin|support')
                        <div class="col-lg-2">
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">{{ __('Loại xử lý') }}</span>
                                    </div>
                                    <select name="operation" class="form-control">
                                        <option value="">{{ __('select') }}</option>
                                        <option value="manual">{{ __('Thủ công') }}</option>
                                        <option value="auto">{{ __('Tự động') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endrole
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('order_id') }}</span>
                                </div>
                                <input type="text" class="form-control" name="card_id"
                                    placeholder="{{ __('order_id') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('request_id') }}</span>
                                </div>
                                <input type="text" class="form-control" name="request_id"
                                    placeholder="{{ __('request_id') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('card_code') }}</span>
                                </div>
                                <input type="text" class="form-control" name="card_no"
                                    placeholder="{{ __('insert_card_code') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('card_serial') }}</span>
                                </div>
                                <input type="text" class="form-control" name="serial_no"
                                    placeholder="{{ __('insert_card_serial') }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('create_time') }}</span>
                                </div>

                                <span class="input-group-text">{{ __('from') }}</span>
                                <input type="text" class="form-control" name="from_create_date" id="from_create_date"
                                    autocomplete="off" placeholder="dd-mm-yyyy HH:mm:ss">

                                <span class="input-group-text">{{ __('to') }}</span>
                                <input type="text" class="form-control" name="to_create_date" id="to_create_date"
                                    autocomplete="off" placeholder="dd-mm-yyyy HH:mm:ss">
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="form-group">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ __('complete_time') }}</span>
                                </div>

                                <span class="input-group-text">{{ __('from') }}</span>
                                <input type="text" class="form-control" name="from_complete_date"
                                    id="from_complete_date" autocomplete="off" placeholder="dd-mm-yyyy HH:mm:ss">

                                <span class="input-group-text">{{ __('to') }}</span>
                                <input type="text" class="form-control" name="to_complete_date" id="to_complete_date"
                                    autocomplete="off" placeholder="dd-mm-yyyy HH:mm:ss">
                            </div>
                        </div>
                    </div>
                    @role('admin|support')
                        <div class="col-lg-2">
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">{{ __('processing_gate') }}</span>
                                    </div>
                                    <select name="gate" class="form-control">
                                        <option value="">{{ __('select') }}</option>
                                        @foreach (\App\Models\Gate\Gate::all() as $item)
                                            <option value="{{ $item->name }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    @endrole

                    <div class="col-lg-4">
                        <button type="submit" class="btn btn-primary" id="btn-search"><i
                                class="fa fa-search"></i>{{ __('search') }}</button>
                        <button type="submit" class="btn btn-secondary"
                            id="btn-total-card">{{ __('report') }}</button>
                        <button type="button" class="btn btn-danger mt-1" id="btn-reset">
                            <i class="fa fa-refresh"></i> {{ __('reset') }}
                        </button>
                    </div>
                    <span id="date-error" class="text-danger"></span>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('list') }}</h3>
                <div class="card-tools">
                    @if (canSeeMenu('card_order_send'))
                        <button id="send-card-btn" class="btn btn-primary btn-sm">
                            <i class="fa-solid fa-paper-plane"></i> {{ __('send_card') }}
                        </button>
                    @endif
                    @role('admin|support|partner')
                        <button id="refresh-btn" class="btn btn-info btn-sm" data-auto-refresh="false">
                            <i class="fa fa-refresh" aria-hidden="true"></i>
                            <span id="refresh-text">{{ __('Tự động làm mới: Tắt') }}</span>
                        </button>
                    @endrole
                    <a class="btn btn-sm btn-secondary" id="export-card" href="javascript:void(0)"><i
                            class="fa-solid fa-file-excel"></i>{{ __('export_excel') }}</a>
                </div>
            </div>

            <div id="loadingOverlay" style="display: none;">
                <div class="loading-spinner"></div>
            </div>
            @if (Session::has('success'))
                <div id="message-alert" class="alert alert-success">
                    {{ Session::get('success') }}
                </div>
            @endif
            @if (Session::has('error'))
                <div id="message-alert" class="alert alert-danger">
                    {{ Session::get('error') }}
                </div>
            @endif

            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="listCards">
                        <thead style="text-align: center;  background-color: #b6b9b6">
                            <tr>
                                <th>{{ __('order_id') }}</th>
                                <th>{{ __('request_id') }}</th>
                                <th>{{ __('partner') }}</th>
                                <th>{{ __('card_type') }}</th>
                                <th>{{ __('card_code') }}</th>
                                <th>{{ __('card_serial') }}</th>
                                <th>{{ __('denomination_sent') }}</th>
                                <th>{{ __('denomination_received') }}</th>
                                <th>{{ __('fee') }}</th>
                                <th>{{ __('balance') }}</th>
                                <th>{{ __('status') }}</th>
                                <th>{{ __('create_time-complete_time') }}</th>
                                <th>{{ __('response') }}</th>
                                <th>{{ __('message') }}</th>
                                <th>{{ __('handle') }}</th>
                                <th>{{ __('handler') }}</th>
                                <th>{{ __('processing_gate') }}</th>
                                <th>{{ __('callback') }}</th>
                                <th>{{ __('operation') }}</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

            {{-- Modal --}}
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight"
                aria-labelledby="offcanvasRightLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasRightLabel">{{ __('Chỉnh sửa thẻ') }}</h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>
                <hr>
                <div class="offcanvas-body">
                    <form class="row" method="POST" id="updateForm">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="card_id" id="card_id">
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group col-lg-6">
                                    <label for="partner">{{ __('partner') }}</label>
                                    <input type="text" class="form-control" id="partner" disabled>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="request-id">{{ __('request_id') }}</label>
                                    <input type="text" class="form-control" id="request_id" disabled>
                                </div>

                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                {{-- Chỉ admin được sửa ba trường này. Quyền khác vẫn xem được
                                     nhưng ô bị disabled nên trình duyệt không gửi lên; phía
                                     CardOrderController::update() cũng bỏ qua nếu không phải admin. --}}
                                <div class="form-group col-lg-4">
                                    <label for="card_no">{{ __('card_code') }}</label>
                                    <input type="text" class="form-control" id="card_no"
                                        @role('admin') name="card_no" @else disabled @endrole>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label for="serial_no">{{ __('card_serial') }}</label>
                                    <input type="text" class="form-control" id="serial_no"
                                        @role('admin') name="serial_no" @else disabled @endrole>
                                </div>
                                <div class="form-group col-lg-4">
                                    <label for="update_card_type">{{ __('card_type') }}</label>
                                    <select class="form-control" id="update_card_type"
                                        @role('admin') name="card_type" @else disabled @endrole>
                                        @foreach (\App\Http\Controllers\Card\CardOrderController::CARD_TYPES as $cardTypeOption)
                                            <option value="{{ $cardTypeOption }}">{{ $cardTypeOption }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="card_value_real">{{ __('denomination_received') }}</label>
                                        <input type="text" class="form-control amount-format" id="card_value_real"
                                            name="card_value_real">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="amount">{{ __('denomination_sent') }}</label>
                                        <div class="input-group mb-3">
                                            <a id="copyButton" class="btn btn-primary"> <i
                                                    class="fa-solid fa-circle-chevron-left"></i></a>
                                            <input type="text" class="form-control" id="card_value" name="card_value"
                                                disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="row">
                                <div class="form-group col-lg-6">
                                    <label for="balance">{{ __('balance') }}</label>
                                    <input type="text" class="form-control" id="balance" name="balance" disabled>
                                </div>
                                <div class="form-group col-lg-6">
                                    <label for="fee">{{ __('fee') }}</label>
                                    <input type="number" class="form-control" id="fee" name="fee" disabled>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="status">{{ __('status') }}</label>
                                <select name="status" id="status" class="form-control">
                                    <option value="failed" id="error">{{ __('error') }}</option>
                                    <option value="success" id="success">{{ __('success') }}</option>
                                    <option value="pending" id="pending">{{ __('pending') }}</option>
                                </select>
                                <input type="hidden" name="disabled_status" id="disabled_status">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="note">{{ __('message') }}</label>
                                <textarea type="text" class="form-control" name="note" id="note"
                                    placeholder="{{ __('Nhập phản hồi') }}"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="text-center">
                                <button type="submit" id="saveButton" class="btn btn-success"><i
                                        class="fas fa-save"></i>
                                    {{ __('Save') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal fade" id="cardTotalModal" tabindex="-1" aria-labelledby="cardTotalModalLabel"
                aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-center" id="cardTotalModalLabel">
                                {{ __('report') }}
                            </h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>

                        <div class="modal-body">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped mb-0">
                                        <thead style="background-color: #abb7ac">
                                            <tr>
                                                <th>{{ __('CardType') }}</th>
                                                <th>{{ __('CardValueReal') }}</th>
                                                <th>{{ __('TotalBalance') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody id="total-per-card-type"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                {{ __('close') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <form id="cardForm">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="cardModalLabel">{{ __('Gửi thẻ') }}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="{{ __('Đóng') }}"></button>
                            </div>
                            <div class="modal-body">
                                {{-- Admin/support tạo hộ đơn nên phải chỉ định đối tác đứng tên.
                                     Đối tác tự gửi thì không thấy ô này và đơn luôn đứng tên chính họ. --}}
                                @role('admin|support')
                                    <div class="mb-2">
                                        <label for="card-partner" class="form-label">{{ __('Đối tác') }}</label>
                                        <select id="card-partner" class="form-control" required>
                                            <option value="">{{ __('Chọn đối tác') }}</option>
                                            @foreach (\App\Models\User\User::getPartners() as $cardPartner)
                                                <option value="{{ $cardPartner->id }}">{{ $cardPartner->username }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endrole
                                <div class="mb-2">
                                    <label for="telco" class="form-label">{{ __('Nhà mạng') }}</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-signal"></i></span>
                                        <select id="telco" class="form-select" required>
                                            <option value="">{{ __('Chọn nhà mạng') }}</option>
                                            <option value="VIETTEL">Viettel</option>
                                            <option value="VINAPHONE">Vinaphone</option>
                                            <option value="MOBIPHONE">Mobifone</option>
                                            <option value="VIETNAMOBILE">Vietnamobile</option>
                                            <option value="ZING">Zing</option>
                                            <option value="VCOIN">Vcoin</option>
                                            <option value="GARENA">Garena</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="mb-2">
                                    <label for="amount" class="form-label">{{ __('Mệnh giá') }}</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-money-bill"></i></span>
                                        <select id="amount" class="form-select" required>
                                            <option value="">{{ __('Chọn mệnh giá') }}</option>
                                            <option value="10000">10.000đ</option>
                                            <option value="20000">20.000đ</option>
                                            <option value="30000">30.000đ</option>
                                            <option value="50000">50.000đ</option>
                                            <option value="100000">100.000đ</option>
                                            <option value="200000">200.000đ</option>
                                            <option value="300000">300.000đ</option>
                                            <option value="500000">500.000đ</option>
                                            <option value="1000000">1.000.000đ</option>
                                            <option value="2000000">2.000.000đ</option>
                                            <option value="3000000">3.000.000đ</option>
                                            <option value="5000000">5.000.000đ</option>
                                            <option value="10000000">10.000.000đ</option>
                                            <option value="custom">{{ __('Tự nhập mệnh giá khác') }}</option>
                                        </select>
                                    </div>
                                </div>

                                {{-- Hiện lên khi chọn "Tự nhập mệnh giá khác" ở ô Mệnh giá phía trên. --}}
                                <div class="mb-2" id="custom-amount-group" style="display: none;">
                                    <label for="custom-amount" class="form-label">{{ __('Mệnh giá tự nhập') }}</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fa fa-pen"></i></span>
                                        <input type="text" id="custom-amount" class="form-control"
                                            inputmode="numeric" placeholder="{{ __('Ví dụ: 40000') }}">
                                        <span class="input-group-text">VND</span>
                                    </div>
                                </div>
                                <div class="mb-2">
                                    <label for="pin" class="form-label">{{ __('Mã thẻ') }}</label>
                                    <input type="text" id="pin" class="form-control"
                                        placeholder="{{ __('Nhập mã thẻ') }}">
                                </div>
                                <div class="mb-2">
                                    <label for="serial" class="form-label">{{ __('Số serial') }}</label>
                                    <input type="text" id="serial" class="form-control"
                                        placeholder="{{ __('Nhập số serial') }}">
                                </div>

                                <div id="cardResult" class="mt-2 text-center small"></div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">{{ __('Gửi thẻ') }}</button>
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Đóng') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
    <script type="text/javascript"
        src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/2.0.1/pagination/input.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js">
    </script>

    <script>
        const DATE_TIME_FORMAT = 'DD-MM-YYYY HH:mm:ss';

        function onlyDigits(value) {
            return String(value || '').replace(/[^\d]/g, '');
        }

        function formatThousandsVN(value, separator = '.') {
            const digits = onlyDigits(value);
            if (!digits) return '';
            return digits.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
        }

        function parseFormattedNumber(value) {
            const digits = onlyDigits(value);
            return digits ? parseInt(digits, 10) : 0;
        }

        function numberFormat(number) {
            return new Intl.NumberFormat('en-US').format(Number(number || 0));
        }

        function parseDmyHis(s) {
            const raw = (s || '').trim();
            if (!raw) return null;
            const m = moment(raw, DATE_TIME_FORMAT, true);
            return m.isValid() ? m.toDate() : null;
        }

        function diffDays(a, b) {
            return (b.getTime() - a.getTime()) / (1000 * 3600 * 24);
        }

        function validateDateRange(options = {}) {
            const {
                fromSelector,
                toSelector,
                label,
                maxDays,
                required = false
            } = options;

            const fromStr = $(fromSelector).val()?.trim() || '';
            const toStr = $(toSelector).val()?.trim() || '';

            if (!fromStr && !toStr && !required) {
                return {
                    ok: true
                };
            }

            if (required && (!fromStr || !toStr)) {
                return {
                    ok: false,
                    message: {{ \Illuminate\Support\Js::from(__(':label: thiếu thời gian hoặc sai định dạng :format.')) }}.replace(':label', label).replace(':format', DATE_TIME_FORMAT)
                };
            }

            if ((fromStr && !toStr) || (!fromStr && toStr)) {
                return {
                    ok: false,
                    message: {{ \Illuminate\Support\Js::from(__(':label: cần nhập đầy đủ cả ngày bắt đầu và ngày kết thúc.')) }}.replace(':label', label)
                };
            }

            const from = moment(fromStr, DATE_TIME_FORMAT, true);
            const to = moment(toStr, DATE_TIME_FORMAT, true);

            if (!from.isValid() || !to.isValid()) {
                return {
                    ok: false,
                    message: {{ \Illuminate\Support\Js::from(__(':label: thiếu thời gian hoặc sai định dạng :format.')) }}.replace(':label', label).replace(':format', DATE_TIME_FORMAT)
                };
            }

            if (from.isAfter(to)) {
                return {
                    ok: false,
                    message: {{ \Illuminate\Support\Js::from(__(':label: Ngày bắt đầu phải nhỏ hơn hoặc bằng ngày kết thúc.')) }}.replace(':label', label)
                };
            }

            const days = to.diff(from, 'days', true);
            if (days > maxDays) {
                return {
                    ok: false,
                    message: {{ \Illuminate\Support\Js::from(__('Khoảng thời gian (:label) không được lớn hơn :days ngày.')) }}.replace(':label', label).replace(':days', maxDays)
                };
            }

            return {
                ok: true
            };
        }

        /**
         * Tìm kiếm / Báo cáo / Xuất file chỉ cần MỘT trong hai khoảng thời gian:
         * "Thời gian tạo" HOẶC "Thời gian hoàn thành".
         *
         * Đơn tạo hôm trước nhưng hôm sau mới hoàn thành, nên khi đối soát số dư
         * phải lọc được riêng theo ngày hoàn thành. Vẫn bắt buộc có ít nhất một
         * khoảng đầy đủ Từ - Đến để truy vấn không quét toàn bộ bảng.
         */
        function validateSearchRanges(maxDays) {
            const createRange = validateDateRange({
                fromSelector: '#from_create_date',
                toSelector: '#to_create_date',
                label: {{ \Illuminate\Support\Js::from(__('Ngày tạo')) }},
                maxDays: maxDays,
                required: false
            });

            if (!createRange.ok) {
                return createRange;
            }

            const completeRange = validateDateRange({
                fromSelector: '#from_complete_date',
                toSelector: '#to_complete_date',
                label: {{ \Illuminate\Support\Js::from(__('Ngày hoàn thành')) }},
                maxDays: maxDays,
                required: false
            });

            if (!completeRange.ok) {
                return completeRange;
            }

            const hasCreate = !!($('#from_create_date').val() || '').trim() &&
                !!($('#to_create_date').val() || '').trim();
            const hasComplete = !!($('#from_complete_date').val() || '').trim() &&
                !!($('#to_complete_date').val() || '').trim();

            if (!hasCreate && !hasComplete) {
                return {
                    ok: false,
                    message: {{ \Illuminate\Support\Js::from(__('Vui lòng nhập đủ Từ - Đến của Thời gian tạo hoặc Thời gian hoàn thành.')) }}
                };
            }

            return {
                ok: true
            };
        }

        function showDateError(message = '') {
            $('#date-error').text(message);
        }

        function showFullPageLoading() {
            $('#loading-overlay').removeClass('d-none');
        }

        function hideFullPageLoading() {
            $('#loading-overlay').addClass('d-none');
        }

        function hideEditOffcanvas() {
            const offcanvasEl = document.getElementById('offcanvasRight');
            if (!offcanvasEl) return;

            if (window.bootstrap && bootstrap.Offcanvas) {
                const instance = bootstrap.Offcanvas.getOrCreateInstance(offcanvasEl);
                instance.hide();
            } else {
                $('#offcanvasRight').offcanvas('hide');
            }
        }

        $(function() {
            const startToday = moment().startOf('day');
            const endToday = moment().endOf('day').set({
                millisecond: 0
            });

            $('#from_create_date').datetimepicker({
                format: DATE_TIME_FORMAT,
                sideBySide: true,
                showClear: true,
                showClose: true,
                allowInputToggle: true
            });

            $('#to_create_date').datetimepicker({
                format: DATE_TIME_FORMAT,
                sideBySide: true,
                showClear: true,
                showClose: true,
                useCurrent: false,
                allowInputToggle: true
            });

            $('#from_complete_date').datetimepicker({
                format: DATE_TIME_FORMAT,
                sideBySide: true,
                showClear: true,
                showClose: true,
                allowInputToggle: true
            });

            $('#to_complete_date').datetimepicker({
                format: DATE_TIME_FORMAT,
                sideBySide: true,
                showClear: true,
                showClose: true,
                useCurrent: false,
                allowInputToggle: true
            });

            $('#from_create_date').data('DateTimePicker').date(startToday);
            $('#to_create_date').data('DateTimePicker').date(endToday);
            $('#from_create_date').val(startToday.format(DATE_TIME_FORMAT));
            $('#to_create_date').val(endToday.format(DATE_TIME_FORMAT));

            // Không ràng buộc min/max chéo giữa các ô (tránh việc 2 ô tự kéo/đá nhau khi
            // chọn tháng cũ). Việc kiểm tra "Từ <= Đến" đã có trong validateDateRange()
            // lúc bấm Tìm kiếm / Báo cáo / Export.

            function normalize(selector) {
                $(document).on('blur', selector, function() {
                    const raw = ($(this).val() || '').trim();
                    if (!raw) return;
                    const m = moment(raw, DATE_TIME_FORMAT, true);
                    $(this).val(m.isValid() ? m.format(DATE_TIME_FORMAT) : '');
                });
            }

            normalize('#from_create_date');
            normalize('#to_create_date');
            normalize('#from_complete_date');
            normalize('#to_complete_date');

            // format live cho input tiền ở offcanvas
            $(document).on('input', '#card_value_real', function() {
                const formatted = formatThousandsVN($(this).val(), '.');
                $(this).val(formatted);

                try {
                    this.setSelectionRange(this.value.length, this.value.length);
                } catch (e) {}
            });

            // select2 chỉ áp vào select partner của form search
            $('#search-card select[name="partner"]').select2({
                width: '100%',
                placeholder: "{{ __('select') }}",
                allowClear: true
            });
        });
    </script>

    <script>
        $('#export-card').on('click', function(e) {
            e.preventDefault();

            const range = validateSearchRanges(30);

            if (!range.ok) {
                showDateError(range.message);
                return;
            }

            showDateError('');
            showFullPageLoading();

            // File được tạo bởi queue worker riêng (queue 'export'), không chạy
            // trong request này nữa. Người dùng tải ở trang quản lí file.
            $.ajax({
                url: "{{ route('app.exportCard') }}",
                type: "POST",
                data: $('#search-card').serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    hideFullPageLoading();
                    if (response.success) {
                        toastr.success(response.message ||
                            {{ \Illuminate\Support\Js::from(__('Đang tạo file, vui lòng vào "Quản lí file tải xuống" để tải.')) }});
                        // Sang trang quan li file de nguoi dung thay ngay tien do.
                        setTimeout(function() {
                            window.location.href = "{{ route('app.file.index') }}";
                        }, 3000);
                    } else {
                        toastr.error(response.message || {{ \Illuminate\Support\Js::from(__('Có lỗi khi xuất file.')) }});
                    }
                },
                error: function(xhr) {
                    hideFullPageLoading();
                    const msg = (xhr.responseJSON && xhr.responseJSON.message) ||
                        {{ \Illuminate\Support\Js::from(__('Có lỗi khi xuất file. Vui lòng thử lại.')) }};
                    toastr.error(msg);
                }
            });
        });

        $('#btn-total-card').on('click', function(e) {
            e.preventDefault();

            showFullPageLoading();

            const range = validateSearchRanges(61);

            if (!range.ok) {
                showDateError(range.message);
                hideFullPageLoading();
                return;
            }

            showDateError('');

            $.ajax({
                url: "{{ route('app.card.reportCardByCardType') }}",
                type: 'GET',
                data: {
                    partner: $('#search-card [name="partner"]').val(),
                    card_type: $('#search-card [name="card_type"]').val(),
                    status: $('#search-card [name="status"]').val(),
                    from_create_date: $('#search-card [name="from_create_date"]').val(),
                    to_create_date: $('#search-card [name="to_create_date"]').val(),
                    from_complete_date: $('#search-card [name="from_complete_date"]').val(),
                    to_complete_date: $('#search-card [name="to_complete_date"]').val(),
                    card_value: $('#search-card [name="card_value"]').val(),
                    operation: $('#search-card [name="operation"]').val(),
                    request_id: $('#search-card [name="request_id"]').val(),
                    card_no: $('#search-card [name="card_no"]').val(),
                    serial_no: $('#search-card [name="serial_no"]').val(),
                    gate: $('#search-card [name="gate"]').val()
                },
                success: function(response) {
                    hideFullPageLoading();

                    console.log('reportCardByCardType success:', response);

                    const totalByCardType = response.totals_by_card_type || [];
                    const totalAllAmount = response.total_all_amount || 0;
                    const totalAllBalance = response.total_all_balance || 0;

                    let html = '';

                    if (totalByCardType.length > 0) {
                        totalByCardType.forEach(function(cardTypeData) {
                            html += `
                                        <tr>
                                            <td>${cardTypeData.card_type || ''}</td>
                                            <td>${numberFormat(cardTypeData.total_card_value_real || 0)}</td>
                                            <td>${numberFormat(cardTypeData.total_balance || 0)}</td>
                                        </tr>
                                    `;
                        });
                    } else {
                        html += `
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">${ {{ \Illuminate\Support\Js::from(__('Không có dữ liệu')) }} }</td>
                                    </tr>
                                `;
                    }

                    html += `
                                <tr style="background-color: #1fce04; font-weight: 700;">
                                    <td>{{ __('total') }}</td>
                                    <td>${numberFormat(totalAllAmount)}</td>
                                    <td>${numberFormat(totalAllBalance)}</td>
                                </tr>
                            `;

                    $('#total-per-card-type').html(html);
                    $('#cardTotalModal').modal('show');
                },
                error: function(xhr) {
                    hideFullPageLoading();
                    console.log('reportCardByCardType error:', xhr.responseJSON || xhr.responseText);
                    toastr.error(xhr.responseJSON?.message ||
                        {{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi khi lấy dữ liệu tổng thẻ.')) }});
                }
            });
        });
    </script>

    <script>
        var dataTable;
        var userRole = "{{ checkRoleUser() }}";

        jQuery(document).ready(function($) {
            dataTable = $('#listCards').DataTable({
                dom: 'lirtp',
                processing: true,
                serverSide: true,
                pageLength: 50,
                pagingType: 'input',
                aLengthMenu: [
                    [50, 100, 200],
                    [50, 100, 200]
                ],
                ajax: {
                    url: "{{ route('app.card_order.index') }}",
                    type: 'GET',
                    data: function(d) {
                        d.partner = $('#search-card [name="partner"]').val();
                        d.card_type = $('#search-card [name="card_type"]').val();
                        d.status = $('#search-card [name="status"]').val();
                        d.from_create_date = $('#search-card [name="from_create_date"]').val();
                        d.to_create_date = $('#search-card [name="to_create_date"]').val();
                        d.from_complete_date = $('#search-card [name="from_complete_date"]').val();
                        d.to_complete_date = $('#search-card [name="to_complete_date"]').val();
                        d.card_value = $('#search-card [name="card_value"]').val();
                        d.operation = $('#search-card [name="operation"]').val();
                        d.card_id = $('#search-card [name="card_id"]').val();
                        d.request_id = $('#search-card [name="request_id"]').val();
                        d.card_no = $('#search-card [name="card_no"]').val();
                        d.serial_no = $('#search-card [name="serial_no"]').val();
                        d.gate = $('#search-card [name="gate"]').val();
                    },
                    error: function(xhr, status, error) {
                        if (status === "parsererror") {
                            window.location.href = '/auth/login';
                        }
                    }
                },
                columns: [{
                        data: 'card_id',
                        className: 'text-center',
                        orderable: false
                    },
                    {
                        data: 'request_id',
                        className: 'text-center',
                        orderable: false
                    },
                    {
                        data: 'user_id',
                        className: 'text-center',
                        orderable: false
                    },
                    {
                        data: 'card_type',
                        name: 'card_type',
                        className: 'text-center',
                        orderable: false
                    },
                    {
                        data: 'card_no',
                        className: 'text-center',
                        orderable: false
                    },
                    {
                        data: 'serial_no',
                        className: 'text-center',
                        orderable: false
                    },
                    {
                        data: 'card_value',
                        render: function(data) {
                            return numberFormat(data);
                        },
                        className: 'text-right'
                    },
                    {
                        data: 'card_value_real',
                        render: function(data) {
                            return numberFormat(data);
                        },
                        className: 'text-right'
                    },
                    {
                        data: 'fee',
                        render: function(data, type, row) {
                            if (type === 'display') {
                                return data + '%';
                            }
                            return data;
                        },
                        className: 'text-right',
                    },
                    {
                        data: 'balance',
                        render: function(data) {
                            if (Number(data) === 0) {
                                return '__';
                            }
                            return '<span class="badge bg-success">+' + numberFormat(data) +
                                '</span>';
                        },
                        className: 'text-right'
                    },
                    {
                        data: 'status',
                        name: 'status',
                        className: 'text-center check-status',
                        orderable: false
                    },
                    {
                        data: 'created_at',
                        className: 'text-center'
                    },
                    {
                        data: 'note'
                    },
                    {
                        data: 'message',
                        orderable: false,
                        className: 'text-start',
                        render: function(data, type, row) {
                            if (type !== 'display') {
                                return data || '';
                            }

                            const fullText = data || '';
                            const shortText = fullText.length > 30 ? fullText.substring(0, 30) +
                                '...' :
                                fullText;

                            const escapedFull = $('<div>').text(fullText).html();
                            const escapedShort = $('<div>').text(shortText).html();

                            if (!fullText) {
                                return '<span class="text-muted">__</span>';
                            }

                            return `
                                <div class="message-cell">
                                    <div class="message-preview" title="${escapedFull}">${escapedShort}</div>
                                    <div class="message-actions mt-1">
                                        <button type="button"
                                            class="btn btn-sm btn-outline-secondary btn-view-message"
                                            data-message="${escapedFull}">
                                            Xem
                                        </button>
                                        <button type="button"
                                            class="btn btn-sm btn-outline-primary btn-copy-message"
                                            data-message="${escapedFull}">
                                            Copy
                                        </button>
                                    </div>
                                </div>
                            `;
                        }
                    },
                    {
                        data: 'operation',
                        render: function(data, type, row) {
                            if (data === 'manual') {
                                return `<span class="badge bg-primary">${ {{ \Illuminate\Support\Js::from(__('Thủ công')) }} }</span>`;
                            } else if (data === 'auto') {
                                return `<span class="badge bg-secondary">${ {{ \Illuminate\Support\Js::from(__('Tự động')) }} }</span>`;
                            }
                            return '';
                        },
                        visible: userRole,
                        orderable: false
                    },
                    {
                        data: 'handler',
                        visible: userRole,
                        orderable: false
                    },
                    {
                        data: 'gate_name',
                        visible: userRole,
                        orderable: false
                    },
                    {
                        data: 'is_callback',
                        render: function(data) {
                            if (Number(data) === 1) {
                                return '<span class="badge bg-primary">' + {{ \Illuminate\Support\Js::from(__('Đã callback')) }} + '</span>';
                            }
                            return '<span class="badge bg-secondary">' + {{ \Illuminate\Support\Js::from(__('Chưa callback')) }} + '</span>';
                        },
                        visible: userRole
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        className: 'text-center',
                        visible: userRole
                    }
                ],
                order: [
                    [11, 'desc']
                ]
            });

            document.querySelectorAll('label.toggle-vis').forEach((el) => {
                el.addEventListener('click', function(e) {
                    let columnIdx = el.getAttribute('data-column');
                    let column = dataTable.column(columnIdx);
                    let checkbox = el.querySelector('input[type="checkbox"]');
                    column.visible(checkbox.checked);
                });
            });

            document.querySelectorAll('.dropdown-item.toggle-vis').forEach((item) => {
                item.addEventListener('click', function(e) {
                    e.stopPropagation();
                });
            });

            $('#listCards').css('width', '100%');

            function refreshData() {
                if (!refreshData.isRefreshing) {
                    refreshData.isRefreshing = true;
                    dataTable.ajax.reload(null, false);
                    dataTable.one('draw', function() {
                        refreshData.isRefreshing = false;
                    });
                }
            }

            var autoRefreshInterval;
            $(document).on('click', '#refresh-btn', function() {
                var isAutoRefresh = $(this).data('auto-refresh') || false;

                if (isAutoRefresh) {
                    clearInterval(autoRefreshInterval);
                    $(this).data('auto-refresh', false);
                    $(this).find('#refresh-text').text({{ \Illuminate\Support\Js::from(__('Tự động làm mới: Tắt')) }});
                } else {
                    $(this).data('auto-refresh', true);
                    $(this).find('#refresh-text').text({{ \Illuminate\Support\Js::from(__('Tự động làm mới: Bật')) }});
                    autoRefreshInterval = setInterval(refreshData, 15000);
                }
            });

            $(document).on('click', '#btn-search', function(event) {
                event.preventDefault();

                const range = validateSearchRanges(61);

                if (!range.ok) {
                    showDateError(range.message);
                    return;
                }

                showDateError('');
                dataTable.ajax.reload();
            });

            // Mệnh giá: chọn "Tự nhập" thì lấy số đối tác gõ tay. Bỏ hết dấu phân
            // cách nghìn để "40.000" hay "40,000" đều thành 40000.
            function selectedCardValue() {
                if ($('#amount').val() !== 'custom') {
                    return $('#amount').val();
                }
                return String($('#custom-amount').val() || '').replace(/[.,\s]/g, '');
            }

            function resetCustomAmount() {
                $('#custom-amount-group').hide();
                $('#custom-amount').val('').prop('required', false);
            }

            $('#amount').on('change', function() {
                var isCustom = $(this).val() === 'custom';
                $('#custom-amount-group').toggle(isCustom);
                $('#custom-amount').prop('required', isCustom);
                if (!isCustom) {
                    $('#custom-amount').val('');
                }
            });

            // dropdownParent bắt buộc phải trỏ vào modal: select2 đặt ngoài modal
            // sẽ bị modal chặn focus, gõ tìm kiếm không được.
            if ($('#card-partner').length) {
                $('#card-partner').select2({
                    width: '100%',
                    placeholder: "{{ __('Chọn đối tác') }}",
                    dropdownParent: $('#cardModal')
                });
            }

            $('#send-card-btn').on('click', function(e) {
                e.preventDefault();
                $('#cardModal').modal('show');
            });

            $('#cardForm').on('submit', function(e) {
                e.preventDefault();

                // Ô này chỉ tồn tại với admin/support; đối tác thường bỏ qua kiểm tra.
                if ($('#card-partner').length && !$('#card-partner').val()) {
                    toastr.error('{{ __('Vui lòng chọn đối tác.') }}');
                    return;
                }

                if (!$('#telco').val()) {
                    toastr.error('{{ __('Vui lòng chọn nhà mạng.') }}');
                    return;
                }

                var cardValue = selectedCardValue();
                if (!cardValue || !/^\d+$/.test(cardValue) || Number(cardValue) <= 0) {
                    toastr.error('{{ __('Vui lòng chọn hoặc nhập mệnh giá hợp lệ.') }}');
                    return;
                }

                var dt = $('#listCards').DataTable();
                var pageInfo = dt.page.info();

                Swal.fire({
                    title: {{ \Illuminate\Support\Js::from(__('Xác nhận gửi thẻ?')) }},
                    html: {{ \Illuminate\Support\Js::from(__('Bạn có chắc chắn muốn gửi thẻ không?')) }},
                    icon: "question",
                    showCancelButton: true,
                    confirmButtonText: {{ \Illuminate\Support\Js::from(__('Đồng ý')) }},
                    cancelButtonText: {{ \Illuminate\Support\Js::from(__('Hủy')) }}
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('app.sendCard') }}",
                            method: "POST",
                            data: {
                                _token: '{{ csrf_token() }}',
                                partner_id: $('#card-partner').val() || null,
                                card_type: $('#telco').val(),
                                card_value: cardValue,
                                card_no: $('#pin').val().trim(),
                                serial_no: $('#serial').val().trim()
                            },
                            success: function(data) {
                                if (data.success) {
                                    $('#cardModal').modal('hide');
                                    $('#cardForm')[0].reset();
                                    resetCustomAmount();
                                    $('#card-partner').val('').trigger('change');
                                    dt.page(pageInfo.page).draw('page');
                                    toastr.success(data.msg);
                                } else {
                                    toastr.error(data.msg);
                                }
                            },
                            error: function(xhr) {
                                if (xhr.status === 422) {
                                    let errors = xhr.responseJSON.errors;
                                    let msg = '';
                                    for (let key in errors) {
                                        msg += errors[key][0] + "<br>";
                                    }
                                    toastr.error(msg);
                                } else {
                                    toastr.error({{ \Illuminate\Support\Js::from(__('Lỗi hệ thống')) }});
                                }
                            }
                        });
                    }
                });
            });
        });
    </script>

    <script>
        $(document).on('click', '.btn-copy-message', function() {
            const message = $(this).attr('data-message') || '';
            const decodedMessage = $('<textarea/>').html(message).text();

            navigator.clipboard.writeText(decodedMessage)
                .then(function() {
                    toastr.success({{ \Illuminate\Support\Js::from(__('Đã copy nội dung message')) }});
                })
                .catch(function() {
                    toastr.error({{ \Illuminate\Support\Js::from(__('Không thể copy nội dung')) }});
                });
        });

        $(document).on('click', '.btn-view-message', function() {
            const message = $(this).attr('data-message') || '';
            const decodedMessage = $('<textarea/>').html(message).text();

            Swal.fire({
                title: {{ \Illuminate\Support\Js::from(__('Nội dung message')) }},
                html: `<div style="text-align:left; white-space:pre-line; max-height:450px; overflow:auto;">${$('<div>').text(decodedMessage).html()}</div>`,
                width: 700,
                confirmButtonText: {{ \Illuminate\Support\Js::from(__('Đóng')) }}
            });
        });

        $(document).on('click', '#edit-card', function() {
            const card_id = $(this).data('card-id');

            $.ajax({
                url: '/get-card-data/' + card_id,
                method: 'GET',
                success: function(response) {
                    $('#updateForm #card_id').val(response.card.card_id);
                    $('#updateForm #request_id').val(response.card.request_id);
                    $('#updateForm #partner').val(response.partner);
                    $('#updateForm #card_value_real').val(formatThousandsVN(response.card
                        .card_value_real, '.'));
                    $('#updateForm #card_value').val(numberFormat(response.card.card_value));
                    $('#updateForm #card_no').val(response.card.card_no);
                    $('#updateForm #serial_no').val(response.card.serial_no);
                    $('#updateForm #update_card_type').val(response.card.card_type);
                    $('#updateForm #balance').val(numberFormat(response.card.balance));
                    $('#updateForm #fee').val(response.card.fee);
                    $('#updateForm #note').val(response.card.note);
                    $('#updateForm #status').val(response.card.status);
                    $('#updateForm #disabled_status').val(response.card.status);

                    $('#updateForm #status').prop('disabled', false);

                    if (response.card.status === 'success') {
                        $('#updateForm #status').prop('disabled', true);
                    } else if (response.card.status === 'failed') {
                        $('#updateForm #status').val('failed');
                    } else if (response.card.status === 'pending') {
                        $('#updateForm #status').val('pending');
                    }
                },
                error: function(error) {
                    console.error('Lỗi lấy thông tin thẻ:', error);
                    toastr.error({{ \Illuminate\Support\Js::from(__('Không lấy được thông tin thẻ')) }});
                }
            });
        });

        document.getElementById('btn-reset').addEventListener('click', function() {
            const form = document.getElementById('search-card');
            form.reset();

            const startToday = moment().startOf('day');
            const endToday = moment().endOf('day').set({
                millisecond: 0
            });

            $('#from_create_date').data('DateTimePicker').date(startToday);
            $('#to_create_date').data('DateTimePicker').date(endToday);

            $('#from_create_date').val(startToday.format(DATE_TIME_FORMAT));
            $('#to_create_date').val(endToday.format(DATE_TIME_FORMAT));

            $('#from_complete_date').data('DateTimePicker').clear();
            $('#to_complete_date').data('DateTimePicker').clear();
            $('#from_complete_date').val('');
            $('#to_complete_date').val('');

            $('#search-card select[name="partner"]').val(null).trigger('change');
            document.getElementById('date-error').textContent = '';
        });

        function getTodayLocal() {
            const now = new Date();
            const y = now.getFullYear();
            const m = String(now.getMonth() + 1).padStart(2, '0');
            const d = String(now.getDate()).padStart(2, '0');
            return `${y}-${m}-${d}`;
        }

        $(document).on('click', '.recallbackCard', function() {
            var $form = $(this).closest('form');
            var dt = $('#listCards').DataTable();
            var pageInfo = dt.page.info();

            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                data: $form.serialize(),
                success: function(data) {
                    if (data.code == 1) {
                        dt.page(pageInfo.page).draw('page');
                        toastr.success(data.msg);
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function(xhr, status, error) {
                    toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                }
            });
        });

        $(document).on('click', '.repushCard', function() {
            var $btn = $(this);
            var $form = $btn.closest('form');
            var dt = $('#listCards').DataTable();
            var pageInfo = dt.page.info();

            Swal.fire({
                title: {{ \Illuminate\Support\Js::from(__('Đẩy lại đơn qua cổng?')) }},
                html: {{ \Illuminate\Support\Js::from(__('Hệ thống sẽ gửi lại request thẻ này tới cổng. Chỉ làm khi chắc chắn cổng chưa nhận đơn (timeout, mất kết nối, …) để tránh trùng đơn.')) }},
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: {{ \Illuminate\Support\Js::from(__('Đẩy lại')) }},
                cancelButtonText: {{ \Illuminate\Support\Js::from(__('Huỷ')) }},
                confirmButtonColor: '#f0ad4e',
            }).then(function(result) {
                if (!result.isConfirmed) return;

                $btn.prop('disabled', true);
                $.ajax({
                    url: $form.attr('action'),
                    type: 'POST',
                    data: $form.serialize(),
                    success: function(data) {
                        if (data.code == 1) {
                            dt.page(pageInfo.page).draw('page');
                            toastr.success(data.msg);
                        } else {
                            toastr.error(data.msg);
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                    },
                    complete: function() {
                        $btn.prop('disabled', false);
                    }
                });
            });
        });

        function formatTime(isoTime) {
            try {
                const date = new Date(isoTime);
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const year = date.getFullYear();

                return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
            } catch (e) {}
            return null;
        }

        function formatTimeHistory(timestamp) {
            try {
                const date = new Date(timestamp * 1000);

                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const year = date.getFullYear();

                return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
            } catch (error) {
                return error.toString();
            }
        }

        document.getElementById('saveButton').addEventListener('click', function(event) {
            event.preventDefault();
            saveData();
        });

        document.getElementById('copyButton').addEventListener('click', function(event) {
            event.preventDefault();
            const rawCardValue = $('#updateForm #card_value').val();
            $('#updateForm #card_value_real').val(formatThousandsVN(rawCardValue, '.'));
        });

        function saveData() {
            var card_id = document.getElementById('card_id').value;
            var dt = $('#listCards').DataTable();
            var pageInfo = dt.page.info();

            var cardValueRealInput = document.getElementById('card_value_real');
            var oldDisplayValue = cardValueRealInput.value;
            var cardValueReal = parseFormattedNumber(oldDisplayValue);

            Swal.fire({
                title: {{ \Illuminate\Support\Js::from(__('Xác nhận lưu đơn hàng?')) }},
                html: {{ \Illuminate\Support\Js::from(__('Bạn có chắc chắn muốn lưu đơn hàng này không?')) }} + "<br>" + {{ \Illuminate\Support\Js::from(__('Thực chuyển:')) }} + " " +
                    "<span class='badge bg-danger'>" + numberFormat(cardValueReal) + "</span>",
                icon: "question",
                showCancelButton: true,
                confirmButtonText: {{ \Illuminate\Support\Js::from(__('Đồng ý')) }},
                cancelButtonText: {{ \Illuminate\Support\Js::from(__('Hủy')) }}
            }).then((result) => {
                if (result.isConfirmed) {
                    cardValueRealInput.value = cardValueReal;

                    $.ajax({
                        url: '/card_order/' + card_id,
                        type: 'PUT',
                        data: $('#updateForm').serialize(),
                        dataType: 'json',
                        success: function(data) {
                            if (data.code == 1) {
                                hideEditOffcanvas();
                                dt.page(pageInfo.page).draw('page');
                                toastr.success(data.msg);
                            } else {
                                toastr.error(data.msg);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.log('Lỗi: ', error);
                            toastr.error({{ \Illuminate\Support\Js::from(__('Đã xảy ra lỗi:')) }} + ' ' + error);
                        },
                        complete: function() {
                            cardValueRealInput.value = oldDisplayValue;
                        }
                    });
                }
            });
        }
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('dist/css/input.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ asset('dist/css/cashout/cashout.css') }}">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">

    <style>
        .modal-dialog {
            max-width: 600px;
        }

        .modal-content {
            text-align: unset;
        }

        /* ===== Select2 tune ===== */
        .select2-container .select2-selection--single {
            height: 40px !important;
            border-radius: 10px !important;
            border-color: rgba(0, 0, 0, .12) !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 38px !important;
            padding-left: 12px !important;
            color: #263238;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 38px !important;
            right: 8px;
        }

        .select2-dropdown {
            border-radius: 10px !important;
            border-color: rgba(0, 0, 0, .12) !important;
            overflow: hidden;
        }

        /* ===== Loading overlay ===== */
        #loading-overlay {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
            justify-content: center;
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, .55);
            z-index: 9999;
            backdrop-filter: blur(2px);
        }

        #loading-overlay .spinner-border {
            width: 3.2rem;
            height: 3.2rem;
        }

        #loading-overlay .loading-text {
            font-size: 14px;
            color: #fff;
            opacity: .9;
        }

        .input-group {
            flex-wrap: nowrap !important;
        }

        /* Ép select2 nằm chung hàng và chiếm full phần còn lại */
        .input-group>.select2-container {
            flex: 1 1 auto !important;
            width: 1% !important;
            /* trick giống .form-control trong input-group */
        }

        /* Đồng bộ chiều cao + canh giữa */
        .select2-container--default .select2-selection--single {
            height: 40px !important;
            display: flex !important;
            align-items: center !important;
        }

        /* Đừng dùng line-height cứng gây lệch/wrap */
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: normal !important;
            padding-left: 12px !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 40px !important;
        }

        .message-cell {
            min-width: 260px;
            max-width: 360px;
        }

        .message-preview {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 13px;
            line-height: 1.4;
        }

        .message-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
    </style>
@endsection