<?php 
if (!defined('IN_SITE')) {
    die('The Request Not Found');
}
$title = 'Quản Lý Thành Viên | ' . $DVR->site('title');
$body = [
    'title' => 'Danh sách Đơn Tố Cáo'
];
$body['header'] = '
<style>
    .gdv-create-page .page-header-breadcrumb{
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 45%, #334155 100%);
        border-radius: 22px;
        padding: 20px;
        box-shadow: 0 14px 38px rgba(15, 23, 42, 0.14);
        position: relative;
        overflow: hidden;
    }
    .gdv-create-page .page-header-breadcrumb::before{
        content: "";
        position: absolute;
        top: -60px;
        right: -60px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
    }
    .gdv-create-page .page-header-breadcrumb::after{
        content: "";
        position: absolute;
        bottom: -50px;
        left: -50px;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: rgba(255,255,255,.04);
    }
    .gdv-create-page .page-title{
        color: #fff;
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .gdv-create-page .page-subtitle{
        color: rgba(255,255,255,.76);
        font-size: 13px;
        margin-top: 8px;
        position: relative;
        z-index: 2;
    }

    .gdv-create-page .custom-card{
        border: 0;
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    }
    .gdv-create-page .custom-card .card-header{
        border-bottom: 1px solid #edf2f7;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        padding: 18px 22px;
    }
    .gdv-create-page .custom-card .card-title{
        font-size: 18px;
        font-weight: 800;
        color: #0f172a;
    }
    .gdv-create-page .custom-card .card-body{
        padding: 22px;
    }

    .gdv-form-section{
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        padding: 18px;
        margin-bottom: 18px;
    }
    .gdv-form-section-title{
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #64748b;
        margin-bottom: 16px;
    }

    .gdv-create-page .form-label{
        font-size: 13px;
        font-weight: 700;
        color: #334155;
        margin-bottom: 8px;
    }
    .gdv-create-page .form-control,
    .gdv-create-page .form-select{
        min-height: 46px;
        border-radius: 14px;
        border: 1px solid #dbe2ea;
        box-shadow: none !important;
        background: #fff;
    }
    .gdv-create-page textarea.form-control{
        min-height: 110px;
    }
    .gdv-create-page .form-control:focus,
    .gdv-create-page .form-select:focus{
        border-color: #86b7fe;
    }
    .gdv-create-page .input-helper{
        display: inline-block;
        margin-top: 6px;
        font-size: 12px;
        color: #64748b;
    }

    .gdv-grid-stat{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 20px;
    }
    .gdv-stat-card{
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        border: 1px solid #e9edf3;
        border-radius: 18px;
        padding: 16px;
        box-shadow: 0 10px 24px rgba(15,23,42,.04);
    }
    .gdv-stat-label{
        font-size: 13px;
        color: #64748b;
        font-weight: 700;
        margin-bottom: 8px;
    }
    .gdv-stat-value{
        font-size: 24px;
        line-height: 1.2;
        font-weight: 800;
        color: #0f172a;
    }

    .gdv-bank-box{
        background: #fff;
        border: 1px solid #e5edf5;
        border-radius: 18px;
        padding: 16px;
        margin-bottom: 14px;
        box-shadow: 0 8px 20px rgba(15,23,42,.03);
    }
    .gdv-bank-box:first-child{
        margin-top: 4px;
    }

    .gdv-btn{
        border-radius: 14px;
        font-weight: 700;
        min-height: 44px;
        padding: 10px 16px;
    }
    .gdv-btn-sm{
        border-radius: 12px;
        font-weight: 700;
        padding: 9px 14px;
    }
    .gdv-submit-btn{
        min-height: 48px;
        border-radius: 16px;
        font-weight: 800;
        box-shadow: 0 12px 24px rgba(13,110,253,.16);
    }

    .gdv-info-card{
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        border: 1px solid #e8eef5;
        border-radius: 20px;
        padding: 18px;
        box-shadow: 0 10px 24px rgba(15,23,42,.04);
    }
    .gdv-info-card + .gdv-info-card{
        margin-top: 16px;
    }
    .gdv-info-title{
        font-size: 15px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 10px;
    }
    .gdv-info-text{
        color: #475569;
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 0;
    }

    .back-btn{
        border-radius: 12px !important;
    }

    .select2-container--default .select2-selection--single{
        height: 46px !important;
        border-radius: 14px !important;
        border: 1px solid #dbe2ea !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 8px !important;
    }
    .select2-container .select2-selection--single .select2-selection__rendered{
        line-height: 44px !important;
        padding-left: 6px !important;
    }
    .select2-container .select2-selection--single .select2-selection__arrow{
        height: 44px !important;
    }

    @media (max-width: 1199.98px){
        .gdv-grid-stat{
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 991.98px){
        .gdv-create-page .custom-card .card-body{
            padding: 18px;
        }
        .gdv-form-section{
            padding: 16px;
        }
    }

    @media (max-width: 767.98px){
        .gdv-create-page .page-header-breadcrumb{
            padding: 16px;
            border-radius: 18px;
        }
        .gdv-create-page .page-title{
            font-size: 20px !important;
            line-height: 1.5;
        }
        .gdv-create-page .custom-card .card-header{
            padding: 16px 18px;
        }
        .gdv-create-page .custom-card .card-body{
            padding: 16px;
        }
        .gdv-bank-box{
            padding: 14px;
        }
        .gdv-btn,
        .gdv-btn-sm,
        .gdv-submit-btn{
            width: 100%;
        }
    }

    @media (max-width: 575.98px){
        .gdv-create-page .page-title{
            gap: 8px;
            font-size: 18px !important;
        }
        .gdv-stat-value{
            font-size: 22px;
        }
    }
</style>
';
$body['footer'] = '';
require_once(__DIR__.'/Header.php');
require_once(__DIR__.'/Sidebar.php');
require_once(__DIR__ . '/../../../core/is_user.php');
CheckLogin();
CheckAdmin();
?>

<div class="main-content app-content gdv-create-page">
    <div class="container-fluid">
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <div>
                <h1 class="page-title fw-semibold fs-18 mb-0">
                    <a type="button" class="btn btn-dark btn-raised-shadow btn-wave btn-sm me-1 back-btn" href="/admin/list-gdv">
                        <i class="fa-solid fa-arrow-left"></i>
                    </a>
                    Thêm Giao Dịch Viên
                </h1>
                <div class="page-subtitle">
                    Điền đầy đủ thông tin giao dịch viên, ngân hàng nhận tiền và kênh liên hệ để hiển thị chuyên nghiệp hơn
                </div>
            </div>
        </div>

        <div class="gdv-grid-stat">
            <div class="gdv-stat-card">
                <div class="gdv-stat-label">Tổng chuyên mục</div>
                <div class="gdv-stat-value"><?= format_cash($DVR->num_rows("SELECT * FROM `category`")); ?></div>
            </div>
            <div class="gdv-stat-card">
                <div class="gdv-stat-label">Tổng ngân hàng</div>
                <div class="gdv-stat-value"><?= format_cash($DVR->num_rows("SELECT * FROM `api_logo`")); ?></div>
            </div>
            <div class="gdv-stat-card">
                <div class="gdv-stat-label">Trạng thái</div>
                <div class="gdv-stat-value">Sẵn sàng</div>
            </div>
        </div>

        <form id="form-gdv" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="token" value="<?=$getUser['token']?>" id="token">

            <div class="row g-4">
                <div class="col-xl-8">
                    <div class="card custom-card">
                        <div class="card-header justify-content-between">
                            <div class="card-title">
                                Thêm Giao Dịch Viên
                            </div>
                        </div>
                        <div class="card-body">

                            <div class="gdv-form-section">
                                <div class="gdv-form-section-title">Thông tin cơ bản</div>
                                <div class="row gy-3">
                                    <div class="col-sm-12">
                                        <label class="form-label">Chức Vụ: <span class="text-danger">*</span></label>
                                        <select class="form-control" name="dich_vu" required>
                                            <option value="">-- Chọn loại --</option>
                                            <?php foreach ($DVR->get_list("SELECT * FROM `category` ORDER BY `stt` ASC, `id` DESC") as $dvr) {?>
                                                <option value="<?=$dvr['code'];?>"><?=$dvr['code'];?></option>
                                            <?php } ?>
                                        </select>
                                    </div>

                                    <div class="col-sm-12">
                                        <label class="form-label">Họ Và Tên <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" placeholder="Nhập Họ Tên" name="title" required>
                                    </div>

                                    <div class="col-sm-12">
                                        <label class="form-label">Link Ảnh Đại Diện <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" placeholder="Nhập Link Ảnh" name="image" required>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label">Số Tiền Cọc: <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control" placeholder="Nhập Số Tiền" name="money" required>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label">Ngày Cọc: <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="ngay" value="" placeholder="01-01-2000">
                                    </div>
                                </div>
                            </div>

                            <div class="gdv-form-section">
                                <div class="gdv-form-section-title">Liên hệ & mạng xã hội</div>
                                <div class="row gy-3">
                                    <div class="col-md-6">
                                        <label class="form-label">SĐT: <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control" name="sdt" placeholder="Nhập Số ĐT">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label">Telegram: <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="telegram" placeholder="Nhập id telegram">
                                    </div>

                                    <div class="col-sm-12">
                                        <label class="form-label">Link FB: <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="linkfb" value="" placeholder="https://www.facebook.com/g.phu2712">
                                    </div>

                                    <div class="col-sm-12">
                                        <label class="form-label">UID FB: <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="idfb" value="" placeholder="Nhập UID FB">
                                    </div>

                                    <div class="col-sm-12">
                                        <label class="form-label">Website <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="website" value="" placeholder="Nhập link website">
                                    </div>
                                </div>
                            </div>

                            <div class="gdv-form-section">
                                <div class="gdv-form-section-title">Dịch vụ cung cấp</div>
                                <div class="row gy-3">
                                    <div class="col-sm-12">
                                        <label class="form-label">Dịch Vụ Cung Cấp <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="dichvucungcap" placeholder="Nhập Dịch Vụ Mà GDV cung cấp">
                                        <span class="input-helper">Mỗi dịch vụ cách nhau bằng dấu <strong>|</strong></span>
                                    </div>
                                </div>
                            </div>

                            <div class="gdv-form-section">
                                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
                                    <div class="gdv-form-section-title mb-0">Tài khoản ngân hàng</div>
                                    <button type="button" class="btn btn-success gdv-btn-sm" id="addbank">
                                        <i class="fa-solid fa-plus me-1"></i> Thêm ngân hàng
                                    </button>
                                </div>

                                <div class="col-12 mb-0" id="rowItem">
                                    <div class="gdv-bank-box row row5 row-item">
                                        <div class="col-lg-5 col-md-5 col-12 mb-3 mb-md-0">
                                            <div class="section-form_item" id="bank">
                                                <label class="form-label">Ngân hàng</label>
                                                <select class="form-control bank-select" data-trigger name="bank[]">
                                                    <option value="">--- chọn ngân hàng --</option>
                                                    <?php foreach ($DVR->get_list("SELECT * FROM `api_logo`") as $bank) {?>
                                                        <option value="<?=$bank['shortName'];?>"><?=$bank['name'];?></option>
                                                    <?php } ?>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-lg-5 col-md-5 col-12 mb-3 mb-md-0">
                                            <div class="section-form_item">
                                                <label class="form-label">STK</label>
                                                <input type="text" value="" class="form-theme_item__input form-control" name="account_num[]">
                                            </div>
                                        </div>

                                        <div class="col-lg-2 col-md-2 col-12">
                                            <div class="section-form_item">
                                                <label class="form-label">Action</label>
                                                <button type="button" class="btn btn-primary gdv-btn-sm w-100" id="addbank-inline">
                                                    Thêm
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-grid gap-2 mb-0">
                                <button type="submit" id="submitgdv" class="btn btn-primary shadow-primary gdv-submit-btn">
                                    <i class="fa fa-fw fa-save me-1"></i> Save
                                </button>
                            </div>

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

                <div class="col-xl-4">
                    <div class="gdv-info-card">
                        <div class="gdv-info-title">Hướng dẫn nhanh</div>
                        <p class="gdv-info-text">
                            Điền đầy đủ thông tin cơ bản, liên hệ và các tài khoản ngân hàng để hồ sơ giao dịch viên hiển thị rõ ràng, đẹp mắt và dễ quản lý hơn trong admin.
                        </p>
                    </div>

                    <div class="gdv-info-card">
                        <div class="gdv-info-title">Lưu ý</div>
                        <p class="gdv-info-text">
                            Mỗi dịch vụ nên ngăn cách bằng dấu <strong>|</strong>. Với phần ngân hàng, bạn có thể thêm nhiều tài khoản để hỗ trợ nhiều kênh thanh toán.
                        </p>
                    </div>

                    <div class="gdv-info-card">
                        <div class="gdv-info-title">Hỗ trợ</div>
                        <p class="gdv-info-text">
                            Cảm ơn quý khách đã sử dụng code của chúng tôi, mọi thắc mắc xin vui lòng ib tele <strong>t.me/Haomilknn07</strong>. Chức năng này được tạo ra để admin có thể thêm được giao dịch viên.
                        </p>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<script>
function initBankSelect() {
    $('.bank-select').select2({
        width: '100%'
    });
}

$(document).ready(function() {
    initBankSelect();
});

function addBankRow() {
    var data_row = Date.now();

    let rowRender = `<div class="gdv-bank-box row row5 row-item mt-3 delete-${data_row}">
                        <div class="col-lg-5 col-md-5 col-12 mb-3 mb-md-0">
                            <div class="section-form_item">
                                <label class="form-label">Ngân hàng</label>
                                <select class="form-control bank-select" data-trigger name="bank[]">
                                    <option value="">--- chọn ngân hàng --</option>
                                    <?php foreach ($DVR->get_list("SELECT * FROM `api_logo`") as $bank) {?>
                                        <option value="<?=$bank['shortName'];?>"><?=$bank['name'];?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-5 col-md-5 col-12 mb-3 mb-md-0">
                            <div class="section-form_item">
                                <label class="form-label">STK</label>
                                <input type="text" value="" class="form-theme_item__input form-control" name="account_num[]">
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-2 col-12">
                            <div class="section-form_item">
                                <label class="form-label">Action</label>
                                <button type="button" class="btn btn-danger gdv-btn-sm w-100 deleteItem" data-id="${data_row}">
                                    Delete
                                </button>
                            </div>
                        </div>
                    </div>`;

    $("#rowItem").append(rowRender);
    initBankSelect();
}

$("body").on("click", "#addbank", function () {
    addBankRow();
});

$("body").on("click", "#addbank-inline", function () {
    addBankRow();
});

$("body").on("click", ".deleteItem", function () {
    var item = $(this).attr("data-id");
    $(".delete-" + item).remove();
});

$("#form-gdv").on("submit", function(e) {
    e.preventDefault();

    $('#submitgdv').html('<i class="fa fa-spinner fa-spin"></i> Đang xử lý...').prop('disabled', true);

    var formData = new FormData(document.getElementById('form-gdv'));

    $.ajax({
        url: "/ajaxs/admin/add_gdv.php",
        type: "POST",
        dataType: "json",
        data: formData,
        processData: false,
        contentType: false,
        success: function(res) {
            if (res.status == 'success') {
                showMessage(res.msg, "success");
                setTimeout(function() {
                    location.reload();
                }, 2000);
            } else {
                showMessage(res.msg, res.status);
            }
            $('#submitgdv').html('<i class="fa fa-fw fa-save me-1"></i> Save').prop('disabled', false);
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
            Swal.fire({
                icon: 'error',
                title: 'Lỗi',
                text: 'Có lỗi xảy ra khi gửi đơn tố cáo. Vui lòng thử lại!'
            });
            $('#submitgdv').html('<i class="fa fa-fw fa-save me-1"></i> Save').prop('disabled', false);
        }
    });
});
</script>

<?php
require_once(__DIR__.'/Footer.php');
?>