@extends('layouts.app')

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

@section('gate')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Quản lí cổng') }}</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">{{ __('Quản lí cổng') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        @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">
            <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">Hệ thống đang xử lí, vui lòng chờ...</div>
            </div>
            <div class="card-header">
                <h3 class="card-title">{{ __('Quản lí cổng') }}</h3>
                <div class="card-tools">
                    @role('admin')
                        <button type="submit" class="btn btn-warning btn-sm" data-bs-toggle="offcanvas" title="Thêm Cashin"
                            data-bs-target="#offcanvasRightCreateCashin" aria-controls="offcanvasRightCreateCashin">
                            <span>Tạo Cashin</span>
                        </button>
                        <a href="{{ route('app.gate.calculate-profit.form') }}" class="btn btn-success btn-sm">
                            <i class="fas fa-coins"></i>
                            <span>{{ __('Tính lợi nhuận') }}</span>
                        </a>
                        <a href="#" class="btn btn-secondary btn-sm" title="{{ __('Chỉnh sửa tỉ lệ nhận đơn') }}"
                            data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop">
                            <i class="fas fa-edit"></i>
                            <span>{{ __('Chỉnh sửa tỉ lệ') }}</span>
                        </a>
                        <a href="{{ route('app.gate.create') }}" class="btn btn-primary btn-sm"
                            title="{{ __('Thêm mới cổng thanh toán') }}">
                            <i class="fas fa-add"></i>
                            <span>{{ __('Thêm cổng') }}</span>
                        </a>
                    @endrole
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="listGates">
                        <thead style="text-align: center">
                            <tr>
                                <th>{{ __('ID') }}</th>
                                <th>{{ __('Tên cổng') }}</th>
                                <th>{{ __('Trạng thái cashin') }}</th>
                                <th>{{ __('Trạng thái cashout') }}</th>
                                <th>{{ __('Loại cổng') }}</th>
                                <th>{{ __('Domain') }}</th>
                                <th>{{ __('SignKey') }}</th>
                                <th>{{ __('Tỉ lệ nhận đơn(%)') }}</th>
                                <th>{{ __('Ghi chú') }}</th>
                                <th>{{ __('operation') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($gates as $gate)
                                <tr class="text-center">
                                    <td>{{ $gate->id }}</td>
                                    <td>{{ $gate->name }}</td>
                                    <td>
                                        @if ($gate->status == 'on')
                                            <span class="badge badge-success p-2">Mở</span>
                                        @else
                                            <span class="badge badge-danger p-2">Đóng</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($gate->state_cashout)
                                            <span class="badge badge-success p-2">Mở</span>
                                        @else
                                            <span class="badge badge-danger p-2">Đóng</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($gate->type == 'momo')
                                            <span class="badge badge-primary p-2">Momo</span>
                                        @elseif ($gate->type == 'bank')
                                            <span class="badge badge-info p-2">Bank</span>
                                        @elseif ($gate->type == 'momo&bank')
                                            <span class="badge badge-warning p-2">Momo & Bank</span>
                                        @elseif ($gate->type == 'bank&usdt')
                                            <span class="badge badge-warning p-2">Bank & USDT</span>
                                        @elseif ($gate->type == 'card')
                                            <span class="badge badge-secondary p-2">Card</span>
                                        @elseif ($gate->type == 'usdt')
                                            <span class="badge badge-secondary p-2">USDT</span>
                                        @elseif ($gate->type == 'all')
                                            <span class="badge badge-dark p-2">All(Momo, Bank, Card, USDT)</span>
                                        @endif
                                    </td>
                                    <td>{{ $gate->domain }}</td>
                                    <td>{{ $gate->sign_key }}</td>
                                    <td>{{ $gate->rate }}</td>
                                    <td>{{ $gate->note }}</td>
                                    <td style="text-align: center">
                                        <div class="d-flex justify-content-center align-items-center gap-2">
                                            <button tabindex="0" type="button" class="btn btn-info btn-sm"
                                                id="getBalanceBtn" data-bs-toggle="popover" title="Số dư của cổng là: "
                                                data-gate-id="{{ $gate->id }}">
                                                <i class="fa fa-eye"></i>
                                            </button>

                                            @if ($gate->status == 'on')
                                                <a class="btn btn-danger"
                                                    href="{{ route('app.gate.turnOnOffStatus', ['id' => $gate->id]) }}">
                                                    <span>{{ __('Đóng cổng IN') }}</span>
                                                </a>
                                            @else
                                                <a class="btn btn-success"
                                                    href="{{ route('app.gate.turnOnOffStatus', ['id' => $gate->id]) }}">
                                                    <span>{{ __('Mở cổng IN') }}</span>
                                                </a>
                                            @endif

                                            <button class="btn btn-primary btn-tools btn-sm" type="button"
                                                data-bs-toggle="offcanvas" title="Cập nhật thông tin"
                                                data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"
                                                data-gate-id="{{ $gate->id }}" id="edit-gate">
                                                <i class="fas fa-edit"></i>
                                            </button>

                                            <form action="{{ route('app.gate.delete', ['id' => $gate->id]) }}"
                                                method="POST" onsubmit="return confirm('Bạn có chắc chắn muốn xoá?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-tools btn-sm"
                                                    title="Xoá cổng">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasRightLabel">Chỉnh sửa Cổng</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="id" id="id">

                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="api_key">{{ __('APIKey') }}</label>
                                <input type="text" class="form-control" name="api_key" id="api_key"
                                    placeholder="{{ __('Nhập apikey') }}">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="sign_key">{{ __('SignKey') }}</label>
                                <input type="text" class="form-control" id="sign_key" name="sign_key"
                                    placeholder="{{ __('Nhập signkey') }}">
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="domain">{{ __('Domain') }}</label>
                                <input type="text" class="form-control" name="domain" id="domain"
                                    placeholder="{{ __('Nhập domain') }}" required>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="type">{{ __('Loại cổng') }}</label>
                                <select name="type" id="type" class="form-control">
                                    <option value="">{{ __('--Vui lòng chọn cổng--') }}</option>
                                    <option value="momo" id="gate_momo">{{ __('Cổng Momo') }}</option>
                                    <option value="bank" id="gate_bank">{{ __('Cổng Bank') }}</option>
                                    <option value="card" id="gate_card">{{ __('Cổng Thẻ') }}</option>
                                    <option value="usdt" id="gate_usdt">{{ __('Cổng USDT') }}</option>
                                    <option value="momo&bank" id="gate_momo&bank">{{ __('Cổng Momo và Bank') }}
                                    </option>
                                    <option value="bank&usdt" id="gate_bank&usdt">{{ __('Cổng Bank & USDT') }}</option>
                                    <option value="all" id="gate_all">{{ __('All(Bank, Momo, Thẻ, USDT)') }}
                                    </option>
                                </select>
                                @error('type')
                                    <span class="text-danger">* {{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="state_cashout">{{ __('Tình trạng cashout') }}</label>
                                <select name="state_cashout" id="state_cashout" class="form-control">
                                    <option value="">{{ __('--Vui lòng chọn--') }}</option>
                                    <option value="1" id="state_cashout_on">{{ __('Mở') }}</option>
                                    <option value="0" id="state_cashout_off">{{ __('Đóng') }}</option>
                                    </option>
                                </select>
                                @error('state_cashout')
                                    <span class="text-danger">* {{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="fee_momo">{{ __('Chiết khấu Momo (Đơn vị:%)') }}</label>
                                <input type="text" class="form-control" name="fee_momo" id="fee_momo"
                                    placeholder="{{ __('Nhập Chiết khấu') }}"></input>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="fee_bank">{{ __('Chiết khấu Bank (Đơn vị:%)') }}</label>
                                <input type="text" class="form-control" name="fee_bank" id="fee_bank"
                                    placeholder="{{ __('Nhập Chiết khấu') }}"></input>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="fee_usdt">{{ __('Chiết khấu Usdt (Đơn vị:%)') }}</label>
                                <input type="text" class="form-control" name="fee_usdt" id="fee_usdt"
                                    placeholder="{{ __('Nhập Chiết khấu') }}"></input>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="fee_card">{{ __('Chiết khấu Card (Đơn vị:%)') }}</label>
                                <input type="text" class="form-control" name="fee_card" id="fee_card"
                                    placeholder="{{ __('Nhập Chiết khấu') }}"></input>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="url_callback">{{ __('Url Callback') }}</label>
                                <input type="text" class="form-control" name="url_callback" id="url_callback"
                                    placeholder="{{ __('Nhập Url Callback') }}"></input>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="note">{{ __('note') }}</label>
                                <textarea type="text" class="form-control" name="note" id="note"
                                    placeholder="{{ __('Nhập ghi chú') }}"></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>
                                    {{ __('Lưu') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title" id="offcanvasTopLabel">Chỉnh sửa tỷ lệ nhận đơn</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <form action="{{ route('app.gate.updateRate') }}" method="POST" id="updatePercentageForm">
                        @csrf
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Tên Cổng</th>
                                    <th>Tỷ Lệ (%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($openGates as $gate)
                                    <tr>
                                        <td>{{ $gate->name }}</td>
                                        <td>
                                            <input type="number" class="form-control gate-percentage"
                                                name="gates[{{ $gate->id }}]" value="{{ $gate->rate }}"
                                                min="0" max="100">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <div class="text-center mt-3">
                            <button type="button" class="btn btn-primary" id="savePercentage">Lưu</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRightCreateCashin"
                aria-labelledby="offcanvasRightLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasRightLabel">Tạo Cashin</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="formCreateCashin">
                        @csrf
                        <input type="hidden" id="type" name="type" value="in">
                        <div class="col-lg-3">
                            <div class="row">
                                <div class="form-group">
                                    <label for="chargeType">{{ __('Loại giao dịch') }}</label>
                                    <select id="chargeType" name="chargeType" class="form-control">
                                        <option value="">{{ __('select') }}</option>
                                        <option value="Momo">{{ __('Momo') }}</option>
                                        <option value="MBBank">{{ __('MB') }}</option>
                                        <option value="BIDV">{{ __('BIDV') }}</option>
                                        <option value="ACB">{{ __('ACB') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="amount">{{ __('Số tiền') }}</label>
                                <div class="input-group mb-3">
                                    <input type="number" class="form-control" id="amount" name="amount">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label for="gate_id">{{ __('Chọn cổng') }}</label>
                                <select id="gate_id" name="gate_id" class="form-control">
                                    <option value="">{{ __('select') }}</option>
                                    @foreach (\App\Models\Gate\Gate::where('status', 'on')->get() as $gate)
                                        <option value="{{ $gate->id }}">{{ $gate->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div id="hashOutput"></div>

                        <div class="col-lg-12">
                            <div class="text-center">
                                <button type="button" id="createCashin" class="btn btn-success">
                                    <span id="spinner-create-cashin" class="spinner-border spinner-border-sm mr-2"
                                        role="status" aria-hidden="true" style="display: none;"></span>
                                    <i class="fas fa-save"></i> <span
                                        id="button-text-create-cashin">{{ __('Tạo Cashin') }}</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal fade" id="requestIdModal" tabindex="-1" aria-labelledby="requestIdModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content text-center">
                        <div class="modal-header">
                            <h5 class="modal-title" id="requestIdModalLabel">Request ID đã tạo</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Đóng"></button>
                        </div>
                        <div class="modal-body">
                            <p id="request-id-text" class="fw-bold fs-5"></p>
                            <button class="btn btn-primary" onclick="copyRequestId()">Copy Request ID</button>
                        </div>
                    </div>
                </div>
            </div>
    </section>
@endsection

@section('scripts')
    <!-- DataTables  & Plugins -->
    <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 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/toastr.js/latest/toastr.min.js"></script>
    <script>
        $(document).on('click', '#edit-gate', function() {
            const gate_id = $(this).data('gate-id');

            $.ajax({
                url: '/get-gate-data/' + gate_id,
                method: 'GET',
                success: function(response) {
                    $('#id').val(response.gate.id);
                    $('#api_key').val(response.gate.api_key);
                    $('#sign_key').val(response.gate.sign_key);
                    $('#domain').val(response.gate.domain);
                    $('#note').val(response.gate.note);
                    $('#fee_momo').val(response.gate.fee_momo);
                    $('#fee_bank').val(response.gate.fee_bank);
                    $('#fee_usdt').val(response.gate.fee_usdt);
                    $('#fee_card').val(response.gate.fee_card);
                    $('#type').val(response.gate.type);
                    $('#url_callback').val(response.gate.url_callback);
                    $('#state_cashout').val(response.gate.state_cashout);
                    if (response.gate.type === 'momo') {
                        $('#gate_momo').prop('selected', true);
                    } else if (response.gate.type === 'bank') {
                        $('#gate_bank').prop('selected', true);
                    } else if (response.gate.type === 'momo&bank') {
                        $('#gate_momo&bank').prop('selected', true);
                    } else if (response.gate.type === 'bank&usdt') {
                        $('#gate_bank&usdt').prop('selected', true);
                    } else if (response.gate.type === 'card') {
                        $('#gate_card').prop('selected', true);
                    } else if (response.gate.type === 'usdt') {
                        $('#gate_usdt').prop('selected', true);
                    } else if (response.gate.type === 'all') {
                        $('#gate_all').prop('selected', true);
                    }
                    if (response.gate.state_cashout === 1) {
                        $('#state_cashout_on').prop('selected', true);
                    } else {
                        $('#state_cashout_off').prop('selected', true);
                    }
                },
                error: function(error) {
                    console.error('Lỗi lấy thông tin cổng:', error);
                    toastr.error(error);
                }
            });
        });
        $(document).on('click', '#getBalanceBtn', function() {
            let btn = $(this);
            const gate_id = $(this).data('gate-id');
            btn.attr("data-bs-content", "Đang tải...");
            btn.popover("dispose").popover({
                html: true,
                trigger: "focus",
                placement: "top"
            }).popover("show");
            $.ajax({
                url: '/gate/getBalance/' + gate_id,
                method: "GET",
                success: function(data) {
                    let balance = data.balance ?? 0;
                    let balanceHtml = `<b>${numberFormat(balance)} VND</b>`;

                    btn.attr("data-bs-content", balanceHtml);
                    btn.popover("dispose").popover({
                        html: true,
                        trigger: "focus",
                        placement: "top"
                    }).popover("show");
                },
                error: function() {
                    btn.attr("data-bs-content", `<span>Không lấy được số dư</span>`);
                    btn.popover("dispose").popover({
                        html: true,
                        trigger: "focus",
                        placement: "top"
                    }).popover("show");
                }
            });

        });

        function numberFormat(number) {
            return new Intl.NumberFormat('vi-VN').format(number);
        }

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

        function saveData() {
            const id = $('#id').val();
            var dataTable = $('#listGates').DataTable();
            var pageInfo = dataTable.page.info();
            $.ajax({
                url: '/gate/' + id,
                type: 'PUT',
                data: $('#updateForm').serialize(),
                dataType: 'json',
                success: function(data) {
                    if (data.code == 1) {
                        $('#offcanvasRight').offcanvas('hide');
                        // dataTable.page(pageInfo.page).draw('page');
                        toastr.success(data.msg);
                        window.location.reload();
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function(xhr, status, error) {
                    console.log('Lỗi: ', error);
                    toastr.error('Đã xảy ra lỗi: ' + error);
                },
            });
        }

        $(document).on('click', '#createCashin', function(e) {
            e.preventDefault();

            $('#spinner-create-cashin').show();
            $('#button-text-create-cashin').text('Đang tạo...');

            $.ajax({
                url: '/create-cashin-manual',
                type: 'POST',
                data: $('#formCreateCashin').serialize(),
                success: function(response) {
                    if (response.success == true) {
                        $('#spinner-create-cashin').hide();
                        $('#button-text-create-cashin').text('Tạo Cashin');
                        toastr.success(response.message);
                        $('#request-id-text').text(response.request_id);
                        $('#requestIdModal').modal('show');
                    } else {
                        $('#spinner-create-cashin').hide();
                        $('#button-text-create-cashin').text('Tạo Cashin');
                        toastr.error(response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Có lỗi xảy ra:', error);
                    $('#spinner-create-cashin').hide();
                    $('#button-text-create-cashin').text('Tạo cashin');
                    toastr.error('Có lỗi xảy ra');
                }
            });
        });

        function copyRequestId() {
            let text = document.getElementById("request-id-text").innerText;
            navigator.clipboard.writeText(text).then(() => {
                toastr.success('Đã copy Request ID!');
            }).catch(() => {
                toastr.error('Copy thất bại, vui lòng thử lại.');
            });
        }
    </script>
    <script>
        document.getElementById("savePercentage").addEventListener("click", function() {
            let total = 0;
            let inputs = document.querySelectorAll(".gate-percentage");

            inputs.forEach(input => {
                total += parseFloat(input.value) || 0;
            });

            if (total !== 100) {
                alert("Tổng tỷ lệ phải bằng 100%!");
                return;
            }

            document.getElementById("updatePercentageForm").submit();
        });
    </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">
    <style>
        .offcanvas.show {
            width: 1000px;
            transform: translateX(0);
            height: 100%;
        }

        .offcanvas-body {
            overflow-y: auto;
            height: 100%;
        }

        #loading-overlay {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        #loading-overlay .spinner-border {
            width: 4rem;
            height: 4rem;
            margin-bottom: 10px;
        }

        #loading-overlay .loading-text {
            font-size: 18px;
            color: #fff;
        }
    </style>
@endsection