@extends('layouts.app')

@section('content')
<div class="mb-4 d-flex">
    <h3 class="text-muted my-auto"><b><i class="fas fa-user mr-2"></i>Users</b></h3>
    <a href="{{ URL::to('user_log') }}" class="btn btn-primary ml-auto mr-2">User Log</a>
    <a href="javascript:void();" onclick="showFormBar()" class="btn btn-primary">Add User</a>
</div>
<div class="card">
    <div class="card-body">
        <table id="datatable" class="datatable table table-hover table-center mb-0">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Brands</th>
                    <th>Status</th>
                    <th class="text-right">Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@section('form-bar')
<h4>Add user</h4>
<form action="{{ isset($id)? route('users.update', $id) : route('users.store') }}" method="POST">
    @csrf
    @if(isset($id))
        @method('PUT')
    @endif
    <div class="form-group">
        <label for="">Role</label>
        <select id="role" name="role" class="form-control">
            @foreach(App\Role::get() as $_role)
                <option value="{{ $_role->id }}">{{ $_role->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <label for="">Name</label>
        <input type="text" name="name" class="form-control" value="{{ isset($id)? $user->name : '' }}" required>
    </div>
    <div class="form-group">
        <label for="">Email</label>
        <input type="text" name="email" class="form-control" value="{{ isset($id)? $user->email : '' }}" required>
    </div>
    <div class="form-group">
        <label for="">Password</label>
        <input type="password" name="password" class="form-control" @if(!isset($id)) required @endif>
    </div>
    <div class="form-group">
        <label for="">Status</label>
        <select id="status" name="status" class="form-control">
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
        </select>
    </div>
    <h6 class="mt-4"><b>Assign Brands</b></h6>
    <hr>
    <div class="brands mb-4 row">
        @foreach(App\Brand::get() as $_brand)
                        @if(isset($id))
                @if(in_array($_brand->id, $brandIds))
                                    @endif
            @endif
            <!-- <input type="checkbox" id="{{ $_brand->id }}" name="brand[]" value="{{ $_brand->id }}" @if($checked) checked @endif> {{ $_brand->name }} -->
            
            <label class="col-md-4 mt-1 form-check-label">
            <input type="checkbox" id="{{ $_brand->id }}" name="brand[]" value="{{ $_brand->id }}" @if($checked) checked @endif>
                {{ $_brand->name }}
            </label>

        @endforeach
    </div>
    <div class="brands-fields"></div>
    <button type="submit" class="btn btn-primary">Save</button>
    <a @if(isset($id)) href="{{ route('users.index') }}" @else onclick="hideFormBar();" @endif class="btn btn-primary ml-auto text-light">Close</a>
</form>
@endsection

@section('script')
<script>
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ URL::to('users') }}",
        columns: [
            {data: 'name', name: 'name'},
            {data: 'brand', name: 'brand'},
            {data: 'status', name: 'status'},
            {
                data: 'action', 
                name: 'action', 
                orderable: true, 
                searchable: true
            },
        ]
    });
</script>
@if(isset($id))
<script>
    $(document).ready(function(){
        var formBar = $('.form-bar');
        var formBarOverlay = $('.form-bar-overlay');

        formBar.addClass('show-form-bar'); 
        formBarOverlay.addClass('show-form-bar-overlay');

        $('#status').val('{{ $user->status }}');
        $('#role').val('{{ $user->role_id }}');
    });
</script>
@endif
@endsection