@extends('layouts.company_main')

@section('title','Users')

@section('content')

<div id="indexWrapper">
    <br>
    <div id="company-nav" class="ml-3 mb-2">
        <ul class="nav nav-pills ml-auto half-height">
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-info" data-status="PENDING">
                    New Application
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-transparent" data-status="APPROVED">
                    Approved Users
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-transparent btnGetUsersActive" data-status="ACTIVE">
                    Active Users
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-transparent" data-status="INACTIVE">
                    InActive Users
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-transparent" data-status="EXPIRED">
                    Expired Users
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-transparent" data-status="REJECTED">
                    Rejected Application
                </button>
            </li>
        </ul>
    </div>
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">Users</h3>
            <div class="card-tools user_data_tools" id="user_data_tools">
                <button class="btn btn-sm btn-success btn-insert-payment-reference display-none">
                    <i class="fa fa-check"></i> Insert Payment Reference
                </button>
                <button class="btn btn-sm btn-success btn-new-data">
                    <i class="fa fa-plus"></i> Apply New User
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive dataTableRow" id="dataTableRow">
                <label class="el-waiting-message">Loading your data. It may take some time..</label>
            </div>
        </div>
    </div>
</div>

<div class="display-none" id="detailWrapper">
    <form method="POST" action="update_user" class="form-update-data">
    @csrf
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">User</h3>
        </div>
        <div class="card-body">
            <div class="form-group display-none err_msg_div">
                <p class="alert err_msg_p">
                    <a class="close" aria-hidden="true" data-dismiss="alert">x</a>
                </p>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <label>User Photo</label>
                    <img class="user_photo user_photo_edit_prev" width="100%" style="cursor:pointer" onclick="event.preventDefault(); document.getElementById('user_photo_edit').click();">
                    <input type="file" accept="image/x-png,image/jpg,image/jpeg" id="user_photo_edit" name="user_photo_edit" class="user_photo_edit form-control" hidden>
                </div>
                <div class="col-md-9">
                    <div class="form-group">
                        <label>Subscription Type</label>
                        <input class="form-control form-control-sm" name="paket_subscription" placeholder="Subscription Type" readonly>
                    </div>
                    
                    <div class="form-group">
                        <label>User Name</label>
                        <input class="form-control form-control-sm" name="user_name" placeholder="User Name" required autofodus>
                        <input name="id_user" hidden>
                    </div>
                    <div class="form-group">
                        <label>User Email</label>
                        <input type="email" class="form-control form-control-sm" name="user_email" placeholder="User Email" required autofodus>
                    </div>
                    <div class="form-group">
                        <label>User Mykad No. / Passport No.</label>
                        <input type="number" class="form-control form-control-sm" name="user_ic_number" placeholder="User Mykad No. / Passport No." required autofodus>
                    </div>
                    <div class="form-group">
                        <label>User Tel</label>
                        <input type="number" class="form-control form-control-sm" name="user_telp" placeholder="User Tel" required autofodus>
                    </div>
                    <div class="form-group">
                        <label>User Address</label>
                        <textarea class="form-control form-control-sm" name="user_address" placeholder="User Address" required autofodus></textarea>
                    </div>
                    
                    <br><br>
                    
                    <div class="form-group">
                        <label>Password</label> <b class="text-danger" style="font-size:0.7rem"> * Leave empty if you dont wish to change user password</b>
                        <input type="password" class="form-control form-control-sm" name="password" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <label>Confirm Password</label>
                        <input type="password" class="form-control form-control-sm" name="confirm_password" placeholder="Confirm Password">
                    </div>
                </div>
            </div>
        </div>
        <br>
        <br>
        <div class="fixed-bottom-input-footer" style="z-index:1">
            <button type="submit" class="btn btn-sm btn-success">Update</button>
            <button type="button" class="btn btn-sm btn-default" onclick="setViewTo('INDEX')">Back</button>
        </div>
    </div>
    </form>
</div>

<div class="display-none" id="createWrapper">
    <form method="POST" action="new_user" class="form-new-data">
    @csrf
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">New User</h3>
        </div>
        <div class="card-body">
            <div class="form-group display-none err_msg_div">
                <p class="alert err_msg_p">
                    <a class="close" aria-hidden="true" data-dismiss="alert">x</a>
                </p>
            </div>