<?php $__env->startSection('content'); ?>
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <style>
body{
    background:#f5f7fc;
    font-family:'Inter',sans-serif;
    color:#1f2937;
}

/* ===========================
MAIN CARD
=========================== */

.main-card{
    background:#fff;
    border-radius:22px;
    padding:30px;
    box-shadow:0 15px 35px rgba(0,0,0,.05);
}

/* ===========================
HEADER
=========================== */

.page-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
    padding-bottom:20px;
    border-bottom:1px solid #ececec;
}

.page-title{
    font-size:32px;
    font-weight:700;
    color:#222;
}

.page-top .btn-dark{
    background:#6B53EC;
    border:none;
    border-radius:14px !important;
    height:48px;
    padding:0 28px;
    font-weight:600;
    transition:.3s;
}

.page-top .btn-dark:hover{
    background:#593ee5;
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(107,83,236,.25);
}

/* ===========================
USER CARD
=========================== */

.user-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    padding:24px;
    margin-bottom:20px;
    border-radius:18px;
    background:#fff;
    border:1px solid #ececec;
    transition:.3s;
}

.user-row:hover{
    border-color:#6B53EC;
    transform:translateY(-2px);
    box-shadow:0 15px 35px rgba(107,83,236,.10);
}

/* ===========================
LEFT SIDE
=========================== */

.user-left{
    display:flex;
    align-items:center;
    gap:18px;
    min-width:280px;
}

.avatar{
    width:64px;
    height:64px;
    border-radius:50%;
    background:linear-gradient(135deg,#6B53EC,#8E7BFF);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:24px;
    font-weight:700;
    flex-shrink:0;
}

.user-name{
    font-size:18px;
    font-weight:700;
}

.user-email{
    color:#6b7280;
    margin-top:4px;
    font-size:14px;
}

/* ===========================
STATUS BADGE
=========================== */

.badge{
    font-size:12px;
    font-weight:600;
    padding:8px 16px !important;
    border-radius:50px !important;
}

.bg-success{
    background:#dcfce7 !important;
    color:#15803d !important;
}

.bg-danger{
    background:#fee2e2 !important;
    color:#dc2626 !important;
}

/* ===========================
RIGHT SECTION
=========================== */

.right-box{
    flex:1;
    display:grid;
    grid-template-columns:110px 120px 150px 150px auto auto;
    gap:15px;
    align-items:center;
}

/* ===========================
MARKUP BADGE
=========================== */

.badge-box{
    background:#F3F0FF;
    color:#6B53EC;
    border-radius:12px;
    font-weight:700;
    padding:12px;
    text-align:center;
}

/* ===========================
INPUTS
=========================== */

.form-select,
.form-control{

    height:46px;

    border-radius:12px;

    border:1px solid #dcdcdc;

    box-shadow:none;

    font-size:14px;

}

.form-control:focus,
.form-select:focus{

    border-color:#6B53EC;

    box-shadow:0 0 0 4px rgba(107,83,236,.12);

}

/* ===========================
SAVE BUTTON
=========================== */

.save-btn{

    height:46px;

    border:none;

    border-radius:12px;

    background:#6B53EC;

    color:#fff;

    font-weight:600;

    padding:0 20px;

    transition:.3s;

}

.save-btn:hover{

    background:#563de4;

    transform:translateY(-2px);

}

/* ===========================
EDIT BUTTON
=========================== */

.editUserBtn{

    height:46px;

    border-radius:12px !important;

    background:#eef2ff !important;

    color:#6B53EC !important;

    border:none !important;

    font-weight:600;

    transition:.3s;

}

.editUserBtn:hover{

    background:#6B53EC !important;

    color:#fff !important;

}

/* ===========================
MODAL
=========================== */

.modal-content{

    border:none;

    border-radius:20px;

    overflow:hidden;

}

.modal-header{

    background:#6B53EC;

    color:#fff;

    border:none;

}

.modal-header .btn-close{

    filter:invert(1);

}

/* ===========================
RESPONSIVE
=========================== */

@media(max-width:1200px){

.right-box{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:991px){

.user-row{

flex-direction:column;

align-items:flex-start;

}

.user-left{

width:100%;

}

.right-box{

width:100%;

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:576px){

.main-card{

padding:20px;

}

.page-top{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.page-title{

font-size:26px;

}

.right-box{

grid-template-columns:1fr;

}

.page-top .btn-dark,

.save-btn,

.editUserBtn{

width:100%;

}

}

/*=========================================
MODAL
=========================================*/

.modal-dialog{
    max-width:650px;
}

.modal-content{
    border:none !important;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.18);
}

/*=========================================
HEADER
=========================================*/

.modal-header{
    background:linear-gradient(135deg,#6B53EC,#563DE4);
    color:#fff;
    padding:22px 28px;
    border:none;
}

.modal-title{
    font-size:22px;
    font-weight:700;
    margin:0;
}

.modal-header .btn-close{
    filter:brightness(0) invert(1);
    opacity:.9;
}

.modal-header .btn-close:hover{
    opacity:1;
}

/*=========================================
BODY
=========================================*/

.modal-body{
    background:#fff;
    padding:30px;
}

/*=========================================
FORM
=========================================*/

.modal-body form{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

/* Full width */

.modal-body .mb-4:last-of-type,
.modal-body button,
.modal-body .full-width{
    grid-column:1/-1;
}

.modal-body .mb-3,
.modal-body .mb-4{
    margin:0 !important;
}

/*=========================================
LABEL
=========================================*/

.form-label{
    font-size:13px;
    font-weight:600;
    color:#6B7280;
    margin-bottom:8px;
    display:block;
}

/*=========================================
INPUT
=========================================*/

.form-control,
.form-select{

    height:50px;

    border-radius:14px;

    border:1px solid #E5E7EB;

    box-shadow:none;

    transition:.25s;

    font-size:14px;

    padding:0 16px;

}

.form-control:hover,
.form-select:hover{

    border-color:#6B53EC;

}

.form-control:focus,
.form-select:focus{

    border-color:#6B53EC;

    box-shadow:0 0 0 4px rgba(107,83,236,.12);

}

/*=========================================
PASSWORD
=========================================*/

input[type=password]{

    letter-spacing:2px;

}

/*=========================================
BUTTON
=========================================*/

.modal-body .btn-dark{

    background:#6B53EC;

    border:none;

    border-radius:14px;

    height:52px;

    font-size:15px;

    font-weight:600;

    transition:.3s;

}

.modal-body .btn-dark:hover{

    background:#563DE4;

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(107,83,236,.28);

}

/*=========================================
PLACEHOLDER
=========================================*/

.form-control::placeholder{

    color:#B6B6B6;

}

/*=========================================
SELECT
=========================================*/

.form-select{

    cursor:pointer;

}

/*=========================================
MODAL BACKDROP
=========================================*/

.modal-backdrop.show{

    opacity:.65;

}

/*=========================================
SCROLLBAR
=========================================*/

.modal-body::-webkit-scrollbar{

    width:8px;

}

.modal-body::-webkit-scrollbar-thumb{

    background:#D6CCFF;

    border-radius:20px;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:768px){

.modal-dialog{

margin:15px;

}

.modal-body{

padding:22px;

}

.modal-body form{

grid-template-columns:1fr;

}

.modal-body button{

grid-column:auto;

}

}
    </style>
    
    <div class="container-fluid">
        <div class="main-card">
            <div class="page-top">
                <div class="page-title">
                    User Price Markup
                </div>
                <button class="btn btn-dark rounded-3 px-4" data-bs-toggle="modal" data-bs-target="#userModal">
                    + Add User
                </button>
            </div>
            <?php $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="user-row">
                    <div class="user-left">
                        <div class="avatar">
                            <?php echo e(strtoupper(substr($user->name, 0, 1))); ?>

                        </div>
                        <div>
                            <div class="user-name">
                                <?php echo e($user->name); ?>

                            </div>
                            <div class="user-email">
                                <?php echo e($user->email); ?>

                            </div>
                            
                            <div class="mt-2">
                                <?php if($user->status == 'approved'): ?>
                                    <span class="badge bg-success px-3 py-2 rounded-pill">
                                        approved
                                    </span>
                                <?php else: ?>
                                    <span class="badge bg-danger px-3 py-2 rounded-pill">
                                        Pending
                                    </span>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    <div class="right-box">
                        
                        <?php if($user->markup_value > 0): ?>
                            <div class="badge-box">
                                <?php if($user->markup_type == 'percent'): ?>
                                    +<?php echo e($user->markup_value); ?>%
                                <?php else: ?>
                                    +$<?php echo e($user->markup_value); ?>

                                <?php endif; ?>
                            </div>
                        <?php endif; ?>

                        <div class="">
                            <label class="form-label fw-semibold">
                                Duty
                            </label>
                            <input type="number"
                                    step="0.01"
                                    value="<?php echo e($user->duty); ?>"
                                    class="form-control duty_value"
                                    data-id="<?php echo e($user->id); ?>"
                                    placeholder="Duty">
                        </div>

                        
                        <select class="form-select type-select markup_type" data-id="<?php echo e($user->id); ?>">
                            <option value="percent" <?php echo e($user->markup_type == 'percent' ? 'selected' : ''); ?>>
                                %
                            </option>
                            <option value="fixed" <?php echo e($user->markup_type == 'fixed' ? 'selected' : ''); ?>>
                                $
                            </option>
                        </select>
                        
                        <input type="number" step="0.01" value="<?php echo e($user->markup_value); ?>"
                            class="form-control markup-input markup_value" data-id="<?php echo e($user->id); ?>">
                        
                        <select class="form-select status_select" data-id="<?php echo e($user->id); ?>">
                            <option value="approved" <?php echo e($user->status == 'approved' ? 'selected' : ''); ?>>
                                Approved
                            </option>
                            <option value="pending" <?php echo e($user->status == 'pending' ? 'selected' : ''); ?>>
                                Pending
                            </option>
                        </select>
                        
                        <button class="save-btn saveMarkup" data-id="<?php echo e($user->id); ?>">
                            Save
                        </button>
                        
                        <button class="btn btn-primary rounded-3 editUserBtn" data-id="<?php echo e($user->id); ?>"
                            data-name="<?php echo e($user->name); ?>" data-email="<?php echo e($user->email); ?>"
                            data-company="<?php echo e($user->company_name); ?>" data-contact="<?php echo e($user->contact); ?>"
                            data-type="<?php echo e($user->type); ?>" data-markup="<?php echo e($user->markup_value); ?>"
                            data-markup_type="<?php echo e($user->markup_type); ?>" data-status="<?php echo e($user->status); ?>"
                            data-bs-toggle="modal" data-bs-target="#editUserModal">
                            Edit
                        </button>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
    <!-- MODAL -->
    <!-- ADD USER BUTTON -->
    <!-- MODAL -->
    <div class="modal fade" id="userModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold">
                        Add User
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body">
                    <form id="addUserForm">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                Name
                            </label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                Company Name
                            </label>
                            <input type="text" name="company_name" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                Contact
                            </label>
                            <input type="text" name="contact" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                Email
                            </label>
                            <input type="email" name="email" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                Password
                            </label>
                            <input type="password" name="password" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                User Type
                            </label>
                            <select name="type" class="form-select" required>
                                <option value="">
                                    Select Type
                                </option>
                                <option value="Admin">
                                    Admin
                                </option>
                                <option value="User">
                                    User
                                </option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                Markup
                            </label>
                            <input type="number" step="0.01" name="markup" class="form-control" required>
                        </div>
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                Markup Type
                            </label>
                            <select name="markup_type" class="form-select" required>
                                <option value="percent">
                                    Percent (%)
                                </option>
                                <option value="fixed">
                                    Fixed ($)
                                </option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                Duty
                            </label>
                        <input type="number" step="0.01" name="duty" class="form-control" required>
                    </div>
                        
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                Status
                            </label>
                            <select name="status" class="form-select" required>
                                <option value="">
                                    Select Status
                                </option>
                                <option value="approved">
                                    Approved
                                </option>
                                <option value="pending">
                                    Pending
                                </option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-dark w-100 py-2 rounded-3">
                            Submit
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editUserModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 rounded-4">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold">
                        Edit User
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>
                <div class="modal-body">
                    <form id="editUserForm">
                        <input type="hidden" name="user_id" id="edit_user_id">
                        <div class="mb-3">
                            <label class="form-label">
                                Name
                            </label>
                            <input type="text" name="name" id="edit_name" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">
                                Company
                            </label>
                            <input type="text" name="company_name" id="edit_company" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">
                                Contact
                            </label>
                            <input type="text" name="contact" id="edit_contact" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">
                                Email
                            </label>
                            <input type="email" name="email" id="edit_email" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">
                                User Type
                            </label>
                            <select name="type" id="edit_type" class="form-select">
                                <option value="Admin">
                                    Admin
                                </option>
                                <option value="User">
                                    User
                                </option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">
                                Markup
                            </label>
                            <input type="number" step="0.01" name="markup" id="edit_markup" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">
                                Markup Type
                            </label>
                            <select name="markup_type" id="edit_markup_type" class="form-select">
                                <option value="percent">
                                    Percent (%)
                                </option>
                                <option value="fixed">
                                    Fixed ($)
                                </option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">
                                Duty
                            </label>
                            <input type="number"
                                step="0.01"
                                name="duty"
                                id="edit_duty"
                                class="form-control">
                        </div>
                        
                        <div class="mb-4">
                            <label class="form-label">
                                Status
                            </label>
                            <select name="status" id="edit_status" class="form-select">
                                <option value="approved">
                                    approved
                                </option>
                                <option value="0">
                                    pending
                                </option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-dark w-100">
                            Update User
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        /* OPEN MODAL */
        $('#openModal').click(function() {
            $('#userModal').fadeIn();
        });
        /* CLOSE MODAL */
        $('#closeModal').click(function() {
            $('#userModal').fadeOut();
        });
        /* SAVE MARKUP */
        $(document).on('click', '.saveMarkup', function() {
            let row = $(this).closest('.user-row');
            $.ajax({
                url: "<?php echo e(route('update-markup')); ?>",
                type: 'POST',
                data: {
                    user_id: $(this).data('id'),
                    markup_type: row.find('.markup_type').val(),
                    markup_value: row.find('.markup_value').val(),
                    duty: row.find('.duty_value').val(),
                    status: row.find('.status_select').val()
                },
                success: function(response) {
                    location.reload();
                }
            });
        });
        /* ADD USER */
        $('#addUserForm').submit(function(e) {
            e.preventDefault();
            $.ajax({
                url: "<?php echo e(route('add-user')); ?>",
                type: "POST",
                data: $(this).serialize(),
                success: function(response) {
                    alert('User Added Successfully');
                    location.reload();
                },
                error: function() {
                    alert('Something went wrong');
                }
            });
        });
        // $(document).on(
        //     'click',
        //     '.editUserBtn',
        //     function(){
        //         $('#edit_user_id').val($(this).data('id'));
        //         $('#edit_name').val($(this).data('name'));
        //         $('#edit_company').val($(this).data('company'));
        //         $('#edit_contact').val($(this).data('contact'));
        //         $('#edit_email').val($(this).data('email'));
        //         $('#edit_type').val($(this).data('type'));
        //         $('#edit_markup').val($(this).data('markup'));
        //         $('#edit_markup_type').val($(this).data('markup_type'));
        //         $('#edit_status').val($(this).data('status'));
        // });
        $(document).on('click', '.editUserBtn', function() {
            $('#edit_user_id').val($(this).data('id'));
            $('#edit_name').val($(this).data('name'));
            $('#edit_company').val($(this).data('company'));
            $('#edit_contact').val($(this).data('contact'));
            $('#edit_email').val($(this).data('email'));
            $('#edit_type').val($(this).data('type'));
            $('#edit_markup').val($(this).data('markup'));
            $('#edit_duty').val($(this).data('duty'));
            $('#edit_markup_type').val($(this).data('markup_type'));
            $('#edit_status').val($(this).data('status'));
            $('#editUserModal').modal('show');
        });
        $('#editUserForm').submit(function(e) {
            e.preventDefault();
            $.ajax({
                url: "<?php echo e(route('update.user')); ?>",
                type: "POST",
                data: $(this).serialize(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                   
                    if (response.status) {
                        $('#editUserModal').modal('hide');
                        location.reload();
                    }
                }
            });
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layout.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/braintreeeasysof/public_html/popular/resources/views/admin/users/list.blade.php ENDPATH**/ ?>